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; }