/* -------------------------------------------------------------- * screen.css - monsite.com * @type: Screen * @langue: Commun * @year: 2008 * @author: CyberGénération * @note: background; float; display; z-index; position(TRBL); width; height; margin:(TRBL); padding:(TRBL); border:(TRBL); others; --------------------------------------------------------------- */ /* Default setting. --------------------------------------------------------------- */ body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #fff; background: #000 url(img/bg_body.png) center repeat-y; } #printHeader { display:none } #pageContainer { background: url(img/bg_body.png) center repeat-y; position:relative; width:960px; margin:0 auto; } ul { padding:0; margin:0;} ul.bulleted { margin:0 15px 15px; padding:0; list-style:none;} ul.bulleted li { background: url(img/listBullets/asterisque.png) 0 5px no-repeat; padding-left:10px;} ol li { padding:6px 0; border-top:1px dotted #676666; } a { color:#d1d1d1; text-decoration:none; font-weight:bold; } a:hover { color:#fff; } h3 { font-size:18px; color:#b3b3b3; font-weight:bold; } h3.sIFR { font-size:22px;} h3 span { display:none; } h4 { font-size:16px; color:#b3b3b3; } /* Generic classes and IDs --------------------------------------------------------------- */ /* classes */ .tCenter { text-align:center;} .centered { margin-left:auto; margin-right:auto; } .vMargin { margin:20px 0;} .bordered { background:url(img/border.gif) left bottom repeat-x; margin-bottom:10px;} .small { font-size:10px;} .indent { margin-left:25px;} .gold { color:#f1c442; font-weight:normal;} .glow-up { background:url(img/glow-up.png) 0 0 no-repeat; padding-top:20px !important; } .glow-down { background:url(img/glow-down.png) left bottom no-repeat; padding-bottom:20px !important; } /* rounded corner box for lists and important blocks */ .roundedBox { background:url(img/bg_rounded-btm.png) 0 bottom no-repeat; width:549px; padding:0; margin:15px 0; } .roundedBox .top { background:url(img/bg_rounded-top.png) 0 top no-repeat; width:525px; position:relative; top:-12px; margin:0; padding:12px 12px 0;} .roundedBox ul { margin:0 15px 0; padding-top:12px; list-style:none;} .roundedBox ul li { background: url(img/listBullets/asterisque.png) 0 5px no-repeat; padding-left:10px;} /* rounded corner title holder */ .boxed { background:url(img/bg_h4_arrow.png) 0 0 no-repeat; padding:0 0 0 35px; display:block; clear:both; float:none; height:48px;} .boxed h3, .boxed h4 { background:url(img/bg_h4_box.gif) right 0 no-repeat; display:inline-block; height:28px; padding:6px 0 0 0; float:left; color:#f1c442; font-weight:normal; font-size:16px; margin-bottom:0.5em;} .yellowArrowBullet { background:url(img/yellowArrow-small.png) left 2px no-repeat; padding:2px 0 0 30px;} .btn_essai, .btn_adhesion { display:block; padding:0; width:212px; height:45px; } .btn_essai:hover, .btn_adhesion:hover { background-position:left bottom;} .btn_adhesion.left { margin:0 15px 0 30px;} /* globalClass. --------------------------------------------------------------- */ body div#pageContainer .hide { position:absolute; top:0; left:0; overflow: hidden; width: 1%; height: 0; } body div#pageContainer .none { display:none } body div#pageContainer .right { float:right; } body div#pageContainer .left { float:left; } body div#pageContainer .clear { clear:both; } body div#pageContainer .txtRight { text-align:right; } body div#pageContainer .txtLeft { text-align:left; } body div#pageContainer .txtCenter { text-align:center; } body div#pageContainer .first { margin-left:0; padding-left:0; } body div#pageContainer .last { margin-right:0; padding-right:0; } body div#pageContainer .top { margin-top:0; padding-top:0; } body div#pageContainer .bottom { margin-bottom:0; padding-bottom:0; } body div#pageContainer .bold { font-weight:bold } body div#pageContainer .italic { font-style:italic } body div#pageContainer .normal { font-style:normal } body div#pageContainer .dotBorder { border-bottom:#999 1px dotted } body div#pageContainer .noBorder { border:none } body div#pageContainer .noIcon { background:none; padding:0; margin:0; } body div#pageContainer .noFloat { float:none } body div#pageContainer .noBg { background:none; } body div#pageContainer .noBullet { list-style-type:none; background:none } body div#pageContainer .noBullet li { list-style-type:none; padding:0; margin:0; background:none } body div#pageContainer .word-wrap { word-wrap:break-word; } /* word in IE only for now got a little js script to make it work in Firefox (waiting for CSS3) */ /* Success, notice and error boxes -------------------------------------------------------------- */ .error, .notice, .warning, .success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; } .error { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; } .warning { background: #fefcd3; color: #8a1f11; border-color: #ed9c01; } .notice { background: #FFF6BF; color: #514721; border-color: #FFD324; } .success { background: #E6EFC2; color: #264409; border-color: #C6D880; } .error a { color: #8a1f11; } .notice a { color: #514721; } .success a { color: #264409; } body div#pageContainer .tCenter .warning {width:600px; margin:0 0 30px 50px;} body div#pageContainer .warning { background:#ffd67f url(img/warning.gif) no-repeat; background-position: 6px 6px; padding: 10px 10px 10px 63px; font-weight:bold; height:auto !important; height:40px; min-height:40px; } body div#pageContainer .warning p { margin-bottom: 10px; } body div#pageContainer .warning p span { font-size: 13px; } body div#pageContainer .warning ul{ list-style: none; margin: 0; padding: 0; } body div#pageContainer .warning ul li { display: inline; margin: 0 30px 0 0; } /* customClass for list tag -------------------------------------------------------------- */ .dotBullet li { list-style-type: none; background:url(img/listBullets/dotBullet_bw_4px.gif) no-repeat; background-position: 0 center; padding:0 0 0 15px;} .plusBullet li { list-style-type: none; background:url(img/listBullets/plusBullet_bw1_9px.gif) no-repeat; background-position: 0 center; padding:0 0 0 15px; } .arrowsBullet li { list-style-type: none; background:url(img/listBullets/arrowsBullet_bw_11px.gif) no-repeat; background-position: 0 center; padding:0 0 0 22px; } /* customClass for link icon -------------------------------------------------------------- */ .dotLink { background:url(img/listBullets/dotBullet_bw_4px.gif) no-repeat; background-position: 0 center; padding:0 0 0 15px;} .plusLink { background:url(img/listBullets/plusBullet_bw2_9px.gif) no-repeat; background-position: 0 center; padding:0 0 0 15px; } .arrowLink { background:url(img/listBullets/arrowBullet_blue_9px.gif) no-repeat; background-position: 0 center; padding:0 0 0 10px; } .pdf { background: url(img/doc_icons/pdf.png) right center no-repeat; padding:2px 22px 2px 0; margin:-2px 0; } /* pageHeader --------------------------------------------------------------- */ /* If the menu is below the pageHeader add 'margin-bottom' equal to the menuTop 'height' for clearing space */ #pageHeader { background: url(img/bg_pageHeader.jpg) repeat-x; padding-top:155px;} #pageHeader h1 a { background: url(img/logo_pageHeader.jpg) no-repeat; width:304px; height:113px; position:absolute; top:0; left:0; } #flashHeader_holder { height:233px; width:960px; background:#000; position:relative; } #flashHeader_holder h2 { position:relative; left:20px; top:105px;} /*#pageAccueil #flashHeader_holder { background: url(/images/flashHeader.jpg) top left no-repeat;} enlevé car ca fait un jump cut*/ #section #flashHeader_holder { background: url(img/bg_flashHeader_section.jpg) top left no-repeat; } #update { border:1px solid #777; padding:4px 7px; position:absolute; bottom:15px; left:16px; } /* pageMenu --------------------------------------------------------------- */ /* quickMenu --------------------------------------------------------------- */ #quickMenu { background:url(img/bg_quickMenu-right.gif) right no-repeat; position:absolute; top:5px; right:5px; width:335px; text-align:right; } #quickMenu ul { background:url(img/bg_quickMenu-left.gif) no-repeat; height:18px; padding:4px 0px 1px 8px; margin-right:85px;} #quickMenu li { display: inline; padding:0 6px 0 10px; border-left:1px dotted #d1d1d1; font-size:11px;} #quickMenu a { color:#d1d1d1; text-transform:uppercase; } #quickMenu a:hover { color:#fff; } /* drop-down list for currencies */ #quickMenu #devise { background:url(img/bg_select.gif) 0 0 no-repeat; position:absolute; right:0; width:79px; height:19px; margin:0; padding:0; text-align:left;} #quickMenu #devise .selected { background:url(img/btn_select.gif) right 5px no-repeat; display:block; clear:both; width:61px; height:12px; padding:1px 6px;} #quickMenu #devise ul { position:absolute; top:17px; right:0; margin:0; padding:0;} #quickMenu #devise ul.show { display:block; z-index:10; } #quickMenu #devise ul li { background:#000 none; border:0; display:block; clear:both; margin:0; padding:0;} #quickMenu #devise ul li a { display:block; width:72px; padding:0px 0 2px 6px;} #quickMenu #devise ul li a:hover {background:#555;} /* icons --------------------------------------------------------------- */ #icones { position:absolute; top:59px; right:10px;} #icones .tel { display:block; height:20px; float:left;} #icones p { margin:0; } #icones #acces_client { display:block; height:20px; float:left;} #icones #acces_client:hover { background-position:bottom left;} #icones .tel span, #icones #acces_client span { display:none;} /* mainMenu --------------------------------------------------------------- */ #mainMenu { position:absolute; top:113px; width:960px;} #mainMenu ul { width:100%; display:block; height:42px; } #mainMenu li { float:left; position:relative; width:auto; } #mainMenu a { display:block; height:42px; background-position:0 0; background-repeat:no-repeat;} #mainMenu a span { position:absolute; top:0; left:0; overflow: hidden; width: 1%; height: 0;} #mainMenu a:hover { background-position: 0 -42px;} #mainMenu a.selected:hover, #mainMenu a.selected { background-position: 0 -84px;} #mainMenu #adherez { position:absolute; right:8px; top:8px; height:28px;} #mainMenu #adherez:hover{ background-position:bottom left;} /* pageContent --------------------------------------------------------------- */ /* overflow:hidden pour forcé le wrappin dans FF - overflown:visible pour forcé le wrappin avec IE6 */ #pageContent { background:url(img/bg_pageContent.jpg) top left no-repeat; overflow:hidden !important; overflow:visible; height:auto !important; min-height:400px; height:400px; color:#c9c8ca; } #pageContent a { color:#fff; text-decoration:underline} #pageContent a:hover { color:#f1c442; text-decoration:underline } .column1 { width:664px; float:left; overflow:hidden !important;} .column2 { width:296px; float:left; font-size: 11px; color:#d1d1d1;} #pageContent .column1 { padding:40px 45px 40px 45px; width:574px;} #pageAccueil #pageContent .column1 { padding:10px 13px 10px 10px; width:641px;} .content_holder { padding:10px 10px 0 0; } .content_holder p { padding:0 15px 0 0; } .content_holder p.error { padding:10px;} #section #pageContent .content_holder p { line-height:1.5em;} #section #pageContent .column1 strong { color:#f1c442; font-weight:bold;} #section #pageContent .column1 .error strong { color:#b50000;} /* pageFooter --------------------------------------------------------------- */ #pageFooter { background:#181818; margin:11px; padding:20px 24px 5px;} #pageFooter li, #pageFooter a, #pageFooter p, #signatureCyber { color:#999; font-size:11px; } #pageFooter a { font-weight:normal; text-decoration:none; } #pageFooter a:hover { color:#fff; } #pageFooter #logo_holder { float:left; height: 100px; margin-left: 116px; margin-left:50px; padding-right: 66px; } #pageFooter #logo-footer { background: url(img/logo_cyber.gif) 0 0 no-repeat; display:block; width:159px; height:58px; margin-bottom: 5px; } #pageFooter .addthis_button { display:block; height:27px; text-indent:-9999px; width:159px; } #at15ptc { color: #000; } #pageFooter h3.int { background:url(/images/bullet_interets.png) no-repeat; } #pageFooter h3.leg { background:url(/images/bullet_legal.png) no-repeat; } #pageFooter h3.join { background:url(/images/bullet_joindre.png) no-repeat; } #pageFooter h3 { margin:0 0 6px 10px; padding:0 0 0 23px; font-size:12px; color:#666; font-weight:bold; } /*#pageFooter h3 { height:25px; width:120px; margin-left:10px;}*/ #pageFooter .interets, #pageFooter .legal, #pageFooter .joindre { display:block; float:left; width:180px; height:100px; border-left:1px solid #666;} #pageFooter .joindre { width:200px;} #pageFooter ul { margin-left: 16px;} /*#pageFooter li { background:url(img/listBullets/arrowBullet_footer.gif) 0 3px no-repeat; padding:0 10px 0 18px;}*/ #pageFooter li { background:url(img/listBullets/arrowBullet_footer.gif) 0 6px no-repeat; padding:3px 0 0 17px; margin:3px 0 0 0} #pageFooter p { margin-left: 32px; } #signatureCyber { clear:both; text-align:center; font-size:11px; padding-top:20px;} #signatureCyber p {margin:0;} /* colonne 2 --------------------------------------------------------------- */ #buttons_holder { background:url(img/border.gif) bottom repeat-x; padding:0 0 2px; display:block; clear:both; width:271px; margin:10px auto 15px;} #essaigratuit { display:block; width:271px; height:101px;} #cta_tarifs { display:block; width:271px; height:92px;} #cta_solution { display:block; width:271px; height:92px;} #pageAccueil #buttons_holder { background:none; padding:0; margin:0; display:block; clear:both; width:960px; height:86px;} #pageAccueil #essaigratuit { display:block; width:664px; height:86px; float:left;} #pageAccueil #cta_tarifs { display:block; width:296px; height:86px; float:left;} body div#pageContainer #essaigratuit:hover, body div#pageContainer #cta_tarifs:hover, body div#pageContainer #cta_solution:hover { background-position: left bottom;} #pageColumn2 #temoignage h3 { margin: 6px 0 0 23px; line-height:12px; width:230px;} #pageColumn2 #temoignage span { display:block; text-align:right;} #pageColumn2 .darkbox { background:url(img/bg_darkbox-btm.jpg) bottom no-repeat; width:296px; margin:10px 0; position:relative;} #pageColumn2 .darkbox .content_holder { background:url(img/bg_darkbox-top.jpg) top no-repeat; width:250px; padding:15px 21px 0 25px; } #pageColumn2 .lightbox { background:url(img/bg_lightbox-btm.gif) bottom no-repeat; width:270px; margin:4px auto 10px;} #pageColumn2 .lightbox .content_holder { background:url(img/bg_lightbox-top.gif) top no-repeat; width:248px; padding: 15px 11px; height:auto !important; height:60px; min-height:60px; } #flash_compteur { margin:10px 0 28px 13px;} #graph { width:271px; background:#000; margin-left:13px; } /* Formulaires --------------------------------------------------------------- */ textarea { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:#000;} .form { background:#676666 url(img/bg_form.jpg) bottom repeat-x; padding:25px 0 6px 15px; position:relative;} .form fieldset { display:block; clear:both; padding:0; margin:0; border:0;} .form fieldset.indent { margin:10px 20px;} .form fieldset.buttons { background:url(img/ombrage.png) bottom center no-repeat; border-top:1px solid #626162; padding:4px 0 20px 0; margin-right:25px;} .form .note { font-size:10px;} .form label { display:block; float:left; clear:left; font-weight:normal; width:200px; line-height:30px;} .form .text { display:block; float:left; line-height:30px;} .form textarea { display:block; clear:both; margin:0 0 -10px 200px; position:relative; top:-30px; width:300px; height:30px;} .form .telephone { display:inline; width:150px; margin-right:10px;} .form .extension { display:inline; width:40px;} .form .label { display:block; float:left; padding:10px 0 0;} .form .holder_checkbox, .form .holder_radio, .form .holder_radio div { display:block; clear:both;} .form .holder_radio label { display:inline; width:auto; float:none;} .form .holder_radio input { display:inline; width:auto; } .form .note { display:block; clear:both; margin:0 0 0 200px; } .form .holder_checkbox label { display:inline; width:auto; float:none;} .submit { background:none; background-image: url(img/bg_btn.png); background-repeat:no-repeat; display:block; clear:both; width:166px; height:29px; margin:0 auto; padding:0 0 2px; border:0; color:#fff; font-weight:bold; text-transform:uppercase; } button.submit.small { background-image: url(img/bg_btn-small.png); width:49px;} .submit:hover { background-position:bottom left;} #pageContent a.submit { text-align:center; padding:6px 0 0; height:23px; text-decoration:none;} #pageContent a.submit:hover { color:#fff;} /* spécifique au sondage... */ #sondage.form textarea { display:block; clear:both; margin: 0; margin-top:30px; width:480px; height:60px;} #sondage.form textarea.full { width:500px; } /* Accueil --------------------------------------------------------------- */ /* bloc saviez-vous... */ #pageAccueil #saviez-vous { display:block; height:auto !important; height:150px; min-height:150px;} #pageAccueil #saviez-vous h3 { margin:0 0 10px 270px;} #pageAccueil #saviez-vous p { margin:0 0 0 270px; padding-bottom:25px; width:330px;} /* calculateur */ #pageAccueil #calculez .intro, #pageAccueil #calcul { padding:0; margin:0 0 0 10px; width:605px;} #pageAccueil #calculez fieldset.box { background: url(img/bg_vsep_calculez.png) 176px 0 no-repeat; float:left; width:185px; height:108px; padding:0 25px 0 0; clear:none;} #pageAccueil #calculez fieldset.box.last { background:none; padding:0;} #pageAccueil #calculez.form label { display:block; height:55px; line-height:normal; width:185px; font-weight:normal;} #pageAccueil #calculez input { background: url(img/bg_input_calculez.png) no-repeat; width:171px; height:30px; font-size:22px; color:#ffffff; text-align:center; padding:4px 0 0 0; border:0; } #pageAccueil #calculez .buttons { margin:0 10px 0 2px; width:590px; overflow:hidden;} /* clients */ #pageAccueil #clients { padding:16px 0 0 0; width:641px;} #pageAccueil #clients h3 { margin-left:22px; font-size:20px; } #pageAccueil #clients #jCycle { background:url(img/border.gif) 0 0 repeat-x; padding-top:16px; } #pageAccueil #clients #slideshow { background:url(img/bg_box_clients.gif) 0 0 repeat-x; display:block; list-style:none; margin:0; padding:0; width:641px; height:130px; overflow:hidden;} #pageAccueil #clients #slideshow img { display:block; float:left; width:160px; height:130px;} /* Page Solution --------------------------------------------------------------- */ #section #protection { list-style:none; margin:30px 0 50px; padding:0; width:600px; overflow:hidden;} #section #protection li { background:url(img/glow-up.png) 0 0 no-repeat; padding:10px 0 0; } #section #protection h4 { display:block; height:35px; } #section #protection p { padding-left:27px; font-weight:bold;} #section #protection p.pourcent { background:url(img/redArrow.png) 130px bottom no-repeat; display:block; width:250px; height:65px; color:#ff2828; font-size:12px; margin:0 0 -22px 245px; text-align:center;} /* Page Tarifs & Calcul --------------------------------------------------------------- */ #calculateur h3 { font-size:16px;} #calculateur .form_calcul { background:#676666 url(img/bg_form.jpg) bottom repeat-x; padding:6px 0 6px 15px; position:relative; margin:0 0 30px; } #calculateur .form_calcul input, #calculateur .form_calcul .submit { display:inline-block; vertical-align:middle; } #calculateur .form_calcul label { width:185px; font-weight:bold; display:block; clear:both; } #calculateur .form_calcul input { background: url(img/bg_input_calculez-small.png) no-repeat; width:119px; height:30px; font-size:22px; color:#ffffff; text-align:center; padding:4px 0 0 0; border:0; } #calculateur .form_calcul .submit { font-weight:bold; font-size:12px; margin-left:10px; } #tbl_tarifs { margin:0 0 40px; } #tbl_tarifs table { width:100%; } #tbl_tarifs tbody td { padding:0; line-height:20px; } #tbl_tarifs tbody td a { font-size:12px; } #tbl_tarifs tbody tr { background:url(img/bg_row_tarif-right.gif) right top no-repeat; height:20px; line-height:20px; position:relative; } #tbl_tarifs td.tdLeft { background:url(img/bg_row_tarif-left.gif) left top no-repeat; padding-left:15px; font-size:12px; font-weight:bold; color:#f1c442; } #tbl_tarifs td.tdRight { font-size:16px; font-weight:bold; color:#bdbdbd; } #tbl_tarifs td.tdRight .yellowArrowBullet { display:block; text-align:right; padding-right:40px; } /* Page Clients --------------------------------------------------------------- */ #section #clients { list-style:none; margin:0; padding:0;} #section #clients li { background:url(img/glow-up.png) 0 0 no-repeat; border-top:1px solid #7f7f7f; margin:0; padding:30px 0 10px; zoom:1;} #section #clients li.noBorder { background:none; border:0; } #section #clients li .img { display:block; width:171px; height:80px; position:absolute; overflow:hidden;} #section #clients li .temoignage { margin-left:180px;} #section #clients li .temoignage h4 { color:#f1c442; font-size:14px; margin:0;} #section #clients li .temoignage span { display:block; text-align:right; font-weight:bold;} /* Infrastructure --------------------------------------------------------------- */ #infrastructure .block { display:block; clear:both; margin:0 0 25px 0; height:auto !important; height:100px; min-height:100px;} /*#infrastructure .block img { display:block; position:absolute;}*/ #infrastructure .block p { padding-left:110px; height:88px;} #infrastructure .img1 p { background:url(img/cadenas.png) left top no-repeat;} #infrastructure .img2 p { background:url(img/serveur.png) left top no-repeat;} /* Page FAQ --------------------------------------------------------------- */ #section #faq { list-style:none;} #section #faq li { background:url(img/glow-up.png) 0 0 no-repeat; padding:30px 0 0; } #section #faq li li, #section #faq li.noBorder { background:none; padding:0;} #section #faq .question { color:#f1c442; font-size:14px; margin:0;} #section #faq .reponse { margin:6px 0 10px 30px;} #section #faq .question, #section #faq .reponse { padding: 3px 0 1px 30px;} #section #faq li ul { margin:0 0 10px 15px;} /* Page Nous Joindre --------------------------------------------------------------- */ p.infos { display:block; font-size:14px; padding:20px 10px 20px 64px; margin-left:30px;} .tel, .mail { padding:2px 0px 2px 0; margin:-2px 0; } .tel { background: url(img/doc_icons/tel.png) 0 0 no-repeat; } .mail { background: url(img/doc_icons/compose.png) 0 0 no-repeat; } /* Sitemap --------------------------------------------------------------- */ #sitemap, #sitemap ul { list-style:none; padding:6px 0; margin:0 0 0 15px;} #sitemap li { border-top:1px dotted #676666; padding:6px 0;} /* PAGE ACCES CONSOLES!! --------------------------------------------------------------- */ #accesconsole { background: #000 url(img/console/bg_body.jpg) center repeat-y;} #accesconsole #pageContainer { background: #181818 url(img/console/bg_menu.jpg) 0 0 repeat-x; padding:30px 0 105px 0; margin:30px auto 0;} #accesconsole #pageContent { background: #fff url(img/console/bg_pageContent.jpg) 0 0 repeat-x; padding:0; height:440px; min-height:440px;} #accesconsole h1#logo { background: url(img/console/logo.png) right center no-repeat; display:block; height:89px; width:314px; margin:40px auto 0;} #accesconsole .column1 { background: url(img/console/vsep.png) right center no-repeat; width:295px; margin:20px 0 40px 180px; padding:20px 20px 20px 0;} #accesconsole .column2 { width:273px; margin:20px 170px 40px 0; padding:20px 0 20px 20px;} #btn_console_gestion, #btn_console_config { display:block; width:270px; height:88px; margin-bottom:15px;} #btn_console_gestion:hover, #btn_console_config:hover { background-position:0 bottom;} #accesconsole #pageContent p { font-weight:bold; color: #757575; font-size:12px;} #accesconsole #footer { background: url(img/console/logo-cyber.gif) 0 23px no-repeat; display:block; position:absolute; bottom:0; left:74px; width:100%; height:30px; padding:75px 0 0 0;} #accesconsole #footer p { font-size:11px; color:#6D6D6D;}