/* ------------------------------------------------------------------- Ess - Sibran Lens 1. Structure 2. Header 3. Navigation 4. Column01 5. Column02 6. Column03 7. Footer always include reset.css, it will reset your style for all browers, it includes the clearfix typography specs must be specified in typography.css form specs must be specified in forms.css ID en class naming => use capitals for seperation: navHome ------------------------------------------------------------------- */ /* ----- imports -------------------------------------------------- */ @import url(typography.css); @import url(forms.css); /* ------------------------------------------------------------------------------------- 1. Structure -------------------------------------------- */ body {background:#26211c;} #container {margin:0 auto; padding:50px 0 0 0; width:948px;} #header {height:70px; overflow:hidden; position:relative; width:948px;} #content {overflow:hidden; padding:38px 0 15px 114px; width:834px;} #column01 {clear:both; float:left; padding:2px 25px 0 0; width:600px;} #column02 {float:left; padding:0 0 0 0; width:205px;} .left {float: left;} .right {float: right;} .clear {clear: both;} .hide {display: none;} .first {margin-top: 0; padding-top: 0;} .last { margin-bottom: 0; padding-bottom: 0;} hr {display:none;} /* flash alternative styles */ .block { background: #efefef; margin: 25px 0; padding: 25px; border:4px solid #dfdfdf; clear:both; } ul#alternativeNav {list-style:none; padding:10px 0 10px 5px; margin:0 0 20px 0; border-bottom:2px solid #333; border-top:2px solid #333} ul#alternativeNav li {float:left; margin:0 10px 0 0;} /* ------------------------------------------------------------------------------------- 2. Header ----------------------------------------------- */ /* header H1 & H2 */ #header h1 {background:transparent;} #header h1 a {float:left; height:65px; text-indent:-9999px; width:300px;} #header h2 {background:transparent; float:right; height:35px; text-indent:-9999px; width:225px;} /* header background images for each specific page */ #about #header {background:url(../img/css_backgrounds/bg-about.gif)} #work #header {background:url(../img/css_backgrounds/bg-work.gif)} #news #header {background:url(../img/css_backgrounds/bg-news.gif)} #contact #header {background:url(../img/css_backgrounds/bg-contact.gif)} /* navigation */ ul#navigation {bottom:9px; height:15px; list-item:none; margin:O; padding:O; position:absolute; right:0;} ul#navigation li {list-style:none; margin:0; padding:0 0 0 9px; float:left;} ul#navigation li a {background-image:url(../img/css_backgrounds/bg-navigation.gif); background-repeat:no-repeat; background-position:left top; display:block; height:15px; outline:none; text-indent:-9999px;} #about ul#navigation li a#navItem01 {background-position:left -48px; width:34px;} #about ul#navigation li a#navItem01:hover {background-position:-235px -48px;} #about ul#navigation li a#navItem02 {background-position:-62px -48px; width:35px;} #about ul#navigation li a#navItem02:hover {background-position:-297px -48px;} #about ul#navigation li a#navItem03 {background-position:-124px -48px; width:50px;} #about ul#navigation li a#navItem03:hover {background-position:-359px -48px;} #work ul#navigation li a#navItem01 {background-position:left -72px; width:34px;} #work ul#navigation li a#navItem01:hover {background-position:-235px -72px;} #work ul#navigation li a#navItem02 {background-position:-62px -72px; width:35px;} #work ul#navigation li a#navItem02:hover {background-position:-297px -72px;} #work ul#navigation li a#navItem03 {background-position:-124px -72px; width:50px;} #work ul#navigation li a#navItem03:hover {background-position:-359px -72px;} #news ul#navigation li a#navItem01 {background-position:left -24px; width:34px;} #news ul#navigation li a#navItem01:hover {background-position:-235px -24px;} #news ul#navigation li a#navItem02 {background-position:-62px -24px; width:35px;} #news ul#navigation li a#navItem02:hover {background-position:-297px -24px;} #news ul#navigation li a#navItem03 {background-position:-124px -24px; width:50px;} #news ul#navigation li a#navItem03:hover {background-position:-359px -24px;} #contact ul#navigation li a#navItem01 {background-position:left top; width:34px;} #contact ul#navigation li a#navItem01:hover {background-position:-235px top;} #contact ul#navigation li a#navItem02 {background-position:-62px top; width:35px;} #contact ul#navigation li a#navItem02:hover {background-position:-297px top;} #contact ul#navigation li a#navItem03 {background-position:-124px top; width:35px;} #contact ul#navigation li a#navItem03:hover {background-position:-359px top;} /* ------------------------------------------------------------------------------------- 4. Column01 --------------------------------------------- */ /* news items */ ul#newsItems {list-style:none; margin:0; padding:0;} ul#newsItems li {clear:both; list-style:none; margin:0; padding:0 0 7px 0;} ul#newsItems li p.date {float:left; padding:0 0 0 0; width:75px;} ul#newsItems li p.description {float:left; line-height:1.4em; padding:5px 0 0 0; width:520px;} /* work items */ ul#workItems {list-style:none; margin:0; padding:0; display:none;} ul#workItems li {border-bottom:1px solid #682113; clear:both; list-style:none; margin:0; padding:25px 0 7px 0;} ul#workItems li div.screenshot {float:left; padding:0 0 0 0; width:625px;} ul#workItems li div.description {float:left; line-height:1.4em; padding:5px 0 0 0; width:209px;} #work ul#workItems li div.screenshot p {} #work ul#workItems li div.screenshot a {background:none; color:#F94B35;} #work ul#workItems li div.screenshot a img {display:block; float:left; padding:0 1px 1px 0} /* cd list */ ul.cdItems {list-style:none; margin:0; padding:0 0 25px 0;} ul.cdItems li {border-bottom:1px solid #682113; clear:both; list-style:none; margin:0; padding:4px 0 4px 0;} ul.cdItems li div.description {float:left; width:283px;} ul.cdItems li div.type {float:left; width:343px;} ul.cdItems li div.link01 {float:left; width:111px;} ul.cdItems li div.link02 {float:left; width:90px;} /* fiche */ #back {border-bottom:1px solid #682113; float:left; margin:0 0 15px 0; padding:0 0 8px 0; width:834px} #work #column01 {padding:0; width:625px;} #work #ficheScreens {} #work #ficheScreens a, #work #ficheScreens a:hover {background:none; color:#F94B35;} /* ------------------------------------------------------------------------------------- 5. Column02 --------------------------------------------- */ /* item description */ #column02 #itemName { }