/*///////////////////////////////////////////////////////////////////
// 2010-08   | STERN+HUBER                                         //
// Project   | STERN+HUBER Relaunch 2010                           //
// Author    | Karsten Meyer                                       //                                                   
// Package   | basics                                              //
///////////////////////////////////////////////////////////////////*/


/* # general ########## */
HTML {
	margin:0;
	padding:0;
}
BODY {
	color: #565656;
	font: 12px  Arial, Tahoma, Helvetica, sans-serif;
	margin:0;
	padding:0;
}

A:link,
A:visited,
A:hover,
A:active,
A:focus{
	color: #c0d91a;
	text-decoration:none;
}
A:hover{
	text-decoration:underline;
}

IMG, A IMG {
	border:0;
}

P {
 line-height:1.8em;
 margin:0;
 padding-bottom:20px;
}

H1, H2, H3, H4, H5, H6 {
 margin:0;
 padding:0;
}

H1 {
 font-size:30px;
 color:#565656;
 font-weight:400;
}

H2 {
 font-size:28px;
 font-weight:400;
 color:#565656;
 margin-bottom:10px;
 border-top:3px solid #c0d91a;
 border-bottom:1px solid #565656;
 line-height:65px;
}

H3 {
 font-size:20px;
 font-weight:400;
 color:#565656;
 margin-bottom:25px;
 border-top:1px solid #565656;
 border-bottom:1px solid #565656;
 line-height:65px;
}
H4, H5, H6 {
 font-size:12px;
 color:#565656;
 margin-bottom:10px;
}


TABLE, TR, TD {
	color: #565656;
	font-family: Arial, Tahoma, Helvetica, sans-serif;
	vertical-align:top;
	font-size: 12px;
	padding:0 0 4px 0;
	border-spacing: 0px;
	border-style: none;
	border-collapse: collapse;
}


FORM {
  margin:0;
  padding:0;
}

.clearer {
  clear: both;
  line-height: 0px;
  font-size:0px;
  height: 0px;
  margin: 0px;
  padding: 0px;
}
.bo {
 border:1px solid #000; 
}
 /* Clearing mit overflow */
.floatbox { overflow: hidden; }

/* alignment classes */
.float-left  {  float: left; }
.float-right {	float: right; }
.align-left  {	text-align: left; }
.align-right {	text-align: right; }


/* # page settings ########## */
#profil, #portfolio, #referenzen, #kontakt, #undercover, #null {
 position:absolute;
 width:1690px;
 height:924px;
 padding-left:40px;
}

#profil {
 left:0;
 top:0;
 background: url(../img/bg_profil.gif) no-repeat;
}
#portfolio {
 left:1770px;
 top:0;
 background: url(../img/bg_portfolio.gif) no-repeat;
}
#referenzen {
 left:3540px;
 top:0;
 width:2110px;
 background: url(../img/bg_referenzen.gif) no-repeat;
}
#kontakt {
 left:0;
 top:925px;
 background: url(../img/bg_kontakt.gif) no-repeat;
}
#undercover {
 left:1770px;
 top:925px;
 background: url(../img/bg_undercover.gif) no-repeat;
}
#null {
 width:2110px;
 left:3540px;
 top:925px;
 background: url(../img/bg_null.gif) no-repeat;
}

.logo {
	margin:40px 0 32px 2px;
	cursor:pointer;
}

H1 {
	width:1001px;
	height:100px;
	border-top:1px solid #565656;
	border-bottom:1px solid #565656;
	text-indent:-5999px;
	margin-bottom:61px;
}

#profil H1 {
 background: url(../img/hl_profil.gif) 261px 0px no-repeat;
}
#portfolio H1 {
 background: url(../img/hl_portfolio.gif) 261px 0px no-repeat;
}
#referenzen H1 {
 background: url(../img/hl_referenzen.gif) 261px 0px no-repeat;
}
#kontakt H1 {
 background: url(../img/hl_kontakt.gif) 261px 0px no-repeat;
}
#undercover H1 {
 background: url(../img/hl_undercover.gif) 261px 0px no-repeat;
}

.leftCol {
 position:relative;
 float:left;
 width:260px;
 height:675px;
}

.content {
 float:left;
 width:741px;
 height:675px;
}

#reflist {
 float:left;
 width:466px;
}

#reflist UL {
 width:423px;
 height:402px;
 margin:0;
 list-style:none;
 font-size:12px;
 padding:0;
 border-top:3px solid #c0d91a;
}
#reflist LI {
 width:423px;
 line-height:24px;
 margin:0;
 list-style:none;
 font-size:12px;
 padding:0;
 border-bottom:1px solid #565656;
}

