/*  STYLE SHEET FOR [WEB SITE] Created by [AUTHOR NAME] [URL OF AUTHOR] ToC 1. defaults 2. structure 3. links and navigation 4. fonts 5. images Notes */ /* --------- 1. defaults  --------- */ * { margin: 0; padding: 0; } body { background: #052147; font-size: 1.2em; margin: 0 0 0 0; } /*  --------- 2. structure  --------- */ #container { width: 860px; margin: 25px auto; } #topCorners { background: url(images/BG-ContainerTop.png) no-repeat; height: 100px; padding-left: 470px; } #endCorners { background: url(images/BG-ContainerBottom.png) no-repeat; height: 20px; } #masthead { } #logo { } #navContainer { } #content { } #footer { } /* float-clearing rules */ .separator { clear: both; } .separatorInvisible { clear: both; height: 1px; } .clearFix:after { content: ".";  display: block;  height: 0;  clear: both;  visibility: hidden; }		 /* ---------- 3. Top navigation ---------- */ #topNavigation { background-color: #fff; padding-left:542px; } .topNavigation { margin: 0 15px; background: url(images/NavBar.gif); background-repeat: no-repeat; overflow: visible; list-style-type: none; height: 40px; } .topNavigation a:focus { outline: none; } .topNavigation ul { display: inline; width: auto; height: 40px; } .topNavigation li { display: inline; position: relative; list-style-type: none; } .topNavigation a { display: block; position: relative; float: left; width: 72px; height: 40px; text-indent: -20000px; text-decoration: none; } .topNavigation_shop a:link, .topNavigation_shop a:visited, .topNavigation_shop a:active,  li .topNavigation_shop { background: url(images/NavBar.gif) 0px 0px no-repeat; } .topNavigation_shop a:hover { background: url(images/NavBar.gif) 0px -40px no-repeat; } .topNavigation_shop a#current { background: url(images/NavBar.gif) 0px -80px no-repeat; }	 /* sale NavBar styles*/ .topNavigation_sale a:link, .topNavigation_sale a:visited, .topNavigation_sale a:active,  li .topNavigation_sale { background: url(images/NavBar.gif) -72px 0px no-repeat;} .topNavigation_sale a:hover {background: url(images/NavBar.gif) -72px -40px no-repeat;} .topNavigation_sale a#current {background: url(images/NavBar.gif) -72px -40px no-repeat;} /* best buys NavBar styles*/ .topNavigation_bestbuys a:link, .topNavigation_bestbuys a:visited, .topNavigation_bestbuys a:active,  li .topNavigation_bestbuys { background: url(images/NavBar.gif) -144px 0px no-repeat;} .topNavigation_bestbuys a:hover {background: url(images/NavBar.gif) -144px -40px no-repeat;} .topNavigation_bestbuys a#current {background: url(images/NavBar.gif) -144px -80px no-repeat;} /* feature NavBar styles*/ .topNavigation_feature a:link, .topNavigation_feature a:visited, .NtopNavigation_feature a:active,  li .topNavigation_feature { background: url(images/NavBar.gif) -216px 0px no-repeat;} .topNavigation_feature a:hover {background: url(images/NavBar.gif) -216px -40px no-repeat;} .topNavigation_feature a#current {background: url(images/NavBar.gif) -216px -80px no-repeat;} /* ----------  main navigation ---------- */ /* ---------- 3. Shop navigation ---------- */ #shopNavigation li { list-style-image:url(images/shopnavigationbullet.png); list-style-position:inside; } #shopNavigation { display:block; float: left; width: 200px; } #shopNavigation ul {margin: 5px 0 0 0; display: inline; border-bottom:1px #999999; } #shopNavigation li { margin: 5px 0 5px 0; text-align: left; } #shopNavigation li a { color:#666666; text-decoration: none; padding: 2px 10px; border: 2px solid #fff; } #shopNavigation li a:hover { background-color: #FFD911; border: 2px solid #edb226; color: #fff; } #shopNavigation img { margin: 0px 0 0 0; } /* ---------- main navigation ---------- */ #mainNavigation li { list-style-image:url(images/shopnavigationbullet.png); list-style-position:inside; } #mainNavigation { display:block; float: left; width: 200px; } #mainNavigation ul { line-height: normal; padding: 0px 0px 0px 1px; margin: 3px 0px 4px 15px; } #mainNavigation li { margin: 5px 0 5px 0; text-align: left; } #mainNavigation li a { color:#666666; text-decoration: none; padding: 2px 10px; border: 2px solid #fff; } #mainNavigation li a:hover { background-color: #FFD911; border: 2px solid #edb226; color: #fff; } #mainNavigation img { margin: 0px 0 0 0; } /* ---------- Promotion ---------- */		 #promotionTop { height: 150px; background-color: #fff; padding: 0 0 0 15px; } #comapnyStrapLine { height: 30px; background:url(images/strapline-bg.png) 15px 0px no-repeat; font-size: 12px; background-color: #fff; padding: 0 0 0 15px; color:#FFFFFF; padding-left:30px; padding-top:5px; } /* ---------- Content ---------- */ #mainContent { margin: 0px 0 0 0px; padding: 15px 0 0 15px; background-color:#FFFFFF; } #Home-Content { margin: 0 0 0 260px; padding: 0 25px; } #ContentTopShadow { background:url(images/contentTopShadow.png) no-repeat; margin: 0 0 0 220px; height:20px; } #Content { margin: 1px 0 0 220px; padding: 0 0px 0 0px; background:url(images/contentmiddleShadow.png) repeat-y; } #ContentBottomShadow { background:url(images/contentBottomShadow.png) no-repeat; margin: 0 0 0 220px; height:20px; } #Content h1 { margin: 0px 0 5px 0; font-size:2em; } #Content h2 { margin: 5px 0; } #Content h3 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1em; line-height:1.4em; color:#666666; font-weight:normal; } #Home-Content p span {color: #c00; font-weight: bold;} #Content ul {margin: 0 0 0 10px;} #Content li { background: url(images/List-Bullet.gif) no-repeat; padding: 0 0 0 18px; margin: 6px 0; } /* ---------- 4. fonts ---------- */ html { font-family: "Trebuchet MS", "segoe ui", arial, verdana, helvetica, sans-serif; font-size: 62.5%; } body { font-size: 1.2em; margin: 0 0 60px 0; background-image:url(images/bgImage.jpg); background-repeat:no-repeat; } .clearFloats { clear: both; }	 ul {color: #5a584c;} li {list-style-type: none;} p {padding: 0 0 10px 0; color: #5a584c;} h1 {color: #aaa676; font-size: 1.4em; font-weight: normal;} h2 {color: #aaa676; font-size: 1.2em;} h3 {color: #aaa676; font-size: 1.1em; font-weight:bold} h4 {} h5 {} a img {border: none;} a:hover {color: #e58b00;} h3.product	{ font-size: 13px; font-weight: bold; margin: 0px; padding: 0px 0px 6px 0px; color: #828baa; } /* ---------- 5. images ---------- */ a:link { color: #666666; text-decoration: none; } a:visited { color: #666666; text-decoration: none; } a:hover { color: #666666; text-decoration: underline; } a:active { color: #666666; text-decoration: none; } #Footer { line-height:1.5em; text-align:center; clear: both; color: #aaa676; padding: 10px 0px 0 0px; } #Footer p { color: #FFFFFF; padding: 0; } #Footer a { padding: 0 2px; text-decoration: none; color:#FFFFFF; } #Footer a:hover { color: #999999; text-decoration: underline; } #Footer a.active { color: #5a584c; }		 .text_options { color:#aaa676; } .actrequired {color:#aaa676;} .form_button_add_to_cart{background-color:color:#aaa676;} .product_list	{ margin: 20px 0px 20px 0px; }	 #actinic-sitemap { margin-left: 50px; } #actinic-sitemap ul { margin-bottom: 0; padding-bottom: 0; list-style-position:inside; list-style:square; } .actinic-sitemap-header { font-size:16px; color:#666666; padding-left:0px; } #Web-Design { padding-right:20px; width: 860px; margin: 10px auto; text-align: center; font-size:10px; } #Web-Design a { color: #FFFFFF; text-decoration: none; } #Web-Design a:hover { color: #CCCCCC; } #Web-Design a img { vertical-align: middle; padding: 0 10px 0 5px; } ul.products	{ line-height: normal; padding: 0px 0px 0px 1px; margin: 3px 0px 4px 15px; font-size: 11px; color: #cc0000; } a.product_section:visited  { color : #cc0000; text-decoration : none; } a.product_section:link  { color : #cc0000; text-decoration : none; } a.product_section:active  { color : #cc0000; text-decoration : none; } a.product_section:hover  { color : #000000; text-decoration : none; } /* lines -------------------------------------------------------------------------------- */ .dotted_line_blue	{ height: 1px; background-color: #828baa; background-image:url('theme_dotted_line.gif'); clear:both; } a:link { text-decoration: none; } a:visited { color: #000066; text-decoration: none; } a:hover { color: #FFCC00; text-decoration: underline; } a:active { color: #000066; text-decoration: none; } /* ---------- Image Gallery ---------- */ #gallerybuttons  { height : 10px; padding-left : 20px; } #lightbox { position : absolute; left : 0; width : 100%; z-index : 100; text-align : center; line-height : 0; } #lightbox img { width : auto; height : auto; } #lightbox a img { border : none; } #outerImageContainer { position : relative; background-color : #fff; width : 250px; height : 250px; margin : 0 auto; } #imageContainer { padding : 10px; } #loading { position : absolute; top : 40%; left : 0%; height : 25%; width : 100%; text-align : center; line-height : 0; } #hoverNav { position : absolute; top : 0; left : 0; height : 100%; width : 100%; z-index : 10; } #imageContainer > #hoverNav { left : 0; } #hoverNav a { outline : none; } #prevLink, #nextLink { width : 49%; height : 100%; background-image : url('data:image/gif;base64,AAAA'); display : block; } #prevLink { left : 0; float : left; } #nextLink { right : 0; float : right; } #prevLink:hover, #prevLink:visited:hover { background : url('prevlabel.gif') no-repeat left 15%; } #nextLink:hover, #nextLink:visited:hover { background : url('gallery/images/nextlabel.gif') no-repeat right 15%; } #imageDataContainer { font : 10px Verdana, Helvetica, sans-serif; background-color : #fff; margin : 0 auto; line-height : 1.4em; overflow : auto; width : 100%; } #imageData { padding : 0 10px; color : #666; } #imageData #imageDetails { width : 70%; float : left; text-align : left; } #imageData #caption { font-weight : bold; } #imageData #numberDisplay { display : block; clear : left; padding-bottom : 1em; } #imageData #bottomNavClose { width : 66px; float : right; padding-bottom : 0.7em; outline : none; } #overlay { position : absolute; top : 0; left : 0; z-index : 90; width : 100%; height : 500px; background-color : #000; } #mastheadGallery { display : none; background : #ffffff no-repeat; height : 550px; } #largeimageholderGallery { float : left; width : 550px; height : 250px; padding : 10px; } #largeimageholderGallery img { margin : 10px; border : 1px solid #ffffff; } #imagewrapperGallery { width : 550px; } .returntoSite { color : #ffffff; font-size : 1.3em; }