/************************************************************************ Site: For Him and For Her Author: MockOrange [www.mockorange.com.au] Listing Order: ============== 1 - Universal 2 - Structure/Layout 3 - Main Navigation (Left) 4 - Page Elements 5 - Footer/Labels 6 - Headings 7 - Forms 8 - Newsletter Scroller /*********************************************************************** 1 - UNIVERSAL STYLES ************************************************************************/ body { margin:0; padding:0; font: 75%/1em "Lucida Grande", arial, verdana, sans-serif; color: #575757; line-height: 120%; background: url("../images/background.jpg") repeat-y; } * { margin: 0; padding: 0; } img { border: 0; display: block; } /*a:link, a:visited { color: #575757; text-decoration: none; } a:hover, a:active { color: #000; }*/ .clear { margin:0; clear:both; } /*********************************************************************** 2 - STRUCTURE/LAYOUT ************************************************************************/ #wrapper{ display:block; padding:0 0 0 160px; width:780px; background:url(../images/bricks_home.gif) no-repeat left top; } #flashbanner { display:block; margin:0; padding:0; } #newsletter { display:block; margin:1em; height:1.5em; text-align:right; } #newsletter p { color:#B60507; font-weight:bold;} #content { display:block; margin:0 auto; width:756px; background:url(../images/content_background.gif) repeat-y; } #content #contenttop { height:17px; background:url(../images/content_top.gif) no-repeat right; } #content #contentbottom { height:17px; background:url(../images/content_bottom.gif) no-repeat right; } #shadowinfo { display:block; float:right; } /*********************************************************************** 3 - MAIN NAVIGATION (LEFT) ************************************************************************/ #shadownav { display:block; margin-left:.5em; float:left; background:url(../images/shadnav_top.gif); width:191px; } #shadownav p { margin:1em; } #navimage { margin:1em 0 0 1em; height:12px; background:url(../images/navigation_heading.gif) no-repeat; } .navimagebottom { height:24px; background:url(../images/shadnav_bottom.gif) no-repeat; } #shadownav ul { margin:1em 0 0 0; padding:0 0 0 1.75em; } #shadownav li { margin:0; padding:0; width:148px; height:2em; list-style-type:none; } #shadownav a { display: block; margin:0; padding:4.25px 0 4.25px 1.5em; color: #B60507; font-weight:bold; text-decoration: none; background:url(../images/shadnav_off.gif) no-repeat; font-size:.9em; } #shadownav a:hover { display: block; margin:0; padding:4.25px 0 4.25px 1.5em; color: #fff; font-weight:bold; text-decoration: none; background:url(../images/shadnav_on.gif) no-repeat; font-size:.9em; } #shadownav .active { margin:0; padding:0; color: #fff; text-decoration: none; background-image:url(../images/nav_hover.gif); background-repeat:no-repeat; display: block; text-indent:2em; font-weight:bold; } #shadowinfo ul { margin: 0 0 .5em 3em;} #shadowinfo li { list-style-type: none;} /*********************************************************************** 4 - PAGE ELEMENTS ************************************************************************/ #shadowinfo { display:block; margin-right:.25em; float:right; background:url(../images/info_back.gif); width:549px; } #shadowinfo p { margin: 0 1em 1em 1.75em; } #shadowinfo img {} #infotop { background:url(../images/info_top.gif) no-repeat; height:25px;} #infobottom {background:url(../images/info_bottom.gif) no-repeat; height:25px;} #shadowinfo #watermark { background:url(../images/graffiti_home.gif) no-repeat right bottom;} .gender { margin:0 0 0 1.5em; padding:0; width:245px; float:left; } .gender img {border:3px solid #E4E5E8; margin:1em 0 0 0;} .products { margin:1.5em 0 0 1.5em; padding:0; width:245px; float:left; } .products img {float:left; margin:0 .5em 0 0; } /*********************************************************************** 5 - FOOTER/LABELS ************************************************************************/ #labels { display:block; height:61px; background:url(../images/labels.jpg) no-repeat; vertical-align:bottom; } /*********************************************************************** 6 - HEADINGS ************************************************************************/ .h2him {font-size: 1.5em; color: #B60507;} .h2her {font-size: 1.5em; color: #F423A8;} .h2red {font-size: 1.5em; color: #B60507; margin-bottom:1em; margin-left:1em; } .h2pink {font-size: 1.5em; color: #F423A8; margin-bottom:1em; margin-left:1em;} .h3products { font-size:1em; font-weight:bold; margin:0; padding: 1em 0 0 0;} .h3labels { color:#B60507; font-size:1em; font-weight:bold; margin:1em 0 0 0; padding:0;} .h3labelsgirls { color:#F423A8; font-size:1em; font-weight:bold; margin:1em 0 0 0; padding:0;} #shadowinfo .titlehim { margin:0; margin-bottom:1em; font-size: .9em; color: #B60507;} #shadowinfo .titleher { margin:0; margin-bottom:1em; font-size: .9em; color: #F423A8; } /*********************************************************************** 7 - FORMS ************************************************************************/ #newsletter .inputbox { height:1.75em; width:13em; background:url(../images/inputbox.gif) repeat-x; border:1px solid #ccc; font: .9em "Lucida Grande", arial, verdana, sans-serif; } #newsletter fieldset { margin:0; padding:0; border:0; color:#FFF; font-weight:bold;} .send { background-image:url(../images/send.gif); width:42px; height:7px; color:#FFF; font-weight:bold; border:0; padding:1px; font-size:.75em; } #shadowinfo fieldset { margin:1em; padding:2em; border:1px solid #ccc; background-color:#F3F3F3;} #shadowinfo legend { color:#0097D6; font-weight:bold; font-size:1em; padding:.5em; } #shadowinfo label { margin:0 1em 0 0; font-weight:bold; vertical-align:top;} #shadowinfo input { vertical-align:middle; } #shadowinfo textarea { vertical-align:top;} #shadowinfo .button { background-color:#CC3300; color:#fff; font-weight:bold; border:0;} /*********************************************************************** 8 - Newsletter Scroller ************************************************************************/ #newsletter_left { float:left; width:35%;} #newsletter_right { float:right; width:65%; font-weight:bold; color:#B60507;}