#refprev {
 position:absolute;
 width:35px;
 height:35px;
 left:267px;
 top:456px;
 cursor:pointer;
}
#refnext {
 position:absolute;
 width:35px;
 height:35px;
 left:721px;
 top:456px;
 cursor:pointer;
}

#reflines {
	float:right;
	width:275px;
	height: 402px;	
	background: url(../img/bg_ref_lines.gif) left bottom no-repeat;
}


#thumbnails {
 float:left;
 width:250px;
}
#thumbnails IMG {
 margin:0 10px 10px 0;
 border:1px solid #565656;
}

#pf {
 position:relative;
 float:left;
 width:405px;
 height:250px;
 margin-left:41px;
}
#pfprev {
 position:absolute;
 width:35px;
 height:35px;
 left:0px;
 top:100px;
 cursor:pointer;
}
#pfnext {
 position:absolute;
 width:35px;
 height:35px;
 left:368px;
 top:100px;
 cursor:pointer;
}
#pf-screen {
 position:absolute;
 float:left;
 width:326px;
 height:229px;
 left:38px;
 top:0px;
}

#pager {
 position:absolute;
 width:328px;
 height:25px;
 left:38px;
 top:233px;
 text-align:right;
}
#pager a { color: #565656; text-decoration: none; margin: 0 2px; }
#pager a.activeSlide { color: #c0d91a }
#pager a:focus { outline: none; }


/* # navigation ########## */
UL.mainnavi {
 width:150px;
 height:225px;
 margin:0;
 list-style:none;
 font-size:12px;
 padding:0;
 border-bottom:1px solid #565656;
}

.mainnavi A:link,
.mainnavi A:visited,
.mainnavi A:hover,
.mainnavi A:active {
	display:block;
  height:45px;
	color: #565656;
	text-decoration:none;
	font-size:12px;
 text-indent:-5999px;
 outline:0;
}

.profil A:link,
.profil A:visited,
.profil A:active { background: url(../img/bg_navigation.gif) -150px 0px no-repeat; }
.profil A:hover,
.profil A.current:link,
.profil A.current:visited,
.profil A.current:active { background: url(../img/bg_navigation.gif) 0px 0px no-repeat; }

.portfolio A:link,
.portfolio A:visited,
.portfolio A:active { background: url(../img/bg_navigation.gif) -150px -45px no-repeat; }
.portfolio A:hover,
.portfolio A.current:link,
.portfolio A.current:visited,
.portfolio A.current:active { background: url(../img/bg_navigation.gif) 0px -45px no-repeat; }

.referenzen A:link,
.referenzen A:visited,
.referenzen A:active { background: url(../img/bg_navigation.gif) -150px -90px no-repeat; }
.referenzen A:hover,
.referenzen A.current:link,
.referenzen A.current:visited,
.referenzen A.current:active { background: url(../img/bg_navigation.gif) 0px -90px no-repeat; }

.kontakt A:link,
.kontakt A:visited,
.kontakt A:active { background: url(../img/bg_navigation.gif) -150px -135px no-repeat; }
.kontakt A:hover,
.kontakt A.current:link,
.kontakt A.current:visited,
.kontakt A.current:active { background: url(../img/bg_navigation.gif) 0px -135px no-repeat; }

.undercover A:link,
.undercover A:visited,
.undercover A:active { background: url(../img/bg_navigation.gif) -150px -180px no-repeat; }
.undercover A:hover,
.undercover A.current:link,
.undercover A.current:visited,
.undercover A.current:active { background: url(../img/bg_navigation.gif) 0px -180px no-repeat; }

/* # sub navigation ########## */
UL.subnavi {
 position:absolute;
 left:156px;
 top:16px;
 width:98px;
 margin:0;
 list-style:none;
 padding:0;
 border-bottom:1px solid #565656;
}

UL.subnavi LI {
 width:98px;
}

.subnavi A:link,
.subnavi A:visited,
.subnavi A:hover,
.subnavi A:active,
.subnavi A.current:link,
.subnavi A.current:active  {
	display:block;
	padding:6px 2px;
	color: #808080;
	text-decoration:none;
  font-size:14px;
	border-top:1px solid #565656;
}
.subnavi A:hover,
.subnavi A.current:link,
.subnavi A.current:visited,
.subnavi A.current:active {
	border-top:1px solid #c0d91a;
}

/* END */