/*======= Cremweb Design Freiburg,  CSS Document =========*/
/*======= erstellt von Matthias Kremer www.cremweb.de ======*/

/*======= thank you for visit the CSS Document ============*/
/*======= written 11 - 1 - 2010 in the early morning .... with a lot of english earl grey tee ;-) ===*/

body { text-align:center;font-family: Helvetica, Arial, sans-serif; font-size:1em; color:#333; background: #B3ADA1;}

html{width:100%;height:100%;}

* {margin: 0; padding: 0; border: 0;}
img {border:none;}
ol,ul {list-style:none;}

.clear {clear:both;}
.right {float:right;}
.left{float:left;}

.braun {background:#B3ADA1; }
.braun_txt {color:#B3ADA1;}
.beige {color:#F7F9E7;}
.beigebg {background:#F7F9E7;}
.rot_bg {background:#F7B7B8;}
.rot {color:#D95E6C;}

.weiss {color:#fff;}
.weiss_bg {background-color:#fff;}

h1 {font-weight:normal; font-family: "Courier New", Courier, Georgia; font-size:1.4em;text-align:left;margin:0 ;}
h2 {font-weight:normal; text-align:left;line-height:36px; padding:10px 0 5px 30px;}
h3 {font-weight:normal; text-align:left; font-size:1.1em;line-height:36px; padding:10px 0 5px 30px;}
h6 {font-size:0.7em;color:#333; line-height:22px;margin-left:20px;text-align:left;font-weight:normal;float:left;}
.courier {font-family: "Courier New", Courier, Georgia;font-size:1.4em;}

.txt_16em {font-size:1.6em; line-height:36px;}
.txt_14em {font-size:1.4em; line-height:36px;}
.txt_13em {font-size:1.3em; line-height:30px;}
.txt_12em {font-size:1.2em; line-height:28px;}
.txt_11em {font-size:1.1em; line-height:28px;}
.txt_1em   {font-size:1em; line-height:36px;}

a {font-weight:bold; color:#B3ADA1;font-style:normal}
a:hover {color:#D95E6C;text-decoration:underline;}

/*============= Layout der Seite ================== */

/*============= Header ================= */

#header {background: #F7F9E7 url(../images/header_bg.png) repeat-x;}
#header .content {width: 900px; height:66px; margin: 0 auto; background: url(../images/header_cremweb.jpg) no-repeat;}
#header .menu ul { width: 650px; height: 30px;margin: 0 0 0 320px;padding: 0; font-size: 1em;font-weight: bold;}
#header .menu ul li { float:left; line-height:30px; width:auto;}
#header .menu ul li a { display: block;text-decoration: none;text-transform: inherit;padding: 18px 12px;color: #ccc; letter-spacing: 1px;}
#header .menu ul li a:hover, #header .menu ul li a.active { text-decoration: underline; Color: #fff;}
.thin {font-size: 0.8em;font-weight: normal;}
.thin a.active {text-decoration: underline; Color: #fff; cursor: default;font-size: 0.8em;font-weight: normal;}

/*============= Layout Startseite =========== */

#layer_frage {background: #F7F9E7 url(../images/layer_frage_cremweb_bg.jpg) repeat-x;}
#layer_frage .content {width: 900px; height:247px; margin: 0 auto; background: url(../images/layer_frage_cremweb.jpg) no-repeat;}
#layer_frage .slider {width: 486px; height:240px; margin-top:2px;float:right; }
#layer_frage .container {display: none; position: absolute; text-align: right;
	width: 900px;text-align: justify;color: #999999;background-color: transparent;}
#layer_frage h1{display: none;}
#layer_frage h2{display: none;}
#layer_frage p{display: none;}
#photodiv {background: url(../images/cremweb_one.jpg);}

#layer_we_are_cremweb {background: #B3ADA1 url(../images/wir_sind_cremweb_bg.jpg);}
#layer_we_are_cremweb .content {width:900px; height:230px; margin: 0 auto; background: url(../images/wir_sind_cremweb.jpg) no-repeat;}
#layer_we_are_cremweb .webdesign_aus_freiburg {display: none; position: absolute; text-align: right;
	width: 900px;text-align: justify;color: #999999;background-color: transparent;}
#layer_we_are_cremweb h2{display: none;}
#layer_we_are_cremweb h3{display: none;}
#layer_we_are_cremweb p{display: none;}

#layer_kunden_startseite {background: #F7F9E7;}
#layer_kunden_startseite .content{width:900px; height:210px; margin: 0 auto; background: url(../images/webdesign_kunden_cremweb_freiburg.jpg) no-repeat;}
#layer_kunden_startseite h4 {font-weight:normal; font-size:1.1em; margin:5px 0 0 26px; float:left; width:auto; display:inline;}
#layer_kunden_startseite a.box {margin:10px 124px 0 0; float:right; width:auto;line-height:25px;font-size:1em;color:#fff; background:#B3ADA1; text-decoration:none; padding:0 5px;}
#layer_kunden_startseite a:hover.box {color:#fff; background:#F7B7B8;}

/*============= Layout Folgeseiten ======== */

#layer_top {}
#layer_top .content {width: 900px; height:75px; margin: 0 auto; background: url(../images/layer_top_bg.jpg) no-repeat;}
#layer_top h1 {color:#333; padding:25px 0 0 30px;}

/*============= Text_page Layout ======== */

#text_page {background: #F7F9E7;}
#text_page .content {width: 900px; height:75px; margin: 0 auto; padding-top:20px;min-height: 100%;height:auto !important; height:100%;overflow: hidden !important; }
#text_page p {font-size:0.9em; line-height:24px;text-align:justify;padding:0 250px 0 30px;}
#text_page span {font-size:1.1em; line-height:24px;font-weight:bold;color:#D95E6C;}
#text_page a {font-weight:normal; color:#D95E6C;font-style:normal}
#text_page a:hover {color:#D95E6C;text-decoration:underline;}
#text_page img {float:right;}
#text_page_sidebar {float:right;width:220px; margin:30px 0;}
#text_page_sidebar h1{margin:15px 10px 10px 20px;}
#text_page_sidebar h2 {padding:0;font-size:14px;}
#text_page_sidebar .span{font-size:1.1em;font-weight:normal;}
#text_page_sidebar p  {margin:5px 10px 10px 20px;padding:0;text-align:left;}
#text_page_sidebar a.box {margin:10px 0 10px 15px;padding-left:21px; float:left; width:auto;line-height:32px;font-size:1em;color:#B3ADA1 ;background:#F7F9E7; text-decoration:none; padding:0 7px;}
#text_page_sidebar a:hover.box {color:#fff; background:#F7B7B8;}

.more_right {float:right;margin-right:220px;padding-left:20px;}
.more_right2 {float:right;margin-right:210px;padding-left:10px;}


/*============= Page Service Layout ======= */

#text_page_service {background: #F7F9E7;}
#text_page_service .content {width: 900px; height:75px; margin: 0 auto; padding-top:20px;min-height: 100%;height:auto !important; height:100%;overflow: hidden !important; }
#text_page_service ul#menu_service {margin:43px 0 0 20px; width:150px; float:left;}
#text_page_service ul#menu_service li {padding-bottom:10px; margin-bottom:5px; height:32px;}
#text_page_service ul#menu_service li a {width:auto; color:#fff; background:#B3ADA1 ; font-size:18px; text-decoration:none; padding:0 10px; display:block;height:32px;line-height:32px;text-align:center;}
#text_page_service ul#menu_service li a:hover {background:#D95E6C;}
#text_page_service ul#menu_service li.active a {background:#D95E6C;}
#text_page_service .box {width:700px; float:right; padding:30px 0 30px 10px; margin-top:10px;}
#text_page_service h2 {padding:0;}
#text_page_service span {color:#D95E6C;}
#text_page_service p {line-height:24px;text-align:justify;padding:0 200px 0 0;}
#text_page_service img {float:left;}
#text_page_service .sidebar {padding:10px 10px 10px 0;width:240px;}
#text_page_service .sidebar_red {padding:10px 10px 10px 10px; margin-left:10px;width:240px;background:#F7B7B8;}


/*============= Page Arbeit Layout ======== */

.shot {margin-left:20px;padding:15px 0 15px 0;float:left;}
#text_page_work {background: #F7F9E7;}
#text_page_work .content {width: 900px; height:75px; margin: 0 auto; padding-top:20px;min-height: 100%;height:auto !important; height:100%;overflow: hidden !important; }
#text_page_work p {font-size:0.9em; line-height:24px;text-align:justify;padding:0 240px 0 30px;}

#text_page_details {padding:5px; width:223px; float:right;}
#text_page_details h2 {font-size:1.2em; padding:10px 0 5px 0;}
#text_page_details h5 {font-size:14px; font-weight:bold; margin-top:5px; color:#F7B7B8;text-align:left;} 
#text_page_details p { font-size:14px; line-height:21px; padding:20px 0;}

/*============= Page Kontakt Layout ======== */

#kontakt_box {width:550px; float:left;background:#fff; padding:18px; border:2px dotted #B3ADA1; margin:10px 0 0 20px;}
#kontakt_box p {padding:0 20px 0 30px;}
#kontakt_sidebar {float:right;width:270px; margin:0;}
#kontakt_sidebar h1{margin:15px 10px 10px 20px;border-bottom:2px dotted #B3ADA1;}
#kontakt_sidebar h2 {padding:0;font-size:14px;}
#kontakt_sidebar .span{font-size:1.1em;font-weight:normal;}
#kontakt_sidebar p  {margin:5px 10px 10px 20px;padding:0;text-align:left;}
#kontakt_sidebar a {font-weight:normal;color:#D95E6C;}

/*============= Page Support Layout ======== */

#support_sidebar {float:right;width:220px; margin-top:12px; border:2px dotted #B3ADA1;}
#support_sidebar h1{margin:25px 15px 10px 20px;border-bottom:2px dotted #666;}
#support_sidebar h2{margin:5px 15px 10px 10px;}
#support_sidebar h4{margin:5px 0 10px 20px; text-align:left;}
#support_sidebar p  {margin:5px 10px 10px 20px;padding:0px;text-align:left;line-height:28px;}
#support_sidebar a {font-weight:normal;color:#D95E6C;margin:0;}

/*============= Page Artikel Layout ======== */

#artikel {background: #F7F9E7;}
#artikel .content {width: 950px; height:75px; margin: 0 auto; padding-top:20px;min-height: 100%;height:auto !important; height:100%;overflow: hidden !important; }
#artikel .box {float:left; width:600px; background:#fff;  padding:20px 20px; margin:20px 0 0 40px;border:1px dotted #ccc;}
#artikel .box .date {color:#ccc; font-size:1.1em; width:auto; text-align:center;}
#artikel .box .autor {color:#ccc; font-size:1.3em; text-align:center;padding-bottom:20px;}
#artikel .box h1{text-align:center;padding:20px;}
#artikel .box p {font-size:1em;line-height:26px; margin:0;text-align:left;padding:20px;}
#artikel .box a {font-weight:normal;color:#666;margin:0;}
#artikel .box a:hover {color:#D95E6C;}
#artikel .box a.active {color:#D95E6C;}
#artikel .box li
{
background-image:url('../images/bullet.png');
background-repeat:no-repeat;
background-position: 0px 5px; 
padding:2px 0 3px 20px; text-align:left; 
margin-left:20px;
}

#artikel .post {width:600px;float:left; background:#fff; padding:20px 20px; margin:20px 0 0 40px;border:1px dotted #ccc;}
#artikel .post p {font-size:1em;line-height:30px; margin:10px 0 0;text-align:left;padding:0 ;}
#artikel .post p.meta {font-size:0.9em; color:#999;}


.artikel_img {border:1px solid #e6e6e6;padding:9px;}
.abstand_unten_20 {padding-bottom:20px;}
.mehr_lesen a {font-size:18px; color:#FFF; text-decoration:none;background:#B3ADA1; float:right;padding:0 10px;line-height:30px; width:auto;}
.mehr_lesen a:hover {background-color:#F7B7B8;}
.back a {font-size:18px; color:#FFF; text-decoration:none;background:#B3ADA1; float:left;padding:0 10px;line-height:30px; width:auto;}
.back a:hover {background-color:#F7B7B8;color:#fff;}

#artikel_sidebar {float:right;width:220px; margin:0;padding:0 20px;}
.small#artikel_sidebar {float:right; width:150px; margin-right:70px;}

#artikel_sidebar a.box {margin:10px 10px 10px 0;padding:10px 10px; float:left; width:auto;white-space:nowrap;line-height:32px;font-size:1em;color:#000 ;background:#; text-decoration:none; padding:0 7px;}
#artikel_sidebar a:hover.box {color:#fff; background:#F7B7B8;}
#artikel_sidebar a.active.box {color:#fff; background:#F7B7B8;}
#artikel_sidebar h1{margin:15px 10px 10px 0;border-bottom:2px dotted #B3ADA1;}
#artikel_sidebar img {border:1px dotted #ccc;background:#fff;padding:3px;float:left;}
#artikel_sidebar p.autor {font-size:0.9em; color:#999;float:left;padding: 3px 0 0 3px;font-family: "Courier New", Courier, Georgia;}


/*============= Footer ================ */

#footer {background-color: #F7F9E7;}
#footer .content_beige {width: 900px; height:150px; margin: 0 auto; background: url(../images/footer_beige_bg.jpg) no-repeat;}
#footer .content_braun {width: 900px; height:150px; margin: 0 auto; background: url(../images/footer_braun_bg.jpg) no-repeat;}
.footer_braunbg {background: url(../images/footer_braun.jpg)}

#footer p {font-size:0.8em; margin:0;line-height:1.5em;text-align:left;padding:0 ;}
#footer a {font-weight:bold; color:#333;font-style:normal;}
#footer a:hover {color:#D95E6C;text-decoration:underline;}
#footer li a {font-size:0.8em; font-weight:normal; color:#333; text-decoration:none;margin:0;line-height:1.5em;}
#footer li a:hover {color:#D95E6C;text-decoration:underline;}
#footer ul li {margin:0; text-align:left;}
#footer a.box {margin-top:10px;padding-left:21px; float:left; width:auto;line-height:32px;font-size:1em;color:#F7F9E7; background:#B3ADA1; text-decoration:none; padding:0 7px;}
#footer a:hover.box {color:#fff; background:#F7B7B8;}
#footer a.box_blue {margin-top:10px;padding-left:21px; float:left; width:auto;line-height:32px;font-size:1em;color:#B3ADA1; background:#F7F9E7; text-decoration:none; padding:0 7px;}
#footer a:hover.box_blue {color:#fff; background:#F7B7B8;}
#footer .tab_logo {width:193px;float:left;border-right:1px dotted #B3ADA1; height:110px; margin:20px 0 0 0;background: url(../images/logo_footer.jpg) no-repeat;}
#footer .tab_logo_braun {width:193px;float:left;border-right:1px dotted #F7F9E7; height:110px; margin:20px 0 0 0;background: url(../images/logo_footer_braun.jpg) no-repeat;}
#footer .tab_one {width:240px;float:left; border-right:1px dotted #B3ADA1;height:110px; margin:20px 0 0 0px;padding:0 0 5px 20px;}
#footer .tab_one_blue {width:240px;float:left; border-right:1px dotted #F7F9E7;height:110px; margin:20px 0 0 0px;padding:0 0 5px 20px;}
#footer .tab_two {width:auto;float:left;height:110px; margin:20px 0 0 10px;padding:0 10px 5px 20px;}
#footer .tab_two img {float:left; border:none;padding:9px 0 0 20px;}
#footer .tab_three {width:auto;float:left; height:110px; margin:20px 0 0 10px;padding:0 0 5px 20px;border-left:1px dotted #B3ADA1; }
#footer .tab_three_blue {width:auto;float:left; height:110px; margin:20px 0 0 10px;padding:0 0 5px 20px;border-left:1px dotted #F7F9E7; }

/*============= blockquote =========== */

blockquote {margin-left: 20px;background: url('../images/gaensef.png') no-repeat;text-align: justify;font-style: italic;padding-left:18px; color: #666 ;}

/*============= Kontaktformular ======= */

input:focus, field:focus, textarea:focus{ background-color: #F7F9E7; }

 form {padding:0; margin:0;clear:both;width:500px}
 label {line-height:1.5em; float:left; height:20px; margin:5px 70px 5px 45px; margin-top: 1px; margin-bottom: 10px; color:#999; width:90px; font-size:.9em; }
 .field { height:20px; float:left; border:1px dashed #B3ADA1; width:180px; margin:5px 20px 5px 45px; background: #FFF; line-height:1.7em; color:#666 ; text-indent:.5em; font-size:11px;}
 .textarea { border:1px dashed #B3ADA1; width:220px;height:200px;  margin:0 0 10px 45px; padding:0; float:left;text-indent:.5em; line-height:1.7em;}
 .button{ background-image:url('../images/mail_send.png');padding:4px; margin-left:250px; width:139px; height:32px;cursor: pointer; border:1px dotted #B3ADA1;float:left;}
 :hover.button { background-image:url('../images/mail_send2.png');padding:4px; cursor:pointer; border:1px dotted #F7B7B8;}