/* * LAYOUT.CSS (Design and layout goes here) * * version: 0.1 * media: screen * * * */ html { margin: 0; padding: 0; color: white; background: #434343; } body { margin: 0; padding: 0; } /* * * * * * html 5 fix * * * * * */ section, article, header, footer, nav, aside, hgroup { display: block; } /* * * * * * layout * * * * * */ #background { padding: 25px 0 0; background: #c7c7c7; background: url(../images/fond_motif.png); } #wrapper { width: 960px; margin: 0 auto; border: solid 8px #CCC; border-bottom: none; color: black; background: white; } #wrapper:after { display: block; clear: both; content: " "; } #header { position: relative; width: 100%; height: 170px; } #content { display: inline; float: left; width: 619px; margin: 0 0 15px 30px; } #content_work { display: inline; float: left; width: 900px; margin: 0 0 15px 30px; } #sidebar { display: inline; float: right; width: 248px; margin: 12px 30px 15px 0; } /* * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * HEADER AND FOOTER THINGS * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * logo * * * * * */ #header { height:233px; background: url(../images/repeat_mini.png);} #header .logo { } #header .logo h1 { position: absolute; top: 0px; left: 0px; margin: 0; } #header .logo a:focus { } #header .logo h2 { position: absolute; top: 137px; left: 20px; margin: 0; font-size: 3.2em; color:#24a7b4; font-family: Georgia; font-weight: normal; } /* * * * * * footer * * * * * */ #footer { width: 100%; font-size: 0.916em; color: #d5d5d5; background: url(../images/footer_rep.gif) 0 0 repeat-x; } #footer .width { position: relative; width: 976px; margin: 0 auto; background: url(../images/footer.png) 0 0 no-repeat; } #footer a { color: #d5d5d5; } #footer p { margin: 0; } #footer p small { font-size: 1em; } #footer p.copyright { display: inline; margin: 35px 0 10px 8px; float: left; } #footer p.HTML5 { display: inline; margin: 35px 8px 10px 0; float: right; } /* * * * * linkbuilding links * * * * * */ #linkbuilding { clear: both; } #linkbuilding ul { margin: 0; padding: 1em 1em 2em; color: #aaa; text-align: center; } #linkbuilding ul li { display: inline; margin: 0 3px; padding: 0; background: none; } #linkbuilding ul li a { color: #aaa; text-decoration: none; } #linkbuilding ul li a:hover { text-decoration: underline; } /* * * * * * main menu * * * * * */ #mainMenu { position: absolute; top:130px; right:100;width: 80%; height:100px; background:url(../images/repeat_mini.png); } #mainMenu ul { margin: 0; padding: 0px 0 0 250px; } #mainMenu ul li { display: inline; float: left; padding: 0; font-family: Georgia; font-weight: lighter; background:none; } #mainMenu ul li a { border-left:3px solid white;float: left; text-decoration: none; color: #595959; margin-left:2px;} #mainMenu ul li a span { float: left; padding: 11px 17px 7px; font-size: 2em;} #mainMenu ul li a:focus, #mainMenu ul li.active a { color:#24a7b4; border-left:3px solid #24a7b4; } #mainMenu ul li a:hover span, #mainMenu ul li a:focus span, #mainMenu ul li.active a span {} #mainMenu ul li a:hover {color:#ef9800; border-left:3px solid #ef9800;} /* * * * * * Media Social navigation * * * * * */ ul#quickNav { position: absolute; top: 13px; right: 10px; margin: 0; } ul#quickNav li { display: inline; float: left; padding: 0; background: none; } ul#quickNav li a { float: left; width: 31px; height: 29px; background: url(../images/soc_network.png) no-repeat; } ul#quickNav li.facebook a { background-position: -30px; } ul#quickNav li.delicious a { background-position: -62px; } ul#quickNav li.flickr a { background-position: -122px; } ul#quickNav li.link a { background-position: -93px; } ul#quickNav li a span { position: absolute; top: -1992em; } /* * * * * * * * * * * * * * * * * * * * */ /* * * * * * SIDEBAR THINGS * * * * * */ /* * * * * * * * * * * * * * * * * * * * */ #sidebar h1 { font-size: 1.5em; margin: 20px 0 5px; padding-bottom: 8px; background: url(../images/col_h2.gif) 0 100% no-repeat; } #sidebar p.banner { margin: 17px 0; text-align: center; } /* * * * * * nav menu * * * * * */ .navMenu { } .navMenu ul { margin: 0; } .navMenu ul li { padding: 0; background: none; } .navMenu ul li a { display: block; padding: 5px 15px 5px; text-decoration: none; font-weight: bold; border-bottom: solid 1px white; color: #333; background: #eee; } .navMenu ul li ul li a { padding-left: 40px; font-weight: normal; background-position: 28px 10px; } .navMenu ul li a:hover { background-color: #ddd; } /* * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * MAIN CONTENT THINGS * * * * * */ /* * * * * * * * * * * * * * * * * * * * * * */ /* * * * * * floats * * * * * */ .floatBoxes { width: 100%; margin: 2em 0; } .floatBoxes:after { display: block; clear: both; content: " "; } .floatBoxes article { display: inline; float: left; width: 186px; margin: 0 30px 0 0; background: #eee; } .floatBoxes article.last { margin-right: 0; } .floatBoxes article a { display: block; padding: 100px 10px 10px; color: black; text-decoration: none; } .floatBoxes article a:hover { background: #ddd; } .floatBoxes article a h1 { margin: 0 0 10px; font-size: 1.166em; font-weight: bold; text-align: center; } .floatBoxes article a p { margin: 0; } /* * * * * * news list * * * * * */ .newsList article h1 { margin: 12px 0 3px; font-size: 1.166em; font-weight: bold; } .newsList article p { margin-top: 0; } .floatBoxes h1, .newsList h1 { font-size: 1.5em; } /* * * * * * CONTENT * * * * * */ #content h4{ color:#24a7b4; } #content img{ border: 4px grey solid; } #content img:hover{ border: 4px #24a7b4 solid; } /* * * * * * #work * * * * * */ .div1{ width:290px; margin-right:10px; float:left; } .div2{ width:290px; height:300px; border:2px solid grey; } .leg{ width:290px; height:30px; border:2px solid grey; margin-top:10px; }