/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - www.sonat.fr - orange.css by nathanael sold - fev2010 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* base - - - - - - - - - - - - - - - - - - - */ * { margin:0; padding:0; border:0; } html { background:#111 url(../_gfx/orange_bg_html.jpg) top repeat-x; font-family:arial; font-size:13px; } .fix { clear:both; height:0; } .right-fix { clear:right; height:0; } .left-fix { clear:left; height:0; } .color-theme { color:#f93; } hr { display:none; height:0; } /* page - - - - - - - - - - - - - - - - - - - */ #page { z-index:1; position:relative; top:0; width:990px; margin:0 auto; } /* top */ #top { top:0; height:260px; background:url(../_gfx/orange_bg_top.png) top right no-repeat; } #top #lang { margin-top:-15px; width:990px; text-align:right; } #top #lang a { color:#333; text-decoration:none; } #top #lang .selected { color:#777; } #top #lang a:hover { text-decoration:underline; } #top #logo { margin:55px 0 0 55px; } #top #slogan { color:#f93; font-style:italic; font-size:15px; margin-top:-230px; width:990px; text-align:left; } #top #slogan .white { color:#fff; } /* content */ #content { padding:70px 0 60px 0; float:right; } #content .size0left { width:990px; float:left; } #content .size1right { width:660px; float:right; } #content .size2left { width:330px; float:left; } #content .size1left { width:660px; float:left; } #content .size2right { width:330px; float:right; } #content .size3left { width:495px; float:left; } #content .size3right { width:495px; float:right; } #content .important { color:#ccc; font-style:italic; } #content h4 { color:#f93; display:block; font-size:17px; height:19px; margin:35px 0 25px 0; background:url(../_gfx/orange_bg_title.jpg) top right no-repeat; padding-right:20px; } #content .size1right h4, #content .size2right h4, #content .size3right h4 { text-align:right; float:right; } #content .size0left h4, #content .size1left h4, #content .size2left h4, #content .size3left h4 { text-align:left; float:left; } #content p { color:#999; text-align:justify; } #content .size1right p, #content .size2right p { margin:0 0 10px 75px; } #content .size1left p, #content .size2left p { margin:0 0 10px 0; } #content p .date { float:left; display:block; width:90px; color:#fff; font-size:12px; margin-top:1px; } #content p .thing { float:left; display:block; width:240px; color:#999; margin-bottom:10px; } #content p .description { display:block; color:#999; margin-left:15px; font-size:11px; } #content p .lc-title { display:block; color:#f93; } #content p .lc-details { display:block; color:#777; margin-left:25px; } #content a { color:#f93; text-decoration:none; } #content a:hover { text-decoration:underline; } #content a:visited { color:#fc6; } #content #links { position:absolute; top:175px; left:0; height:30px; width:150px; text-align:center; } #content #links ul { list-style:none; } /* menu */ #menu { position:absolute; float:left; width:990px; overflow:hidden; border-bottom:1px solid #222; } #menu ul { list-style:none; } #menu ul li a { position:relative; display:block; height:50px; text-align:center; margin-bottom:3px; padding-right:20px; float:left; color:#f93; text-decoration:none; } #menu ul li a:hover { text-decoration:underline; } /* bottom */ #bottom { float:right; width:990px; height:65px; padding:2px 0 0 0; font-size:10px; color:#555; border-top:1px solid #222; background:url(../_gfx/orange_bg_bottom.png) top center no-repeat; } #bottom a { color:#f93; text-decoration:none; } #bottom a:hover { text-decoration:underline; } #bottom a:visited { color:#fc6; } #bottom .validation { float:left; text-align:right; width:485px; padding-right:10px; } #bottom .creation { float:right; text-align:left; width:485px; padding-left:10px; } /* theme */ #theme { position:absolute; top:174px; left:415px; height:45px; width:125px; } #theme ul { list-style:none; } #theme ul li { display:inline; } #theme ul li a { float:left; display:block; width:25px; height:45px; margin:0; overflow:hidden; text-indent:-300px; } #theme ul li #orange_btn { background:url(../_gfx/orange_btnS.jpg) top left no-repeat; } #theme ul li #blue_btn { background:url(../_gfx/blue_btnN.jpg) top left no-repeat; } #theme ul li #blue_btn:hover { background:url(../_gfx/blue_btnH.jpg) top left no-repeat; } #theme ul li #green_btn { background:url(../_gfx/green_btnN.jpg) top left no-repeat; } #theme ul li #green_btn:hover { background:url(../_gfx/green_btnH.jpg) top left no-repeat; } /* rings */ #rings { z-index:0; position:absolute; top:60px; right:0; } /* accueil - - - - - - - - - - - - - - - - - - - */ #accueil .size2left p { text-align:left; } /* identité - - - - - - - - - - - - - - - - - - - */ #identite .size2left p { text-align:left; } /* formation - - - - - - - - - - - - - - - - - - - */ #formation .size0left .thing { width:700px; } #formation .size3right .lc-title { text-align:right; } #formation .size3left .lc-details { float:left; text-align:left; } #formation .size3right .lc-details { text-align:right; margin:0 25px 0 0; } #formation .size3left img { float:right; margin-right:50px; color:#ccc; } /* expérience - - - - - - - - - - - - - - - - - - - */ #experience .size0left .thing { width:700px; } /* portfolio - - - - - - - - - - - - - - - - - - - */ #portfolio ul { list-style:none; } #portfolio ul li { display:inline; } #portfolio .size2left ul li a { display:block; margin:0 3px 6px 3px; width:50px; height:50px; float:left; } #portfolio a .cover { position:absolute; float:none; width:50px; height:50px; background:url(../_gfx/cover.png) top left no-repeat; margin:0; padding:0; visibility:visible; } #portfolio a:hover .cover { visibility:hidden; } /* contact - - - - - - - - - - - - - - */ .formulaire { margin-left:95px; width:800px; } .formulaire .left-col span { display:block; float:left; color:#ccc; margin-top:1px; width:80px; text-align:right; margin-right:20px; font-style:italic; font-size:14px; } .formulaire .right-col span { display:block; float:right; color:#ccc; margin-top:1px; width:80px; text-align:left; margin-left:20px; font-style:italic; font-size:14px; } .formulaire .left-col { width:320px; float:left; } .formulaire .right-col { width:480px; float:right; } .formulaire .left-col input { display:block; float:left; margin:0 0 10px 0; padding:2px 4px; width:200px; font-size:12px; color:#999; font-family:Arial; border:1px solid #333; background:#111; } .formulaire .right-col input { display:block; float:right; margin:0 0 10px 0; padding:2px 4px; width:200px; font-size:12px; color:#999; font-family:Arial; border:1px solid #333; background:#111; } .formulaire textarea { display:block; float:right; margin-bottom:10px; padding:3px 4px; width:370px; height:144px; font-size:12px; color:#999; font-family:Arial; border:1px solid #333; background:#111; } .formulaire input:hover, .formulaire textarea:hover { border:1px solid #fc6; } .formulaire input:focus, .formulaire textarea:focus { border:1px solid #f93; } .formulaire .btn_envoi { cursor:pointer; color:#f93; background:none; width:100px; height:40px; font-size:13px; overflow:hidden; border:none; margin:11px 0 0 209px; } .formulaire .btn_envoi:hover { background:none; border:none; color:#fc6; }