/* * laliste.tv * by mathieu.gagnon.name for lesaffranchis.ca on 2009-07. * * Class names starting with 's_' denotes a section: * s_accueil, s_invite, s_reportage, s_voyage, s_collaborateur, * s_cyberlist. The section class name is added to the * * Sections: * 1. Top-Level * 2. Sections colors * 3. Structure * 4. Hacks * 4.1 ArtTV navbar tweaks * * Expected document structure: * #doc * #postit * #header * #nav * h1.title * #content * #sidebar * .box[1-3] * .title * .last * #main * #subcontent * #other * #footer * .popup */ /* 1. Top-Level */ body { margin:0; padding:0; /* this bg should never reach it is there only as a guard */ background:#fff url(images/background-y.jpg) repeat-y top center; } .access { display:none; } .submit { text-align:center; } .odd .title { text-align:right; } .even .title { text-align:left; } .odd img { float:left; margin:0 1em 1em 0; } .even img { float:right; margin:0 0 1em 1em; } /* 2. Sections colors */ .s_accueil .title, .s_accueil .bull, a.s_accueil { color:#00AEC8; } .s_invite .title, .s_invite .bull, a.s_invite { color:#EC6610; } .s_reportage .title, .s_invite .bull, a.s_reportage { color:#AC1313; } .s_voyage .title, .s_voyage .bull, a.s_voyage { color:#EAA400; } .s_collaborateur .title, .s_collaborateur .bull, a.s_collaborateur { color:#0FA565; } .s_cyberlist .title, .s_cyberlist .bull, a.s_cyberlist { color:#8C129A; } body.s_accueil #main .hr { width:400px;height:50px; margin-left:-55px; background:transparent url(images/s_accueil/bullets-b.png) no-repeat top right; } body.s_accueil #content { background:transparent url(images/s_accueil/bullets-r.gif) repeat-y 350px 26px; } body.s_accueil #main { background:transparent url(images/s_accueil/bullets-t.jpg) no-repeat top right; } body.s_invite #main .hr { width:400px; height:75px; margin:15px 0 0 -50px; background:transparent url(images/s_invite/bullets-b.png) no-repeat top right; } body.s_invite #content { background:transparent url(images/s_invite/bullets-r.gif) repeat-y 350px 26px; } body.s_invite #main { background:transparent url(images/s_invite/bullets-t.jpg) no-repeat top right; } body.s_invite #sidebar .box1 .last { background:transparent url(images/box1-b2.jpg) no-repeat left bottom; } body.s_reportage #main .hr { width:400px; height:66px; margin:10px 0 5px -50px; background:transparent url(images/s_reportage/bullets-b.png) no-repeat top right; } body.s_reportage #content { background:transparent url(images/s_reportage/bullets-r.gif) repeat-y 350px 26px; } body.s_reportage #main { background:transparent url(images/s_reportage/bullets-t.jpg) no-repeat top right; } body.s_voyage #main .hr { width:400px; height:50px; margin:10px 0 5px -50px; background:transparent url(images/s_voyage/bullets-b.png) no-repeat top right; } body.s_voyage #content { background:transparent url(images/s_voyage/bullets-r.gif) repeat-y 350px 26px; } body.s_voyage #main { background:transparent url(images/s_voyage/bullets-t.jpg) no-repeat top right; } body.s_cyberlist #content { background:transparent url(images/s_cyberlist/bullets-r.gif) repeat-y 330px 26px; } body.s_cyberlist #main { background:transparent url(images/s_cyberlist/bullets-t.jpg) no-repeat 10px 0; } body.s_cyberlist #main { clear:both;width:600px; } body.s_cyberlist #main .box1 { float:right; } body.s_cyberlist #main .box2 { margin-left:10px; } body.s_collaborateur #content { background:transparent url(images/s_collaborateur/bullets-r.gif) repeat-y 350px 26px; } body.s_collaborateur #main { background:transparent url(images/s_collaborateur/bullets-t.jpg) no-repeat top right; } body.s_movies #main .hr { width:400px; height:50px; margin:0 0 5px -50px; background:transparent url(images/s_collaborateur/bullets-b-movies.png) no-repeat top right; } body.s_musics #main .hr { width:400px; height:75px; margin:0 0 5px -50px; background:transparent url(images/s_collaborateur/bullets-b-musics.png) no-repeat top right; } body.s_books #main .hr { width:400px; height:80px; margin:0 0 5px -50px; background:transparent url(images/s_collaborateur/bullets-b-books.png) no-repeat top right; } /* 3. Structure */ #doc { font-family:arial,sans-serif; font-size:0.85em; color:#646464; position:relative; width:1000px; margin:0 auto; padding:0; padding-bottom:2em; border-top:1px solid #E6E3DE; background:transparent url(images/background.jpg) no-repeat top left; } #doc small { font-size:0.9em; } #doc a { outline:none; color:#525050; text-decoration:none; } #doc a:hover { text-decoration:none; } #doc a img { border:0; vertical-align:middle; } #doc p { margin:1em 0 0 0; } #main p { margin-bottom:0.5em; } h1 { margin:0; margin-bottom:2px; font-size:1em; border-bottom:0; clear:both; padding-left:15px; height:30px; line-height:28px; background:transparent url(images/menu.jpg) no-repeat 0 -30px; } h2, h3, h4, h5, h6 { /* for an unknow reasons, all heading look the same */ font-size:1em; margin:0; padding:0 0 0.2em 0; border-bottom:1px dashed gray; } #doc ul { padding:0; margin:0; list-style-position:inside; } #doc ul li { margin:0.5em 0; } #postit { position:absolute; top:70px; right:109px; } #header { margin-top:178px; margin-left:340px; width:650px; } #nav { margin:0; height:30px; background:transparent url(images/menu.jpg) no-repeat top left; } #nav a { display:block; width:114px; height:30px; float:left; text-indent:-1000px; overflow:hidden; } #sidebar, #main { padding-top:25px; } #sidebar { width:222px; float:right; } #main { width:380px; } #content { clear:both; width:610px; margin-left:300px; } #contentlegal { clear:both; width:570px; margin-left:340px; } #subcontent { clear:both; width:590px; margin-left:320px; } #other { clear:both; width:570px; margin-left:350px; } #other .title { padding-left:1em; margin-left:-5px; border-bottom:0; width:300px;height:30px;line-height:24px; background:transparent url(images/menu2.jpg) no-repeat top left; } .imglist img { margin:0 7px 7px 0; } .list { color:#282523; } .list .title { text-align:center; } .list h4 { border-bottom:0; border-top:1px dashed gray; padding-top:0.4em; text-align:center; } .list .initial { color:#757474; } .list .scroll { max-height:150px; overflow:auto; } .list .longscroll { max-height:315px; overflow:auto; } * html .list .scroll { height: expression( this.scrollHeight > 149 ? "150px" : "auto" ); /* sets max-height for IE */ } * html .list .longscroll { height: expression( this.scrollHeight > 314 ? "315px" : "auto" ); /* sets max-height for IE */ } #footer { margin-left:300px; width:610px; border-top:1px dashed gray; padding:0.5em 0; clear:both; text-align:center; margin-top:1em; font-size:0.8em; } #footer a { margin-right:5em; text-decoration:none; } #footer a:hover { text-decoration:underline; } #footer img { vertical-align:middle; margin-right:10px; } /* Boxes * * note: * numbering does not really hold anymore, * it would probably be a good idea to * switch to names at this point. * * box1: right column, small * box2: left column, under video * box3: video player * box4: collaborateur style left * box5: cyberlist right column (used to be flash) * box6: collaborateur style right * box7: box2 more gray (not accueil) */ .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 { margin-bottom:5px; } .box1 .title, .box2 .title, .box3 .title, .box4 .title, .box5 .title, .box6 .title, .box7 .title { padding:0.8em 1em 0em 1em; } .last { padding:0 1em 0.5em 1em; } .wrap { padding:0.5em 1em 0.5em 1em; } .box1 { width:223px; margin-left:2px; background:transparent url(images/box1-m.jpg) repeat-y left top; } .box1 .title { background:transparent url(images/box1-t.jpg) no-repeat left top; } .box1 .last { background:transparent url(images/box1-b.jpg) no-repeat left bottom; } .box1 img, .box2 img, .box3 img, .box7 img { margin-bottom:0.5em; } .box2 { width:306px; background:transparent url(images/box2-m.jpg) repeat-y left top; } .box2 .title { background:transparent url(images/box2-t.jpg) no-repeat left top; } .box2 .last { background:transparent url(images/box2-b.jpg) no-repeat left bottom; } .box3 { width:350px; background:transparent url(images/box3-m.jpg) repeat-y left top; } .box3 .title { background:transparent url(images/box3-t.jpg) no-repeat left top; } .box3 .last { background:transparent url(images/box3-b.jpg) no-repeat left bottom; } .box4 { width:289px; background:transparent url(images/box4-m.jpg) repeat-y left top; } .box4 .title { background:transparent url(images/box4-t.jpg) no-repeat left top; } .box4 .last { background:transparent url(images/box4-b.jpg) no-repeat left bottom; } .box5 { width:223px; background:transparent url(images/box5-m.jpg) repeat-y left top; } .box5 .title { height:30px;text-align:center;background:transparent url(images/box5-t.jpg) no-repeat left top; } .box5 .title h2 { border:0; } .box5 .last { text-align:center;padding-bottom:15px;background:transparent url(images/box5-b.jpg) no-repeat left bottom; } .box5 .wrap { padding:0 1em 1em 1.5em; } .box5 .list-title { text-align:center;margin:0; } .box6 { width:289px; background:transparent url(images/box6-m.jpg) repeat-y left top; } .box6 .title { background:transparent url(images/box6-t.jpg) no-repeat left top; } .box6 .last { background:transparent url(images/box6-b.jpg) no-repeat left bottom; } .box7 { width:306px; background:transparent url(images/box7-m.jpg) repeat-y left top; } .box7 .title { background:transparent url(images/box7-t.jpg) no-repeat left top; } .box7 .last { background:transparent url(images/box7-b.jpg) no-repeat left bottom; } .box8 { width:350px; overflow:hidden !important; } .box8 .title { height:10px; background:transparent url(images/box8-t.gif) no-repeat left top; } .box8 .middle { padding:0 1em 0 1.5em; background:transparent url(images/box8-m.gif) repeat-y left top; } .box8 .last { height:10px; padding:0; background:transparent url(images/box8-b.gif) no-repeat left bottom; } #main .box2, #main .box7 { margin-left:45px; } /* 4. Hacks */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* Greybox */ #overlay { display:none; background-image:url(images/overlay.png); position:absolute; margin:auto; top:0; left:0; z-index:100; width:100%; height:100%; } * html #overlay { background-color:#000; background-color:transparent; background-image:url(images/blank.gif); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/overlay.png", sizingMethod="scale"); } .popup { top:10px; left:10px; position:absolute; z-index:150; font-size:0.95em; display:none; } .popup .title { color:gray; } .popup .checkboxes { font-size:0.8em; } .popup .text { width:98%; } .popup .textarea { width:99%; } .contact_form .text { width:98%; } .contact_form .textarea { width:99%; } .popup small { display:block; font-size:0.7em; text-align:right; } .popup_close { margin-right:0px; margin-top:0px; float:right; cursor:pointer; } #postli { overflow:hidden; } /* 4.1 ArtTV navbar small tweaks */ div.navbar-container { position:absolute; width:100%; z-index:100; top:28px; left:0; } div.navbar-container div.nav { width:960px !important; } #TB_title { display:none; } #TB_window { background:transparent;border:0; } :focus { outline: none; } .videoplayer { display:block; width:345px; height:220px; } a.s_invite:hover { color:#EC6610 !important; } a.s_reportage:hover { color:#AC1313 !important; } a.s_voyage:hover { color:#EAA400 !important; } a.s_collaborateur:hover { color:#0FA565 !important; } .contact_form { padding-left: 110px; } a.cyberliste { font-weight: bold; } a.cyberliste:hover { color:#8C129A !important; } .hide_liste1, .hide_liste2, .hideme { visibility: hidden; overflow:hidden; height:0px; } .error_msg { color:#990000 !important; }