/* Design: CENTERED with TOPNAV */ /* File: screen.css */ /*-----------------------------------------------------------*/ /* Autor: Sam Mueller, www.nuun.ch */ /* Datum: April 2010 */ /* Site: wwww.hairstylist-pierre.ch */ /*************************************************************/ /* Colors: font-color: #fbf2f8 (standard) */ /* lightbrown: #d2a577 (Sitetitle) */ /* footerbrown: #66300e (footer) */ /* lightbrown: #ffa954 (Subtitle, Links) */ /* orange: #dd622f (Subtitle) */ /*************************************************************/ /* GLOBAL LAYOUT */ /*************************************************************/ html, body { height: 100%; margin:0 auto; font: 100.01%/1.0em Arial, Verdana, Helvetica, sans-serif; background: url(../grafics/bg_body.jpg) no-repeat center top #000; color:#fbf2f8; } #wrapper { position:relative; width:960px; min-height: 100%; font-size:12px; height: auto !important; height: 100%; margin: 0 auto -75px;} #header { width:960px; height:156px; position:relative;} #container { width:960px; position:relative; background: url(../grafics/bg_container.jpg) no-repeat 0px 0px #000; min-height:300px;} #left { width:208px; float:left; background:url(../grafics/bg_left.jpg) no-repeat 27px -1px; min-height:489px; text-align:right;} #right { width:702px; float:left; padding:20px 20px 10px 30px;} #footer {width:100%; height:75px; font-size:11px; color:#b47f48; background: url(../grafics/bg_footer.png) repeat-x center top; } #innerfooter {position:relative; width:960px; height:75px; font-size:11px; text-align:center; margin:0 auto; } #homelink {position:absolute; width:181px; height:190px; display:block; z-index:10; left:27px;} #cutandcolorlink {position:absolute; top:5px; left:855px; width:40px; height:40px; display:block;} #p2hairstudiolink {position:absolute; top:5px; left:895px; width:40px; height:40px; display:block;} .push { height: 75px; } .cleaner { clear:both; } /* JOBS */ .jobs #right {background:url(../grafics/bg_jobs.jpg) no-repeat top left;} .jobs #right .sitetitle {border:none;} .jobs .ce_form .submit{background-color:#b9d165;} /* EVENTS */ .events #right {background:url(../grafics/bg_events.jpg) no-repeat top left;} .events #right .sitetitle {border:none;} /* GUTSCHEIN */ .gutschein #right {background:url(../grafics/bg_gutschein.jpg) no-repeat top left;} .gutschein #right .sitetitle {border:none; display:none;} /* NAVIGATION */ /*************************************************************/ #nav { width:960px; height:29px; text-align:right; background:url(../grafics/bg_hnav.jpg) no-repeat left top; position:relative; } #hnav { list-style-type:none; height:29px; text-align:right; float:right; } #hnav li { list-style-type:none; display:inline; float:left; background:none; border-left: 1px solid #c1905f; height:28px; } #hnav li a:link, #hnav li a:visited { display:block; font-size:14px; color:#fff; font-weight:bold; padding:5px 20px; text-align:left;} #hnav li a:hover, #hnav li a:active, #hnav li a.active:link, #hnav li a.active:visited, #hnav li a.trail:link, #hnav li a.trail:visited { text-decoration:none; color:#000; } /* 2.Ebene */ #snav { list-style-type:none; float:right; padding-top:55px; width:180px; } #snav .last { margin-bottom:2px; } #snav .level_1 li { list-style-type:none; display:block; width:180px; float:left; margin-left:10px;} #snav .level_1 li.submenu a:link, #snav .level_1 li.submenu a:visited { border-bottom:none; background: url(../grafics/bg_unav_active.jpg) repeat-y 0px 7px;} #snav .level_1 li a:link, #snav .level_1 li a:visited { display:block; border-bottom: 1px solid #bca48b; font-size:13px; color:#fff; font-weight:bold; padding:5px 23px; text-align:right;} #snav .level_1 li a:hover, #snav .level_1 li a:active, #snav .level_1 li a.active:link, #snav .level_1 li a.active:visited, #snav .level_1 li a.trail:link, #snav .level_1 li a.trail:visited { text-decoration:none; color:#000; } /* 3.Ebene */ #snav .level_2 li { list-style-type:none; display:block; width:170px; border-bottom: none; float:left; background:none; margin-left:0px;} #snav .level_2 li a:link, #snav .level_2 li a:visited { display:block; border-bottom:none; font-size:12px; color:#fff; font-weight:normal; padding:5px 20px; margin-top:-5px; } #snav .level_2 li a:hover, #snav .level_2 li a:active, #snav .level_2 li a.active:link, #snav .level_2 li a.active:visited, #snav .level_2 li a.trail:link, #snav .level_2 li a.trail:visited { text-decoration:none; color:#000; } #copyright { position:absolute; top:50px; left:10px; width:300px; color:#a76237; height:11px; font-size:10px; } #gnav { float:left; width:400px; height:25px; margin: 17px 0px 0px 30px; } #gnav ul { float:left; list-style-type:none; text-align:left; width:400px; height:25px; margin-left:0px; padding-top:5px;} #gnav ul li { list-style-type:none; display:inline; float:left; background:none; border-left: 1px solid #7e4d26; height:15px; } #gnav ul li a:link, #gnav ul li a:visited { padding:5px 5px; text-align:left; color:#b47f48; } #gnav ul li a:hover, #gnav ul li a:active { text-decoration:none; color:#000; } /* GLOBAL TEXT FORMATS AND CONTENT FORMATS */ /*************************************************************/ h1.sitetitle {font-size: 16px; letter-spacing:0.05em; font-weight:bold; color:#d2a577; border-bottom:1px solid #431e0e; margin-bottom:20px; padding-bottom:3px; text-transform:uppercase;} h1.ce_headline {clear:both; font-size: 14px; letter-spacing:0.05em; font-weight:bold; color:#edd1b4; border-bottom:1px solid #431e0e; margin:10px 0 0 0; padding-bottom:3px;} h1 {font-size: 14px; font-weight:bold; color:#edd1b4; margin:10px 0px;} h2, h3 {font-size: 12px; font-weight:bold; color:#d2a577; margin: 10px 0px 1px 0px;} h4 {font-size: 12px; font-weight:bold; margin: 0px 0px 5px 0px; } p {font-size: 12px; color:#fbf2f8; margin-bottom:10px;} .left {float:left; margin:0px 15px 10px 0px;} #right img {border:1px solid #66300e;} #right .homepic img {border:none; margin:0 0 0 -10px;} #right a:link, #right a:visited {color:#ffa954;} #right a:hover, #right a:active {color:#dd622f;} .caption {font-size: 11px; color:#dd622f; font-style:normal; padding: 3px; } #preisliste table {border-collapse:collapse;} #preisliste table td {padding:2px;} #preisliste table td strong {color:#ffa954;} #right a.video:link, #right a.video:visited{background: url(../grafics/ico_video.jpg) no-repeat top left; padding:10px 0px 0px 75px; height:84px; display:block; } #right a.video:hover, #right a.video:active{background: url(../grafics/ico_video.jpg) no-repeat top left; } #right a.preisliste:link, #right a.preisliste:visited{background: url(../grafics/ico_price.jpg) no-repeat top left; padding:10px 0px 0px 75px; height:84px; display:block; } #right a.preisliste:hover, #right a.preisliste:active{background: url(../grafics/ico_price.jpg) no-repeat top left; } #right a.lageplan:link, #right a.lageplan:visited{background: url(../grafics/ico_map.jpg) no-repeat top left; padding:10px 0px 0px 75px; height:84px; display:block; } #right a.lageplan:hover, #right a.lageplan:active{background: url(../grafics/ico_map.jpg) no-repeat top left; } #right a.reservation:link, #right a.reservation:visited{background: url(../grafics/ico_res.jpg) no-repeat top left; padding:10px 0px 0px 75px; height:84px; display:block; } #right a.reservation:hover, #right a.reservation:active{background: url(../grafics/ico_res.jpg) no-repeat top left; } /* Download Element */ #right .enclosure, #right .ce_downloads { margin:8px 0 20px 0; } #right .ce_downloads a:link, #right .ce_downloads a:visited, #right .enclosure a:link, #right .enclosure a:visited, #right .ce_download a:link, #right .ce_download a:visited { background-color: #251303 !important; color:#ffa954; float:left; display:block; width:702px; padding:2px 2px 2px 25px; margin-bottom:3px; } #right .ce_downloads a:hover, #right .ce_downloads p a:active, #right .enclosure a:hover, #right .enclosure a:active, #right .ce_download a:hover, #right .ce_download p a:active { background-color: #66300e !important; color:#fbf2f8; text-decoration:none; } /* Listen Element */ #right .ce_list { margin:10px 0; } #right .ce_list li { background:url(../grafics/ico_tick.gif) 2px 3px no-repeat; padding-left:20px; margin-left:10px;} #right ul { margin:10px 0; } #right ul li { background:url(../grafics/ico_tick.gif) 2px 3px no-repeat; padding-left:20px; margin-left:10px;} .ce_text {margin-bottom:0px; display:block; width:702px;} /* Kleine Galerien */ .medien .kleinegallerie, .trends .kleinegallerie {float:left; display:block; width:218px; height:150px; margin:0px 5px 5px 0px;} .medien .mittelgallerie, .trends .mittelgallerie {float:left; display:block; width:340px; height:200px; margin:0px 10px 5px 0px;} /* Lightbox Anpassungen */ #mbTitle { display:none !important;} /* Templates */ /*************************************************************/ #right .col-2-50-50 {display:block; width:700px; margin:0; padding:0; clear:both;} #right .col-2-50-50 .col-a {float:left; width:330px; margin:0 30px 0 0;} #right .col-2-50-50 .col-b {float:left; width:330px; margin:0;} #right .col-3-30-30-30 {display:block; width:700px; margin:0; padding:0; clear:both;} #right .col-3-30-30-30 .col-a {float:left; width:220px; margin:0 10px 0 0;} #right .col-3-30-30-30 .col-b {float:left; width:220px; margin:0 10px 0 0;} #right .col-3-30-30-30 .col-c {float:left; width:220px; margin:0;} #right .col-3-20-40-20 {display:block; width:550px; margin:0; padding:0; clear:both;} #right .col-3-20-40-20 .col-a {float:left; width:100px; margin:0 30px 0 0;} #right .col-3-20-40-20 .col-b {float:left; width:280px; margin:0 30px 0 0;} #right .col-3-20-40-20 .col-c {float:left; width:100px; margin:0;} #right .col-4-20-20-20-20 {display:block; width:700px; margin:0; padding:0; clear:both;} #right .col-4-20-20-20-20 .col-a {float:left; width:150px; margin:0 20px 0 0;} #right .col-4-20-20-20-20 .col-b {float:left; width:150px; margin:0 20px 0 0;} #right .col-4-20-20-20-20 .col-c {float:left; width:150px; margin:0 20px 0 0;} #right .col-4-20-20-20-20 .col-d {float:left; width:150px; margin:0;} .telefon{font-size:20px; color:#D2A577;} /* FORMULAR */ /*************************************************************/ .ce_form label {float:left; display:block; width:260px; margin-top:10px;} .ce_form input {float:left; width: 300px; height: 16px; border: 1px solid #d2a577; color:#66300e; padding:2px 2px; margin-top:10px; background-color: #efdcca; font-size:1em;} .ce_form select {float:left; width: 305px; height: 22px; border: 1px solid #d2a577; color:#66300e; padding:1px 1px; margin-top:10px; background-color: #efdcca; font-size:1em;} .ce_form input.betrag {width: 100px; } .ce_form input:focus {border: 1px solid #ffa954; color:#66300e; background: #fff;} .ce_form br {clear:both; margin:0; padding:0;} textarea {float: left; width:300px; height: 75px; border: 1px solid #d2a577; margin: 0 0 6px 0; color:#66300e; padding:0 0 0 4px; margin-top:10px; background-color:#efdcca; font-family:Arial, Helvetica, sans-serif; font-size:12px;} textarea:focus { border: 1px solid #ffa954; color:#66300e; background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:12px;} .ce_form .submit {background-color:#b9d165; border:1px solid #66300e; color:#66300e; cursor:standard; height:25px; margin:0 0 20px 260px; padding:0 0 3px; width:306px} .ce_form p.error {clear:both; float:left; display:block; margin: 8px 0 0 0; width: 260px; color:#F00; height:16px; font-size:12px; line-height:1em;} .ce_form .radio_container {float:left; margin-top:5px; padding:0; display:block; width:30px;} .ce_form .radio_container span {width:350px; height:25px; display:block; margin:0px; padding:0;} .ce_form .radio_container label {float:left; margin:0; padding:0; width:320px; margin:10px 0 0 0; display:block; } .ce_form .radio_container input {float:left; width:30px; margin:10px 0 0 0; padding:0; border:none; background:none; } .ce_form .checkbox_container {float:left; margin-top:5px; padding:0; display:block; width:30px;} .ce_form .checkbox_container span {width:350px; height:25px; display:block; margin:0px; padding:0;} .ce_form .checkbox_container label {float:left; margin:0; padding:0; width:320px; margin:10px 0 0 0; display:block; } .ce_form .checkbox_container input {float:left; width:30px; margin:10px 0 0 0; padding:0; border:none; background:none; } #opt_93 {float:left; width:30px; margin:10px 0 0 260px; padding:0; border:none; background:none; } .captcha_text{font-size:12px; color:#white; display:block; margin-top:10px; clear:both; } .ce_form input.captcha_field{width:30px;} .ce_form input.betrag {width:100px;} /* Bewerbung */ .ce_form .upload {background-color:#efdcca; border:1px solid #66300e; color:#66300e; cursor:standard; height:25px; padding:0 0 3px; width:350px; display:block; margin-bottom:20px;} /* Login */ #tl_login, #tl_logout {display:block; margin:0 0 15px 0;} #tl_login label{float:left; display:block; width:150px; margin-top:10px;} #tl_login #username, #tl_login #password {float: left; width: 250px; height: 16px; border: 1px solid #d2a577; color:#66300e; padding:2px 2px; background-color: #d2a577; font-size:1em;} #tl_login .submit, #tl_logout .submit {background-color:#b9d165; border:1px solid #66300e; color:#66300e; cursor:standard; height:25px; margin:0 0 0 150px; padding:0 0 3px; width:256px} #tl_login br {clear:both; margin:0; padding:0;} /* SITEMAP */ #right .mod_sitemap { margin-top:20px;} #right .mod_sitemap ul.level_1 { margin:0; padding:5px 0; } #right .mod_sitemap li.submenu {float:left; width:300px; } #right .mod_sitemap li.first {float:left; width:300px; } #right .mod_sitemap ul.level_1 li {margin:0 0 20px 2px; padding:0; list-style:none; border-left:1px solid #66300e; } #right .mod_sitemap ul.level_1 li a:link { background:url(../grafics/ico_arrowright.gif) no-repeat top left; text-decoration:none; padding: 0 0 0 20px; margin:0px; } #right .mod_sitemap ul.level_1 li a:visited { background:url(../grafics/ico_tick.gif) no-repeat 4px 2px; padding: 0 0 0 20px; } #right .mod_sitemap ul.level_1 li a:hover, #right .mod_sitemap ul.level_1 li a:active { background:url(../grafics/ico_tick_hover.gif) no-repeat 4px 2px; } #right .mod_sitemap ul.level_2 {margin:0; padding:2px 0 5px 20px; } #right .mod_sitemap ul.level_2 li {margin:0 0 0 2px; padding:0; list-style:none; border-left:1px solid #66300e; } #right .mod_sitemap ul.level_2 li a:link { background:url(../grafics/ico_arrowright.gif) no-repeat top left; text-decoration:none; padding: 0 0 0 20px; margin:0px;} #right .mod_sitemap ul.level_2 li a:visited { background:url(../grafics/ico_tick.gif) no-repeat 4px 2px; padding: 0 0 0 20px; } #right .mod_sitemap ul.level_2 li a:hover, #right .mod_sitemap ul.level_2 li a:active { background:url(../grafics/ico_tick_hover.gif) no-repeat 4px 2px; } #right .mod_sitemap ul.level_3 {margin:0; padding:2px 0 5px 20px; } #right .mod_sitemap ul.level_3 li {margin:0 0 0 2px; padding:0; list-style:none; border-left:1px solid #66300e;} #right .mod_sitemap ul.level_3 li a:link { background:url(../grafics/ico_arrowright.gif) no-repeat top left; text-decoration:none; padding: 0 0 0 20px; margin:0px;} #right .mod_sitemap ul.level_3 li a:visited { background:url(../grafics/ico_tick.gif) no-repeat 4px 2px; padding: 0 0 0 20px; } #right .mod_sitemap ul.level_3 li a:hover, #right .mod_sitemap ul.level_3 li a:active { background:url(../grafics/ico_tick_hover.gif) no-repeat 4px 2px; } /* FIXES */ /*************************************************************/ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac \*/ .clearfix { display:block; } /* End hide from IE Mac */