.demoArea
{
    background: #F9FBFB -moz-linear-gradient(#F9FBFB, #333333);
    background: #F9FBFB -webkit-linear-gradient(#F9FBFB, #333333);
    background: #F9FBFB -o-linear-gradient(#F9FBFB, #333333);
    background: #F9FBFB linear-gradient(#F9FBFB, #333333);
}

#navigation
{
    padding-left: 55px;
    padding-right: 85px;
}

#listView
{
    width: 940px;
    height: 480px;
    margin-top: 10px;
    position: relative;
}

#innerlistView
{
    width: 660px;
    height: 480px;
    margin: 10px auto;
    position: relative;
}

#innerListViewCitizen
{
    width: 660px;
    height: auto;
    margin: 10px auto;
    position: relative;
}

#previewlistView
{
    width: 286px;
    height: 250px;
    margin-top: 10px;
    position: relative;
}

#guidelistView
{
    border: 1px solid #25A0DA;
    width: 940px;
    height: 90px;
    margin-top: 10px;
    position: relative;
}

.pagePrev, .pageNext
{
    width: 22px;
    height: 22px;
    position: absolute;
    top: 132px;
    background: transparent url('http://aspnet-skins.telerikstatic.com/ajaxz/2011.3.1305/Black/Grid/sprite.gif') no-repeat scroll 0 0;
}

.pagePrev
{
    left: -40px;
}

.pagePrev
{
    background-position: 0 -700px;
}

.pagePrev:hover
{
    background-position: 0 -750px;
}

.pageNext
{
    right: -15px;
}

.pageNext
{
    background-position: 0 -850px;
}

.pageNext:hover
{
    background-position: 0 -900px;
}

.sortPanel
{
    float: right;
}

.sortDescription
{
    float: right;
    margin-top: 3px;
    margin-right: 10px;
}

.sortAsc, .sortDesc
{
    width: 22px;
    height: 22px;
    display: inline-block;
    background: transparent url("img/sort.png") no-repeat scroll 0 0;
    margin-left: 3px;
}

.sortAsc:hover
{
    background-position: 0 -22px;
}

.sortDesc
{
    background-position: -22px 0;
}

.sortDesc:hover
{
    background-position: -22px -22px;
}

.item
{
    float: left;
    cursor: pointer;
    font-size: 14px;
    height: 200px;
    width: 286px;
    margin: 5px;
    position: relative;
   /* box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset] */
   box-shadow: 0px 0px 30px silver inset; 
}

.item2
{
    float: left;
    cursor: pointer;
    font-size:11px;
    height: 50px;
    padding-top: 2px;
    width: 320px;
    margin: 5px;
    position: relative;
}

.item3
{
    float: left;
    cursor: pointer;
    font-size:11px;
    height: 30px;
    padding-top: 2px;
    width: 235px;
    margin-top:5px;
    position: relative;
}


div.item3:hover
{
    background-color: #E8E8E8;
}

.item:hover
{
    color: black;
    background-color: #66ccff;
}

.item.selected
{
    color: #000000;
    background-color:#A1C401;
    background-image: -moz-linear-gradient(#A1C401, #577D00);
    background-image: -webkit-linear-gradient(#A1C401, #577D00);
    background-image: -o-linear-gradient(#A1C401, #577D00);
}

.item img, .item .photo
{
    width: 57px;
    height: 70px;
    float: left;
    margin: -3px 10px 0 7px;
    background-color: #111111;
}

a.HyperLinkHover {
     color: White;
     font-size: large;
     font-weight:normal;
}  

a.HyperLinkHover:visited { color:Purple;}

.rotatorCenter, .rotatorNoButtons, .rotatorWithButtons {
    margin-left: auto;
    margin-right: auto;
}
.rotatorNoButtons {
    width: 100%;
    
}

.rrClipRegion{border: 0px !important;}

.rotatorWithButtons {
    width: 286px;
    margin-top: 5px;
}
.itemTemplateNoButtons {
    background: #bfd8e8;
    width: 100%; 
    height: 100%;    
}


/*
The following selectors are used to style the description box only and are irrelevant to the example layout
*/
#defaults { table-layout:fixed; border-collapse:collapse; width:800px}
#defaults th,#defaults td {border: 1px solid gray; padding:2px 10px; text-align:left;}


/* The following selectors are to remove hard coded styling from ListViewControl.ascx */

#ListViewItemBackgroundImage 
{
    background-repeat:repeat-y; 
}

#ItemTemplateContainer 
{
    width: 286px; 
    text-align: center; 
    float: right; 
}

.ClearFloating
{
    clear: both;
}

.TextShadow 
{
    text-shadow: 2px 2px Black;
}