/*--------------------------------------------------------------------------- Stylesheet for Marinelink website Author: Tim Tunbridge Email: info@signzngraphix.co.nz Web: signzngraphix.co.nz Created: 2009-08-31 Colours: #233b73 dark blue #99b3cc sea blue #ffee00 yellow ---------------------------------------------------------------------------*/ img, #map a { behavior: url("css/resources/iepngfix.htc") } * body { behavior: url("css/resources/csshover3.htc"); } * { margin: 0 ; padding: 0 } body { font-size: 76% ; font-family: Verdana, Arial, Helvetica, sans-serif ; margin: 0 ; background-color: #99b3cc; color: #333 } h1 { font-size: 2em } h2 { margin: .5em 0 .5em ; font-size: 1.5em ; text-align: center ; line-height: 1.4em} h3 { font-size: 1.1em ; padding: 2px ; margin-bottom: 5px } h4 { margin: 0 0 .2em; font-size: 1em } p { margin: 0 0 1em } img { border: none } a, a:visited { color:#233b73 ; outline-color:-moz-use-text-color ; outline-style:none ; outline-width:medium } /* Layout ---------------------------------------------------------------------------*/ #outer-wrap { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background: #99b3cc url(../images/bg.png) repeat-x scroll left top; } #page-wrap { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; margin:0 auto; overflow:hidden; position:relative; width:990px; } #nav-wrap { left:650px; position:absolute; top:93px; width:350px; } #home-link { height:119px; left:0; position:absolute; text-indent:-9999px; top:0; width:625px; } #header { background: url(../images/logo.png) no-repeat scroll 0 0; height: 135px;} #dl { position: absolute; top: 25px; right: 118px; text-decoration: none; text-align: center ; background: red ; color: white; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px ; padding: 3px 8px; } #dl:hover { background: #99b3cc; } #nav { list-style: none; overflow: hidden; } #nav li { display: inline ; } #nav li a { display: block ; float: left; height 20px ; padding: 1px 12px ; text-decoration: none ; color : white ; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px ; border: 2px solid #233b73 ;} #nav li a:hover { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px ; border: 2px solid #ffee00 ; } #statement { clear: both; margin: 10px auto ;width: 950px; background: #233b73; -moz-border-radius: 5px ; -webkit-border-radius: 5px; border-radius: 5px } #statement h2 { margin: 0 auto; color: white; line height: 1.3em; padding: 5px} #index li.index a, #brochure li.brochure a, #specials li.specials a , #order li.order a { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px ; color: #233b73 ; background-color: #ffee00 ; border: 2px solid #233b73 ;} /* Map ---------------------------------------------------------------------------*/ #map { width: 500px ; height: 600px ; float: left ; padding: 20px } #map-wrap { background-color: white ; position: relative; margin: 0 20px ; border: 1px solid #233b73 ; min-height: 650px; height:auto !important; height: 650px } #map-wrap h2 { text-align:left ; color: #233b73; margin: 0.5em 0 0.25em 0 ; font-size: 1.25em } .location { background: white; -moz-border-radius: 5px ; -webkit-border-radius: 5px; border-radius: 5px ; padding: 10px } .location p { margin : 0} a.email, a.url { color: #233b73; } /* Accordian ---------------------------------------------------------------------------*/ .accordionContent { background: white; margin: 5px; padding:0.3em 0.2em 0.3em 0.6em; display: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .accordion h3 { background:#99b3cc url(../images/accordion-sprite.png) no-repeat top right; display:block; font-size:1em; cursor:pointer; margin: 0; padding: 0; } .accordion h3 a { color: #233b73 ; text-decoration:none;} .accordion h3.active a { color: white ; background:#233b73 url(../images/accordion-sprite.png) no-repeat bottom right; text-decoration:none} .accordion h3 a:hover { color: white ; background:#233b73 url(../images/accordion-sprite.png) no-repeat center right; text-decoration:none} .accordion h3.active a:hover { color: white ; background:#233b73 url(../images/accordion-sprite.png) no-repeat bottom right; text-decoration:none} h3 a { text-decoration: none; color: #222; display: block; outline: none; padding: 5px; } h3 a:hover img { border: 1px solid red; margin: -1px; } h3 a .marker { display: block; position: absolute; width: 21px; height: 34px; } /* Dealers ---------------------------------------------------------------------------*/ .dealer-wrap {float: right ; margin-top: 20px} #dealers { width: 300px ; margin-right : 20px ; -moz-border-radius: 5px ; -webkit-border-radius: 5px; border-radius: 5px} .selected { background: #ff9; -moz-border-radius: 5px ; -webkit-border-radius: 5px; border-radius: 5px } #dealers .selected h3 { color: white ; background: #233b73 } #dealers ol { list-style: none ; background: #233b73 } #dealers li { border-bottom:1px solid white } /* Footer ---------------------------------------------------------------------------*/ #footer { clear: both; margin: 10px; } #footer h2 a { font-size: .6em ; color: #233b73 } #footer h2 a:hover { color: #ffee00 } #links { width: 650px; float: left } #links h2 { display: inline; padding-right: 10px; border-bottom: none ;} #misc { float: right; text-align: right } #misc img { margin-bottom: 5px } #misc p { margin: 0 ; font-size: 0.9em} .powered { padding-top: 5px } .powered a { text-decoration: none; color: black } .powered span { background-color: #9900CC; padding: 0 .2em; color: white; font-size: .9em } /* Misc classes ---------------------------------------------------------------------------*/ .hidden { display: none; } .clear { clear: both; display: block; } .left { float: left} .announcement { background: #1a1a1a; color: #fff; padding: 5px 20px; margin: 0 auto; text-align: center; } .announcement a { color: #fff; font-weight: bold; } .announcement a:hover { color: #fff; background: none; color: #ff9; } /* Admin form ---------------------------------------------------------------------------*/ .newstuff { margin-left:300px ; margin-bottom: 0} .newstuff img { float:left ; margin-top: 1px ; margin-right: 6px} /* Imgbrowz0r classes used on Brochure page ---------------------------------------------------------------------------*/ #brochure #imgBrowz0r-wrap { float: left ; background: #233b73 ; width 250px; margin: 0 50px 0 40px ; padding: 5px ; -moz-border-radius: 5px ; -webkit-border-radius: 5px; border-radius: 5px} .img-description, .imgbrowz0r-navigation, #brochure #imgbrowz0r { float: left; ;text-align: center ; padding 10px ; background: white ; -moz-border-radius: 5px ; -webkit-border-radius: 5px; border-radius: 5px} #brochure #imgbrowz0r .img-row { padding: 0 2em } #brochure #imgbrowz0r .img-directory a:link, #brochure #imgbrowz0r .img-directory a:visited { text-decoration: none } #brochure #imgbrowz0r .img-thumbnail a:link img, #brochure #imgbrowz0r .img-thumbnail a:visited img { padding: 5px ; border: 1px solid white ;} #brochure #imgbrowz0r .img-thumbnail a:hover img, #brochure #imgbrowz0r .img-thumbnail a:active img { padding: 5px ; border: solid 1px #F52542; } #brochure #imgbrowz0r .img-thumbnail a, #brochure #imgbrowz0r .img-directory a { display: block; } #brochure #imgbrowz0r .img-thumbnail { float: left;padding: 0.5em 0;text-align: center } #brochure #imgbrowz0r .img-column-1 { clear: left } #brochure-page { float: left ; border: solid 5px white ; margin-bottom: 10px} .inside { -moz-border-radius: 5px ; -webkit-border-radius: 5px ; border-radius: 5px; color: white ;} /* Imgbrowz0r classes used on Home page ---------------------------------------------------------------------------*/ #index #imgbrowz0r { float: left; ;text-align: center ; padding 10px ; background: #99b3cc ; -moz-border-radius: 5px ; -webkit-border-radius: 5px; border-radius: 5px} #index #imgbrowz0r span { display: none ;} #index #imgbrowz0r .img-thumbnail a:link img, #index #imgbrowz0r .img-thumbnail a:visited img { padding: 5px ; border: solid 1px #99b3cc } #index #imgbrowz0r .img-thumbnail a:hover img, #index #imgbrowz0r .img-thumbnail a:active img { padding: 5px ; border: solid 1px #F52542 } #index #imgbrowz0r .img-row { padding: 0} /* Tables ---------------------------------------------------------------------------*/ table { border-collapse: collapse; } #order-table { width: 100%; } #order-table td { padding: 5px; } #order-table th { padding: 5px; background: #233b73; color: white; text-align: left; } #order-table td.row-total { text-align: right; } #order-table td input { width: 75px; text-align: center; } #order-table tr.row-hilite0 td { background: #f5f5f5; } #order-table tr.row-hilite1 td { background: white; } #order-table td .total-box, .total-box { border: 3px solid green; width: 70px; padding: 3px; margin: 5px 0 5px 0; text-align: center; font-size: 14px; } /* DatePicker ---------------------------------------------------------------------------*/ a.dp-choose-date { float: left; width: 16px; height: 16px; padding: 0; margin: 5px 3px 0; display: block; text-indent: -2000px; overflow: hidden; background: url(../images/calendar-sprite.png) no-repeat; } ainput.dp-applied { width: 140px; float: left; } /* makes the input field shorter once the date picker code has run (to allow space for the calendaricon */ /* Notification for when there is no Brochure or there are no Specials ---------------------------------------------------------------------------*/ #nothing { width:640px; margin:20px auto; background:#fff !important; border:1px solid #233b73; margin-bottom:1em; text-align:center; padding:1em 0 1em 0; -webkit-border-radius:20px; -moz-border-radius:20px;} #nothingMsgLbl { margin:0 0 5px 0; padding:0; font-size:125%; color:#233b73 !important;} #nothingMsg { margin:0 0 2px 0; color:#000 !important; font-size:100%; } #nothingMsg strong { padding:2px 3px; background-color: #FFDFDF !important; color:#233b73 !important;}