/******************************************** Template based on the Techmania template by Erwin Aligam (http://www.styleshout.com/ /******************************************** HTML ELEMENTS ********************************************/ /* Top elements */ * { margin:0; padding: 0; } body { background-color: #585858; color: #555; font: 70%/1.5 Verdana, 'Trebuchet MS', arial, sans-serif; text-align: center; margin: 15px 0; } /* links */ a { color: #72A545; background: inherit; text-decoration: none; } a:hover { color: #006699; background: inherit; } /* headers */ h1, h2 { font-family: 'Trebuchet MS', Arial, sans-serif; font-weight: normal; } h1 { font-size: 1.5em; } h2 { font-size: 1.3em; text-transform: uppercase; color: #339900; } h3 { font-family: 'Trebuchet MS', Arial, sans-serif; font-weight: bold; font-size: 1.2em; color: #333; letter-spacing: 1px; } h3 a { color: #333; text-decoration: underline; } h1, h2, h3, p { padding: 0; margin: 10px 15px; } ul, ol { margin: 10px 30px; padding: 0 15px; color: #72A545; } ul span, ol span { color: #666666; } /* images */ img { border: 2px solid #CCC; } img.float-right { margin: 5px 0px 10px 10px; } img.float-left { margin: 5px 10px 10px 0px; } code { margin: 5px 0; padding: 10px; text-align: left; display: block; overflow: auto; font: normal 12px 'Trebuchet MS', Arial, sans-serif; white-space: pre; border: 1px solid #EAEAEA; color: #000000; } acronym { cursor: help; border-bottom: 1px solid #777; } blockquote { margin: 15px; padding: 0 0 0 32px; background: #FAFAFA url(quote.gif) no-repeat 5px 10px !important; background-position: 8px 10px; border: 1px solid #EAEAEA; border-left: 5px solid #72A545; font-weight: bold; } /* search */ #sidebar #search { background: #f2f2f2; margin: 0 15px; padding: 5px 0; } #sidebar #search img { vertical-align: bottom; } #sidebar #search .textbox { background: #FFF url(input.png) no-repeat top left; border: 1px solid #EAEAEA; font-size: 11px; padding: 3px; width: 110px; } #sidebar #search input.searchbutton { margin: 0; font: bold 100% Arial, Sans-serif; border: 1px solid #CCC; background: #CCC url(buttonbg.gif) repeat-x left bottom; padding: 1px; height: 25px; color: #333; width: 55px; } /***************************** LAYOUT ******************************/ #wrap { margin: 0 auto ; padding:0; text-align: left; background-color:#FFF; width: 790px; } #content-wrap { clear:both; margin:0; padding:0; width: 790px; } /* header */ #header { position: relative; clear:left; width: 790px; height: 135px; margin: 0; padding: 0; background: #000 url(headerbg.jpg) no-repeat left bottom; } #header h1#logo-text { position: absolute; margin: 0; padding: 0; font: bolder 3.8em 'Trebuchet MS', Arial, Sans-serif; letter-spacing: -1px; color: #FFF; text-transform: none; /* change the values of top and right to adjust the position of the logo*/ top: 40px; left: 23px; } #header h2#slogan { position: absolute; margin: 2px; padding: 2px; font: normal 1.1em 'Trebuchet MS', Arial, Sans-serif; text-transform: none; letter-spacing: 1px; color: #FFF; /* change the values of top and right to adjust the position of the slogan*/ top: 89px; left:31px; } /* menu tabs */ #header #header-tabs { position: absolute; top: 0; left: 0; width: 100%; height: 25px; background: #000; font: bold 1.1em Verdana, Tahoma, 'Trebuchet MS', Sans-serif; } #header-tabs ul { margin:0; padding:2px 0px 0px 7px; list-style:none; } #header-tabs li { display:inline; margin:0; padding:0; } #header-tabs a { float:left; background: url(tableft.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #header-tabs a span { float:left; display:block; background: url(tabright.gif) no-repeat right top; padding:7px 15px 4px 8px; color: #CCC; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #header-tabs a span {float:none;} /* End IE5-Mac hack */ #header-tabs a:hover span { color:#FFF; } #header-tabs a:hover { background-position:0% -42px; } #header-tabs a:hover span { background-position: 100% -42px;} #header-tabs #current a { background-position:0% -42px; } #header-tabs #current a span { background-position:100% -42px; color: #FFF;} /* main content */ #main { float: left; width: 535px; margin: 0; padding: 0; background-color: inherit; } #main h1 { padding: 8px 0 3px 25px; text-transform: none; background: url(square_arrow.gif) no-repeat 0% .7em; border-bottom: 2px solid #f2f2f2; color: #339900; } #featured_product { background: #f2f2f2; border: 1px solid #CCC; } /* sidebar */ #sidebar { float: right; width: 245px; margin: 0 0 10px 0; padding: 0; background-color: inherit; } #sidebar h1 { padding: 8px 0px 3px 25px; background: url(square_arrow.gif) no-repeat 0% .7em; text-transform: none; color: #339900; } #sidebar ul.sidemenu { list-style:none; margin:10px 15px; padding:0; } #sidebar ul.sidemenu li { margin-bottom:1px; border: 1px solid #f2f2f2; } #sidebar ul.sidemenu a { display: block; font-weight: bold; color: #333; text-decoration:none; padding: 2px 5px 2px 10px; background: #f2f2f2; border-left: 5px solid #CCC; min-height: 18px; } * html body #sidebar ul.sidemenu a { height: 18px; } #sidebar ul.sidemenu a:hover { padding:2px 5px 2px 10px; background: #f2f2f2; color: #339900; border-left:5px solid #72A545; } /* footer */ #footer { clear: both; height: 40px; color: #CCC; background: #000; margin: 0; font-size: 92%; } #footer a { text-decoration: none; font-weight: bold; color: #FFF; } #footer #footer-left { width: 68%; float: left; text-align: left; margin: 0; padding: 10px; } #footer #footer-right { width: 25%; float: right; text-align: right; margin: 0; padding: 10px; } /* alignment classes */ .float-left { float: left; } .float-right { float: right; } .align-left { text-align: left; } .align-right { text-align: right; } /* additional classes */ .clear { clear:both; } .hide { display: none; } .gray { color: #CCC; } .comments { color: #333; background: #FFF; text-align: right; border-top: 1px dashed #EFF0F1; border-bottom: 1px dashed #EFF0F1; padding: 5px 0; margin-top: 20px; }