/******** Author: Justin Hubbard Copyright eLIONweb 2011 Website: http://www.elionweb.com envato profile: http://www.codecanyon.com/user/eLION *************/ /****** IMPORTANT! Please review ie.css and compare to this stylesheet before making changes that will effect IE ********/ /****** This imports other stylesheets so you don't have to call them in an html file *****/ @import url('../../reset.css'); ----------------------------------------------------------------------------------------------------*/ #container{ /* Use this to position the entire tab module */ width:370px; } .tab-container { position: relative; /* It's important to keep this position relative and the absolute positions in this file the same */ width: 100%; z-index:0; margin-top:15px; } /* `Common Styles ----------------------------------------------------------------------------------------------------*/ /* Tabs */ .tab-container > div { display: inline; } .tab-container > div > a { position: relative !important; /* Keeps the tabs in line with each other */ text-decoration: none; display: inline-block; padding: 4px 14px; font-size:15px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; margin:2px; background:url(../images/news_17.jpg) no-repeat; padding: 4px 14px; -moz-border-radius: 3px; -webkit-border-radius: 0px; border-radius: 3px; color:#FFF; } .tab-container > div:not(:target) > a { } .tab-container > div:target > a { background:url(../images/news_15.jpg) no-repeat; } .tab-container > div > div { /* This is the container which holds the tab content */ z-index: -2; top: 50px; position:absolute; /* Fixes IE 7 & 8 */ } .tab-container > div:not(:target) > div { position: absolute; /* This keeps the tab module contained */ } .tab-container > div:target > div { background:#FFF; position: absolute; z-index: 3 !important; /* Brings the content to the front depending on the tab that was clicked */ } div.tab-content{ padding-left: 20px; padding-right: 20px; width:340px; height:416px; background:#FFF; } .container{ width:1004px; margin:20px auto 0; } .menu{ width:1004px; height:30px; } .menu ul{ list-style:none; width:580px; height:30px; margin:0 auto; } .menu li{ display:block; float:left; width:162px; height:30px; cursor:pointer; margin:0px 15px; } .menu li.current{ background-position:0 0; } .menu span{ background:#1A5340; display:block; line-height:30px; text-align:center; color:#FFF; } .current span{ color:#FFF; background:#08772A; } .content{ background:#F9F9F9; width:1004px; border-radius:12px; margin-top:15px; } .content ul{ width:1004px; list-style:none; } .content li{ float:left; width:1004px; height:220px; text-align:center; display:block; } .content li a{ float:left; border:#BEBEBE 1px solid; padding:2px; margin:0px 10px; } .content li a:hover{ border:#097C25 1px solid; } .menu2{ width:1004px; height:30px; } .menu2 ul{ list-style:none; width:580px; height:30px; margin:0 auto; } .menu2 li{ display:block; float:left; width:162px; height:30px; cursor:pointer; margin:0px 15px; } .menu2 li.current2{ background-position:0 0; } .menu2 span{ background:#1A5340; display:block; line-height:30px; text-align:center; color:#FFF; } .current2 span{ color:#FFF; background:#08772A; } .content2{ background:#F9F9F9; width:1004px; border-radius:12px; margin-top:15px; } .content2 ul{ width:1004px; list-style:none; } .content2 li{ float:left; width:1004px; height:205px; text-align:center; display:block; } .content2 li a{ color:#FFF; float:left; margin:0px 10px; } .content2 li a img{ border:#BEBEBE 3px solid; background:#FFF; padding:2px; } .content2 li a:hover img{ border:#666 3px solid; } .clear{ clear:both; }