/* FILENAME: styles.css PURPOSE: Nature's Discount Default Theme StyleSheet DESCRIPTION: This stylesheet serves global declarations to all Nature's Discount assets AUTHOR: Gabriel Abed EMAIL: gabby@websites.bb */ /*GLOBAL -------------------------------------------------------- */ html, body {height: 100%;} body {font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; color: #000;} .clear{height:1px;margin-top: -1px;visibility:hidden;clear:both !important;border:0;background-color:transparent} em{font-style:italic;} strong{font-weight:bold;} em strong, strong em{ font-weight:bold; font-style:italic; } #footer {position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0;} a, a:visited {color:#0000ee;} /*CONTAINER -------------------------------------------------------- */ #super-container {} * html .global-container {height: 630px;} .minheight {min-height:450px; height:auto !important;} * html .minheight {height:450px;} /*HEADER -------------------------------------------------------- */ #super-header {background: url(../images/header.png) -0px -0px no-repeat; height: 96px; z-index:1;} #header-country-select {float:right; margin-top:20px; margin-right:20px;} .searchaction {WIDTH: 21px; HEIGHT: 17px} .searchbar table {border:1px solid #cccccc; background-color:#FFF; height:21px; display:block; float:right;} .searchinput {PADDING-LEFT: 3px; FONT-SIZE:9pt; MARGIN-LEFT: 4px; VERTICAL-ALIGN: middle; WIDTH: 168px; COLOR: #636365; MARGIN-RIGHT: 3px; FONT-FAMILY: arial; border:0;} .searchinput {font-family:arial;color:#666;width:170px;float:left;padding:0px;font-size:11px;border:none;border-color:#FFF;border-style:none;outline:none;} .country-select {display:block; float:right; margin-top:20px;} .country-select-input {PADDING-LEFT: 3px; FONT-SIZE:10pt; MARGIN-LEFT: 4px; VERTICAL-ALIGN: middle; COLOR: #636365; MARGIN-RIGHT: 3px; FONT-FAMILY: arial; border:0;} .memberco {width:200px; height:41px; margin: 30px 0 0 315px; float:left;} /*TOP NAVIGATION MENU -------------------------------------------------------- */ #super-menu {background: url(../images/header.png) -0px -112px no-repeat; height: 50px; z-index:1; margin-top:15px;} #menu-top-row {color:#FFF; padding-top:2px; text-transform:uppercase; font-size:12px; width:940px; height:25px; overflow:hidden;} #menu-top-row ul {margin:0 auto; display:block; text-align:center;} #menu-top-row li {display:inline; list-style:none; margin-right:35px;} #menu-top-row li#last {margin-right:0px;} #menu-top-row li#first {margin-left:0px;} #menu-top-row a {color:#FFF; text-decoration:none; font-weight:bold;} #menu-top-row a:hover {color:#FFF; text-decoration:underline; font-weight:bold;} #menu-bottom-row {color:#FFF; padding-top:2px; font-size:11px; width:940px; height:25px; overflow:hidden;} #menu-bottom-row ul {margin:0 auto; display:block; text-align:center;} #menu-bottom-row li {display:inline; list-style:none; margin-right:27px;} #menu-bottom-row li#last {margin-right:0px;} #menu-bottom-row li#first {margin-left:0px;} #menu-bottom-row a {color:#FFF; text-decoration:none;} #menu-bottom-row a:hover {color:#FFF; text-decoration:underline;} /*LEFT GRID -------------------------------------------------------- */ #left-grid-navigation #product-information { margin:0 10px 0 0 !important; line-height: 1.3em; } #left-grid-navigation #product-information {padding:0 0 4px 0;} #left-grid-navigation #product-information a { display:block; background:url(../images/01-bullet-orange.gif) 0 4px no-repeat; text-decoration:none; padding:0 0 3px 10px; color:#020202; } .title {color:#000fa4; display:block; font-size:18px; margin:10px 0px 10px 0px; } #left-grid-navigation .spacer { margin: 3px 12px 3px 0; padding-top:1px; background:url(../images/separator_h_pix.gif) 0 0 repeat-x; } /*JQUERY CYCLE -------------------------------------------------------- */ .cycle { width: 700px; padding:0px; height: 300px; overflow: hidden; position: relative; border:none; margin-top:10px;} .cycle img { border: none; margin: 0; padding: 0; width: 700px; height: 300px;} #divMainRotatorNav { position:absolute; bottom:20px; left:18px; z-index:99; } #divMainRotatorNav a { margin: 0 0 0 4px; padding: 3px 7px; background: #ffffff; text-decoration: none; color: #888888; font-size: 1.2em;} #divMainRotatorNav a:hover { background: #454545; text-decoration: none; color: #ffffff; } #divMainRotatorNav a.activeSlide { background: #010fa4; text-decoration: none; color: #ffffff; outline: none;} #divMainRotatorNav a:focus { outline: none; } /*ADS CONTAINER - ONLY ON INDEX.PHP -------------------------------------------------------- */ .content-container .ads{clear: left; padding: 10px; margin: 0px; width: 678px; border: 1px solid #000fa4; display: inline; float: left;} .content-container .ads .roundtop { background: url(../images/corner-topleft.gif) no-repeat top right; width: 18px; position: relative; height: 20px; margin: -11px 0 0 -11px; border: none; float: left; display: inline} .content-container .ads .roundbottom { background: url(../images/corner-bottomright.gif) no-repeat bottom right; width: 18px; right: -11px; height: 20px; margin: -9px 0 -13px 0; position: relative; border: none; float: right;} .content-container .ads h2 {width: 120px; text-align:center;} .content-container .ads p { margin: 0px 0 0 0; padding: 0} .content-container .ad1, .content-container .ad2, .content-container .ad3, .content-container .ad4 { width: 150px; display: inline; float: left} .content-container .ad1, .content-container .ad2, .content-container .ad3 {border-right: 1px solid #767676} .content-container .ad2, .content-container .ad4, .content-container .ad3 {padding-left: 22px} .content-container .ads a, .content-container .ads a:visited { display: block; font-size: 12px; margin-top: 5px; color:#000fa4;} .content-container .ads a:hover {text-decoration:none;} /*CONTENT CONTAINER -------------------------------------------------------- */ .content-container .content-wrapping{clear: left; padding: 10px; margin: 0px; width: 678px; border: 1px solid #cf7f18; display: inline; float: left;} .content-container .content-wrapping .roundtop { background: url(../images/corner-topleft_orange.png) no-repeat top right; width: 18px; position: relative; height: 20px; margin: -11px 0 0 -11px; border: none; float: left; display: inline} .content-container .content-wrapping .roundbottom { background: url(../images/corner-bottomright_orange.png) no-repeat bottom right; width: 18px; right: -11px; height: 20px; margin: -9px 0 -13px 0; position: relative; border: none; float: right;} .content-container .content-wrapping h2 {width: 120px; text-align:center;} .content-container .content-wrapping p { margin: 0px 0 0 0; padding: 0} .content-container .content-wrapping a, .content-container .content-wrapping a:visited { display: block; font-size: 12px; margin-top: 5px; color:#000fa4;} .content-container .content-wrapping a:hover {text-decoration:none;} /*PRODUCT DETAILS*/ #pagination {margin: 30px 0 10px 0;} #pagination a { margin: 0 0 0 4px; padding: 3px 7px; background: #ffffff; text-decoration: none; color: #888888; font-size: 1.2em;display:inline; border:#CCC 1px solid;} #pagination a:hover { background: #454545; text-decoration: none; color: #ffffff; } #pagination a.activeSlide { background: #010fa4; text-decoration: none; color: #ffffff; outline: none;} #pagination a:focus { outline: none; } /*CONTACT PAGE -------------------------------------------------------- */ #contact {font: 65% "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; min-width: 100%; color: #666; } #contact p,#contact label,#contact legend { font: 1.5em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; } #contact h1 { margin: 10px 0 10px; font-size: 24px; color: #333333; } #contact hr { color: inherit; height: 0; margin: 6px 0 6px 0; padding: 0; border: 1px solid #d9d9d9; border-style: none none solid; } /* Form style */ #contact label { display: inline-block; float: left; height: 26px; line-height: 26px; width: 100px; font-size: 1.5em; } #contact input,#contact textarea,#contact select { margin: 0; padding: 5px; color: #666; background: #f5f5f5; border: 1px solid #ccc; margin: 5px 0; font:1.5em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; -moz-border-radius: 5px; -webkit-border-radius:5px; } #contact input:focus,#contact textarea:focus,#contact select:focus { border: 1px solid #999; background-color: #fff; color:#333; } #contact input.submit { cursor: pointer; border: 1px solid #222; background:#333; color:#fff; -moz-border-radius: 5px; -webkit-border-radius:5px; } #contact input.submit:hover { background:#444; } #contact fieldset { padding:20px; border:1px solid #c3c3c3; -moz-border-radius: 5px; -webkit-border-radius:5px; } #contact legend { padding:7px 10px; font-weight:bold; color:#000; border:1px solid #c3c3c3; -moz-border-radius: 5px; -webkit-border-radius:5px; } #contact span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */ /* Style for the error message */ #contact .error_message { display: block; height: 22px; line-height: 22px; background: #FBE3E4 url('../images/error.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; margin: 10px 0; color:#8a1f11;border: 1px solid #FBC2C4; -moz-border-radius: 5px; -webkit-border-radius:5px; font-size:12px;} #contact #succsess_page h1 { background: url('../images/success.gif') left no-repeat; padding-left:22px; } /*FRANCHISE PAGE -------------------------------------------------------- */ #franchise {font: 65% "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; min-width: 100%; color: #666; } #franchise p,#franchise label,#franchise legend { font: 1.5em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; } #franchise h1 { margin: 10px 0 10px; font-size: 24px; color: #333333; } #franchise hr { color: inherit; height: 0; margin: 6px 0 6px 0; padding: 0; border: 1px solid #d9d9d9; border-style: none none solid; } #franchise label { display: inline-block; float: left; height: 26px; line-height: 26px; width: 155px; font-size: 1.5em; } #franchise input,#franchise textarea,#franchise select { margin: 0; padding: 5px; color: #666; background: #f5f5f5; border: 1px solid #ccc; margin: 5px 0; font:1.5em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; -moz-border-radius: 5px; -webkit-border-radius:5px; } #franchise input:focus,#franchise textarea:focus,#franchise select:focus { border: 1px solid #999; background-color: #fff; color:#333; } #franchise input.submit { cursor: pointer; border: 1px solid #222; background:#333; color:#fff; -moz-border-radius: 5px; -webkit-border-radius:5px; } #franchise input.submit:hover { background:#444; } #franchise fieldset { padding:20px; border:1px solid #c3c3c3; -moz-border-radius: 5px; -webkit-border-radius:5px; } #franchise legend { padding:7px 10px; font-weight:bold; color:#000fa4; border:1px solid #c3c3c3; -moz-border-radius: 5px; -webkit-border-radius:5px; } #franchise span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */ /* Style for the error message */ #franchise .error_message { display: block; height: 22px; line-height: 22px; background: #FBE3E4 url('../images/error.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; margin: 10px 0; color:#8a1f11;border: 1px solid #FBC2C4; -moz-border-radius: 5px; -webkit-border-radius:5px; font-size:12px;} #franchise #succsess_page h1 { background: url('../images/success.gif') left no-repeat; padding-left:22px; } /*BRANCHES PAGE*/ #branch {width: 670px; display: block; min-height: 300px;} #branch li {display: table-cell;float: left;margin-left: 10px;margin-bottom: 10px;list-style-type:none;} #branch .desc {float: left;position: absolute;width: 150px;background-color:#FFFFFF;margin-top: 40px;padding-left: 5px; margin-left:5px;} #branch img {border: 5px solid #000fa4; width:310px;} #branch img:hover {border: 5px solid white;} #branch a {color: white;} #branch a:hover {color: #000fa4;} #branch a .desc {background-color: white;color: #000fa4;} #branch a:hover .desc {background-color: #000fa4;color: white;display: none;} #branch li p {width: 200px;text-align: justify;} #branch H3 {color: #363636;font-size: 14px;text-transform: uppercase;} #branch strong {color: #000fa4;} #branch a {font-weight: bold;color: white;} #branch a:hover {text-decoration:none;} #branch .two_cols li {height: 400px;} /*STAFF PAGE*/ #staff {width: 670px; display: block; min-height: 385px;} #staff li {display: table-cell;float: left;margin-left: 10px;margin-bottom: 10px;list-style-type:none;} #staff .desc {float: left;position: absolute;width: 100px;background-color:#FFFFFF;margin-top: 40px;padding-left: 5px; margin-left:5px;} #staff img {border: 5px solid #000fa4; width:100px;} #staff img:hover {border: 5px solid white;} #staff a {color: white;} #staff a:hover {color: #000fa4;} #staff a .desc {background-color: white;color: #000fa4;} #staff a:hover .desc {background-color: #000fa4;color: white;display: none;} #staff li p {width: 210px;text-align: justify;} #staff H3 {color: #363636;font-size: 14px;text-transform: uppercase;} #staff strong {color: #000fa4;} #staff a {font-weight: bold;color: white;} #staff a:hover {text-decoration:none;} /*BRANDS PAGE -------------------------------------------------------- */ #index-alphalist-lg a:visited { color: #686868; } #index-alphalist-lg a:hover, #index-alphalist-lg a:focus { color: #A1650F; text-decoration: none;} #index-alphalist-lg a:active { color: #a1650f;} #index-alphalist-lg {padding: 0; margin: px; clear: left; font-size: 12px; display: block; width: 680px; height: 70px; font-family: verdana, arial, helvetica, sans-serif; } #index-alphalist-lg a { display: block; color: #686868; outline: none; text-decoration: none; border: 1px solid #ccc; float: left; padding: 4px 4px; margin: 2px 3px 2px 0; background: url(../images/alpha.jpg) bottom repeat-x; text-transform: capitalize; font-weight: bold; width: 13px; text-align: center; } #index-alphalist-lg span.current { border: 1px solid #A1650F; font-weight: bold; color: #a1650f; } #index-alphalist-lg span.nolisting { border: 1px solid #e2e2e2; font-weight: bold; color: #ccc; } #brands .alphalist-title {color:#020202; margin-bottom:0px; font-size:14px; font-weight:bold; text-decoration:none; padding:0 0 0px 5px; } #brands .spacer { margin:0px; padding-top:1px; background:url(../images/separator_h_pix.gif) 0 0 repeat-x; } #brands .item { margin:3px 10px 3px 0 !important; line-height: 1.3em; } #brands .item {display:block; background:url(../images/01-bullet-orange.gif) 0 4px no-repeat; text-decoration:none; padding:0 0 3px 10px; color:#020202;} #brands .top {float:right; text-decoration:none; font-size:11px;} #brands .top:hover {text-decoration:underline;} #brands table {margin-bottom:20px;} /* FORMS -------------------------------------------------------- */ #contact_form {display:inline; width:312px; float:left; border-right: 1px solid #767676; padding-right:30px;} #contact_info {display:inline; width:250px; float:left; padding-left:30px;} form#contact-form fieldset { margin: 0; border: 0; position: relative; } form#contact-form fieldset ol { margin: 0; list-style:none; } form#contact-form fieldset legend { position: absolute; top: -20px; text-indent: -9999px; display: none; } form#contact-form fieldset ol li { margin: 0; background: url(../images/inputbg.gif) no-repeat 0 14px; width: 312px; padding: 0 6px 12px 6px; position: relative;} form#contact-form fieldset ol li.textarea { margin: 0; background: url(../images/textareabg.gif) no-repeat 0 14px; width: 312px; padding: 0 6px 12px 6px;} form#contact-form label { width: 290px; font-size: 1em; padding:0 0 2px 0; float: left; font-family: Arial, Helvetica, sans-serif;} form#contact-form input.input-style, form#contact-form textarea { width: 290px; border: none; font-family: Arial, sans-serif; font-size: 12px; padding: 4px; color: #555; background: 0; } form#contact-form textarea { height: 90px;} div.submit-button-style{display:inline-block; float:right;} div.submit-button-style input[type=submit]{-webkit-border-radius:3px;-moz-border-radius:3px;background-color:#020765;padding:5px 15px 6px 14px;cursor:pointer;border:none;color:#fff;font:11px Arial;} div.submit-button-style input[type=submit]:hover{background-color:#3f3f3f;} div.submit-button-style input[type=submit]:active{background-color:#323232;border-color:#89a2b1;} /*THUMBNAIL MANIPULATION -------------------------------------------------------- */ /* thumnail for index page */ .thumb-wrapper {display:block; width:130px; text-align:center;} .thumb {overflow: hidden; height:120px; width:120px; margin: 0; text-align: center; vertical-align: middle !important; background-color: #ffffff;border: solid 3px #c4c4c4; display: inline-block; background-repeat: no-repeat; background-position:center; } .thumb-link {width:120px; height:120px; margin:0px; float:left;} /* thumnail for products page */ .thumb-products {overflow: hidden; height:150px; width:150px; text-align: center; vertical-align: middle; display:block; border: solid 1px #000000; text-align: center;background-color: #ffffff; background-position:center;} .thumb-link-products {width:150px; height:150px; margin:0px; float:left;} .product_displayed {border: solid 1px #000000;width: 150px;height: 150px;text-align: center;background-color: #ffffff;} /* thumnail for items page */ .thumb-item {overflow: hidden; height:150px; width:150px; text-align: center; vertical-align: middle; display:block; border: solid 1px #000000; text-align: center;background-color: #ffffff; background-position:center;} .thumb-link-item {width:150px; height:150px; margin:0px; float:left;} .thumb-title { margin-bottom:5px;background:#000;bottom:0;right:0;display:block;position:absolute;padding:4px;filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85; } .thumb-title:hover { background:#222; } .thumb-title h2 { margin: 0; line-height: 1.4em; } .thumb-title h2 a { font:11px Arial,helvetica;display:block;color:#aaa;text-decoration: none;text-transform:capitalized; } .thumb-title h2 a:hover { color: #fff;} /*ITEM PAGE*/ .thumb-item {overflow: hidden; height:150px; width:150px; text-align: center; vertical-align: middle; display:block; border: solid 1px #000000; text-align: center;background-color: #ffffff; background-position:center;} .thumb-link-item {width:150px; height:150px; margin:0px; float:left;} .thumb-title { margin-bottom:5px;background:#000;bottom:0;right:0;display:block;position:absolute;padding:4px;filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85; } .thumb-title:hover { background:#222; } .thumb-title h2 { margin: 0; line-height: 1.4em; } .thumb-title h2 a { font:11px Arial,helvetica;display:block;color:#aaa;text-decoration: none;text-transform:capitalized; } .thumb-title h2 a:hover { color: #fff;} /*FOOTER -------------------------------------------------------- */ #footer-top {background: url(../images/corner-bar-top.png) bottom no-repeat; height: 12px; margin-top:20px;} * html #footer-top {margin-top:0px;} #footer-wrap {background-color: #000fa4; overflow:hidden; height:55px; font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; color: #fff;} #footer-main {} #footer-inside {margin-left:15px;} #footer-right {} #footer-right-inside {text-align:right; margin-right:15px;} #footer-right-inside a {color: #fff; text-decoration:none; padding:0 5px;} .footerspan {margin-top:17px; display:block; color:#cdcdcd; font-size:10px;} .footerspan a {color:#FFF;} .footerspan a:hover {text-decoration:underline !important; }