html, body
{width:100%; 
height:100%;} 

body
{font-family:Helvetica, Arial, 'DejaVu Sans', sans-serif;
color:#666;}

/*.wrapper
{min-height:100%;}*/

.header
{width:100%;
/*background-color:grey;*/
border-bottom:1px solid #999;
margin-bottom:2%;
height:14%;}

.content
{/*padding-bottom: 100px;*/
margin-bottom:2%;
height:70%}

.search
{margin-left:2%;
padding-top:2%;
}

.search input
{width:30%; /*fine if i give this width in percent, right?*/
height:30px; /*here, a fixed width shouldn't be a problem, right?, what is someone's seeing it on an iphone?*/
padding-left:8px;
padding-right:8px;
/*-moz-box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;  
-webkit-box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
background-color:rgba(254, 254, 254, 0.9);*/
border-radius:8px;

/*
-moz-box-shadow:inset 2px 2px 8px 1px #aca7a7;
-webkit-box-shadow:inset 2px 2px 8px 1px #aca7a7;
box-shadow:inset 2px 2px 8px 1px #aca7a7;
border:1px solid #c8c6c6;
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:20px;
*/
}


.search input:focus
{outline:none;
border:1px solid #999;
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;} /*this doesn't work need to find a way to give the outline border radius on focus*/

.mapListSection
{float:left;
width:34%;
margin-left:2%;}

/*.mapList
{
}*/

.mapList li
{font-size:16px;
padding-bottom:14px;
cursor:pointer;}

.mapList li:hover
{color:#7e4444;}

.map
{
float:left;
width:60%;
margin-right:2%;
height:100%; /*please delete this fixed height*/}
 
.paginate
{width:320px; /*is a fixed width fine, because percentages screw this up*/
margin:0 auto;}

.paginate li
{float:left;
margin-right:9px;
margin-bottom:12px;
font-size:10px;
border:1px solid #e5e5e5;
padding:2px 4px;
cursor:pointer;
background: #b5b5b5; /* Old browsers */
background: -moz-linear-gradient(top, #FFF 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #FFF 0%,#b8b8b8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #FFF 0%,#e5e5e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #FFF 0%,#e5e5e5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #FFF 0%,#e5e5e5 100%); /* W3C */
}

.paginate li a
{text-decoration:none;
color:#666;
}


.paginate li:first-child, .paginate li:last-child /*wont work in old IE versions, will have to test how it works*/
{border:1px solid transparent;
background:none;
font-size:10px;}

.paginate li:hover
{-moz-box-shadow:2px 3px 4px #c6c0c0;
-webkit-box-shadow:2px 3px 4px #c6c0c0;
box-shadow:2px 3px 4px #c6c0c0;
-moz-transform:scale(1.25);
-webkit-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);}

/*.paginateSelected li*/ /*do i need to repeat all these classes from the .paginate div ?, also do the same for first child and last child please*/
/*{float:left;
color:#272727;
margin-right:12px;
font-size:10px;
border:1px solid #e5e5e5;
padding:2px 4px;
cursor:pointer;
background: #b5b5b5; 
background: -moz-linear-gradient(top, #d19f9f 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d19f9f), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top, #d19f9f 0%,#e5e5e5 100%); 
background: -o-linear-gradient(top, #d19f9f 0%,#e5e5e5 100%); 
background: -ms-linear-gradient(top, #d19f9f 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d19f9f', endColorstr='#e5e5e5',GradientType=0 ); 
background: linear-gradient(top, #d19f9f 0%,#e5e5e5 100%); 
-moz-transform:scale(1.25);
-webkit-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);}*/

.firstLast
{clear:both;
text-align:center;
font-size:12px;
cursor:pointer;}

.first, .last
{margin-right:12px;
border:1px solid #e5e5e5;
padding:2px 4px;
color:#999;
-moz-box-shadow:2px 3px 4px #c6c0c0;
-webkit-box-shadow:2px 3px 4px #c6c0c0;
box-shadow:2px 3px 4px #c6c0c0;
font-size:10px;
font-weight:bold;}

.first:hover, .last:hover
{-moz-box-shadow:2px 3px 4px #c6c0c0;
-webkit-box-shadow:2px 3px 4px #c6c0c0;
box-shadow:2px 3px 4px 2px #c6c0c0;}


.footer 
{position:relative;
/*height:100px*/ /*may need to be changed if content exceeds*/
/*margin-top:-100px;*/
width:100%;
height:8.6%; /*HA HA HA HA HA HA HA DECIMALS should work, right*/
/*margin:0 auto;*/
background-color:grey;
clear:both;} 

#mapList thead {
    font-weight:bold;
}

.viewSimilar {
    text-decoration: none;
    font-size: 11px;
    font-style: italic;
    color: #666;
}