/************************************************************/
/*   Site: 	  www.designloft.ch								*/
/*   Autor:   Raphael Hitter								*/
/*   Datum:   June 2009										*/
/*----------------------------------------------------------*/
/*   Design:   		CENTER with TOPNAV					  	*/
/*   File:     		screen.css								*/
/*   Definitions:	main-layout / text formats				*/
/************************************************************/

/***** COLORS	********************************************

>>place			>>name			>>HEX
------------------------------------------
background		 	grey 		#cbcbcb
active links		red			#ea5454
font dark			grey		#383b40
font (light)		grey		#999999
------------------------------------------
*/

body { background:url(../grafics/bg_designloft.jpg) no-repeat top center #cbcbcb; font:11px/16px Arial, Verdana, Helvetica, Tahoma, sans-serif; color:#383b40; letter-spacing: 0.002em; margin-top:25px; }
#page { width:940px; margin-left:auto; margin-right:auto;}
#header { width: 940px; height: 128px; }
#content { width:940px; margin:20px 0px 18px 0px; }
#col-1 {float:left; width:678px; margin-right:20px;}
#col-2 {float:left; width:220px; }
#shorties { width:940px;}
#footer { width:920px; height:16px; padding:5px 10px 10px 10px;} 
address { font-style:normal; width: 502px; float:left; padding-top:3px;}
.partner { margin-left:115px;}

#logo { float:left; width:108px; height:108px; margin-right:55px; }
#twitter_div { width:220px; height:auto; float:left; margin:18px 0px 0px 20px; background:url(../grafics/bg_twitterbox.jpg) no-repeat top left; color:#383b40; }
#bildfader { width:700px; height:265px; }

a:link, a:visited {color:#383b40;}
a:hover, a:active {color:#ea5454;}
a:link.red, a:visited.red {color:#ea5454;}

h3 {display:inline; font-weight:bold;}
#footer {border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
#footer b {font-family: Arial, Helvetica, sans-serif; font-weight:normal;}

/* Haupt-Navigation */
#hnav { width:536px; float:left; margin:18px 0px 0px 0px; list-style-type:none; }
#hnav li { width:160px; float:left; margin-bottom:12px; height:9px; }
#hnav li span { display:none; }
#hnav li.arbeiten { background:url(../grafics/arbeiten.gif) no-repeat; }
#hnav li.service { background:url(../grafics/service.gif) no-repeat; }
#hnav li.studio { background:url(../grafics/studio.gif) no-repeat; }

/* Zweite-Navigation */
.snav { width:160px; margin: 15px 0px 0px 0px; list-style-type:none; }
.snav li { margin-bottom:12px; }
.snav li a:link, .snav li a:visited { display:block; height:14px; color:#383b40; background:none; padding: 0px 0px 0px 0px; }
.snav li a:hover, .snav li a:active, .snav li a.aktiv:link, .snav li a.aktiv:visited, .snav li a.aktiv:hover { display:block; color:#ea5454; background:none;  }

/* Themen-Navigation */
#tnav { width:678px; margin: 13px 0px 0px 0px; list-style-type:none; }
#tnav li { width:157px; float:left; margin-bottom:2px; }
#tnav li a:link, #tnav li a:visited { display:block; color:#383b40; background:none; padding: 0px; }
#tnav li a:hover, #tnav li a:active, #tnav li a.aktiv:link, #tnav li a.aktiv:visited, #tnav li a.aktiv:hover { color:#ea5454; }

/* Vierte-Navigation (Boppels) */
#fnav { width:30px; margin:0px; list-style-type:none; z-index:1; position:relative; top:50px; }
#fnav li { width:9px; height:9px; float:left; margin:0px 5px 5px 0px; }
#fnav li a:link, #fnav li a:visited { display:block; width:9px; height:9px; background:url(../grafics/fnav.gif) no-repeat; }
#fnav li a:hover, #fnav li a:active, #fnav li a.aktiv:link, #fnav li a.aktiv:visited, #fnav li a.aktiv:hover { background:url(../grafics/fnav_aktiv.gif) no-repeat; }

/* Twitter Box */
.twittermessage { font-size:11px; padding:5px 20px 0px 45px;} 
#twitter_div a:link, #twitter_div a:visited { display:block; font-size:11px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; color:#969595; margin-top:5px; } 
#twitter_div a:hover, #twitter_div a:active { color:#ea5454; } 
.boxline { background:url(../grafics/bg_twitterboxline.gif) no-repeat bottom left; height:2px; width:220px; padding-top:10px; } 

/* Aktuelles Box */
#aktuelles {width:220px; height:218px; background:url(../grafics/bg_aktuelles.gif) no-repeat top left; padding-top:47px; font-size:11px; }
#aktuelles h1 {font-weight:bold; color:#383b40; margin: 5px 11px 0px 11px; font-size:11px; }
#aktuelles p {font-weight:normal; color:#383b40; margin: 2px 11px 0px 11px; font-size:11px; }

/* News Boxen */
.newsbox { width:438px; float:left; background:url(../grafics/bg_box.png) repeat-x top left; padding:9px 11px 9px 11px; margin-bottom:10px; }
.abstandrechts { margin-right:20px; }
.newsbox h1  { font-weight:bold; }
.newsbox img.titel { margin-bottom:11px; display:block; }
.newsbox img.links { float:left; width:118px; margin: 2px 10px 0px 0px; }
.newsbox p.rechts { float:left; width:290px; }

/* Rechte Text-Spalte generell */
#textboxrechts {padding-top:47px; }
#textboxrechts h1 {font-weight:bold; color:#383b40; margin: 10px 11px 0px 11px; font-size:11px; }
#textboxrechts p {font-weight:normal; color:#383b40; margin: 2px 11px 0px 11px; font-size:11px; }
#textboxrechts ul {list-style-type:none; }
#textboxrechts ul li {margin-left: 10px; padding-left:10px; color:#383b40; background:url(../grafics/list_bullet.gif) no-repeat 0px 6px; }
#col-1 h1 { font-weight:bold; color:#383b40; font-size:11px; }

/* Webdesign - Rechte Text-Spalte (.t1 == Webdesign, Bodyklasse) */
.t1 #col-1 { background:url(../grafics/bg_content_grafikdesign.png) no-repeat top left; padding:9px 11px 9px 11px; }
.t1 #referenzbild { width:460px; float:left; margin-right:10px;}
.t1 #referenztext { width:208px; float:left; }

/* Grafikdesign - Rechte Text-Spalte (.t2 == Grafikdesign, Bodyklasse) */
.t2 #col-1 { background:url(../grafics/bg_content_grafikdesign.jpg) no-repeat top left; padding:9px 11px 9px 11px; }
.t2 #referenzbild { width:678px;}

/* Illustration - Rechte Text-Spalte (.t3 == Grafikdesign, Bodyklasse) */
.t3 #col-1 { background:url(../grafics/bg_content_grafikdesign.png) no-repeat top left; padding:9px 11px 9px 11px; }
.t3 #referenzbild { width:678px;}

/* Beratung (.t4 == Bodyklasse) */
.t4 #col-1 { background:url(../grafics/bg_content_beratung.png) no-repeat top left; padding:9px 11px 9px 11px; height:416px; }

/* Konzeption (.t5 == Bodyklasse) */
.t5 #col-1 { background:url(../grafics/bg_content_konzeption.png) no-repeat top left; padding:9px 11px 9px 11px; height:416px; }

/* Kreation (.t6 == Bodyklasse) */
.t6 #col-1 { background:url(../grafics/bg_content_kreation.png) no-repeat top left; padding:9px 11px 9px 11px; height:416px; }

/* Team (.t7 == Bodyklasse) */
.t7 #col-1 { background:url(../grafics/bg_content_team.png) no-repeat top left; padding:9px 11px 9px 11px; height:416px; }

/* Kontakt (.t8 == Bodyklasse) */
.t8 #col-1 { background:url(../grafics/bg_content_grafikdesign.png) no-repeat top left; padding:9px 11px 9px 11px; height:310px; }

/* Anfahrt (.t9 == Bodyklasse) */
.t9 #col-1 { background:url(../grafics/anfahrt.png) no-repeat top left; padding:9px 11px 9px 11px; height:416px; }


/*  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 */ 
.clearer{clear:both;}