html { overflow-y: scroll; }
html,body { margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5em; color: #666; }
#wrapper { margin: 0 auto; position: relative; max-width: 1022px; }
#inside { margin: 0 14px; }
#header { background: none repeat scroll 0 0 #FFFFFF; height: 116px; border-bottom: 1px solid #A7A7A7;  position: fixed; display: block;  z-index: 999; width: 994px;  }

#logo { float: left; display: block; position: absolute; z-index: 99999; left: -46px; top: 26px; overflow: hidden; z-index: 1111; }
#logo a span { background: url(../images/reklamehaus_logo.gif) no-repeat top left; width: 203px; height: 49px; display: block; }

#navigation { float: right; margin-top: 10px; display: block; z-index: 2222; }

#navi { display: block; float: none; margin-top: 68px;  }
#navi ul { margin: 0; padding: 0; font-family: "GothamMedium", Arial, Helvetica, sans-serif; display: block;  }
#navi ul li { float: left ; color: #666666; text-transform: uppercase; list-style-type: none; margin-right: 39px; padding: 6px 0; bottom: 0; font-size: 12px }
#navi ul li.last { margin-right: 0; padding: 6px 0; }
#navi ul li a { color: #999999; text-decoration: none; }
#navi ul li a:hover { color: #000000; }
#navi ul li.active a { color: #000000; }


#navi-top { display: block; float: none; }
#navi-top ul { margin: 0; padding: 0; font-family: "GothamBook", Arial, Helvetica, sans-serif; float:right;}
#navi-top ul li { float: left ; color: #666666; text-transform: uppercase; list-style-type: none; margin-right: 20px; padding: 6px 0; bottom: 0; font-size: 10px }
#navi-top ul li.last { margin-right: 0; padding: 6px 0; }
#navi-top ul li a { color: #999999; text-decoration: none; }
#navi-top ul li a:hover { color: #000000; }
#navi-top ul li.active a { color: #000000; }

#mobile-navi { display: none; float: right; margin-top: 48px; }

#search { font-size: 10px;  margin-top: 8px; position: absolute; right: 0; top: 3px; width: 168px; }

#main .display { background-color: #f3f4f8; }
#main { min-height: 486px;  overflow: hidden; padding: 130px 0 13px; position: relative; display: block; }
#main .main-block { float: left; width: 318px; margin-right: 20px; display: block; overflow: hidden; }
#main .last { margin-right: 0; }
#main .main-contact-text { float: left; margin-top: 306px; width: 254px; }

#main .main-text { float: left; width: 300px; }
#main .main-text strong { font-family: "GothamMedium", Arial, Helvetica, sans-serif; display: block;  }
#main .main-map { float: left; height: 486px; overflow: hidden; position: relative; width: 734px; }
#main .main-images { float: right; width: 656px; }
#main h1 { line-height: 28px; font-family: "GothamBook", Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal;  }
#main .hr { height: 1px; width: 994px; border-bottom: 1px solid #A7A7A7; padding-top: 20px; margin-bottom: 20px; display: block; overflow: hidden; }
#main, #footer { background: none repeat scroll 0 0 white; }
#main .display  img { }
#main .blockquote { padding-left: 30px; color: #999999; background: url(../images/blockquote.png) no-repeat left top; }
.main-form { width: 656px; float: left;}

.reference .ref-text { width: 321px; padding-right: 14px; float: left; } 
.reference .ref-text h1 { margin: 0; font-size: 18px; } 
.reference .ref-text span { color: #B7B7B7; } 
.reference .ref-images { float: left; } 
.reference .ref-images img { margin-right: 1px; border: 1px solid #E5E5E5; } 
.reference .ref-images img.last { margin-right: 0; } 

.ref-corporate { display: block; overflow: hidden; } 
.ref-corporate .left { width: 322px; padding-right: 14px; float: left; }
.ref-corporate .right {  float: left; }
.ref-corporate .right img { border: 1px solid #E5E5E5;  width: 656px; height: 390px; overflow: hidden; }
.ref-corporate .left h1 { margin-top: 0; font-size: 18px; }
.ref-corporate .left .text { color:#999999; }
.ref-corporate .nav a img  { border: 1px solid #E5E5E5; }

.expandable { color: #999999; }
.expandable span.details { color: #999999; }

#footer { border-top: 1px solid #A7A7A7; clear: both; font-size: 10px; margin: 11px auto; padding: 7px 0 0; position: relative; display: block; width: 994px; }
#footer .left { float: left; }
#footer .right { float: right; height: 19px; display: block; }
#footer .right a img { border: 1px solid #999; line-height: 17px; opacity: 0.6;}
#footer .right a img:hover { opacity: 1;}
#footer a { text-decoration: none; color: #707070;  }
#footer a:hover { text-decoration: none; color: #00AEEF;  }

#button {
	font-size: 18px;
	padding: 4px 8px;
	display: inline-block;
	color: #000000;
	cursor: pointer;
	margin: 0 0 12px 0;
	text-transform: uppercase;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #999999;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #999999;
}
#button:active {	border-bottom-width: 1px; }

#leistungen { display: block; overflow: hidden;   }
#leistungen .toggle_top img { position: absolute; z-index: 100; margin-left: 160px; }
#leistungen .content { border-top: 1px solid #A7A7A7; border-bottom: 1px solid #A7A7A7; margin-top: 7px; padding: 12px 0;  display: block; overflow: hidden; background: url(../images/bg_toggle.jpg) top repeat-x; background-color: #EEEEEE; }
#leistungen .content .block { padding-top: 12px; width: 238px; float: left; margin-right: 14px; display: block; line-height: 42px; font-weight: bold; }
#leistungen .content .block img { float: left; margin-right: 10px; display: block; }
#leistungen .content .first img { margin-left: 30px;  }
#leistungen .content .last { margin-right: 0; }
.block  { display: block; }
a { text-decoration: none; color: #00AEEF; }

h3 { font-size: 22px; line-height: normal; font-family: "GothamBook", Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; }
h6{ text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; letter-spacing: 4px; margin: 0px; padding: 0px; }

fieldset { padding: 0; border: none; }
input, textarea { font-size: 12px; font-family: "GothamBook", Arial, Helvetica, sans-serif;  }
input[type="text"] { border: 1px solid #A7A7A7; width: 90%; height: 20px; padding: 4px; }
input[type="submit"] { border: 1px solid #00AEEF; background-color: #00AEEF; padding: 8px 16px; color: #FFFFFF; font-family: "GothamMedium", Arial, Helvetica, sans-serif;   }
textarea { border: 1px solid #A7A7A7; padding: 4px; width: 90%;   }
textarea:focus, input[type="text"]:focus { border: 1px solid #00AEEF; }
.mandatory { color: #00AEEF; }

.agentur { margin-top: 20px; margin-left: 320px; }

.display_home  { display: block; }
.home-text {display: none; }
.display_ipad { display: none; }
.display_iphone { display: none; }

.display img { width:994px; height:443px;}

.home-text { position:relative; width:624px; height:136px; }
.home-text div { position:absolute; top:-100px; }


#share_widget { background-color: #F3F4F8; border: 1px solid #F3F4F8; display: none; height: 132px; padding: 15px; position: absolute; right: 0; top: -165px; width: 442px; z-index: 777; font-family: "GothamBook", Arial, Helvetica, sans-serif; }
.share_title { font-size: 14px; margin: 5px 0; }
#share_widget input { margin: 8px 0; padding: 0.4em; width: 97%; }
.share_social {  float: left;  margin: 15px 10px 5px 0; }
.share_close { float: right;  margin: 20px 10px 0 0;  }
a#share_close  { font-size: 14px; color: #CCCCCC; }


/* iPhone Horizontal+Vertical*/
@media screen and (min-width:320px) and (max-width:480px) {
body { -webkit-text-size-adjust: none; font-size: 12px; }

.display_iphone #wrapper { margin: 0 10px; position: relative; max-width: 480px; overflow: hidden; }
#inside { margin: 0; }

/*iPhone header*/
#header { position: relative;  }
#logo { left: -10px; top: 34px; }
#mobile-navi { display: block; }
#navigation { display: none; }

/*iPhone main page home*/
#main { padding: 10px 0 13px; }
.display  { display: none; }
.display_home  { display: none; }
#main .display_ipad { display: none; }
#main .display_iphone { display: block; width: 100%; margin-bottom: 14px; }
.home-text {display: run-in; }
#buttons { display: none; }

.home-text { position:relative; width: 100%; height: auto; }
.home-text div { position:relative; top:0; margin-bottom: 20px; }
#leistungen .content .block img { float: left; margin-left: 30px; margin-right: 10px; display: block; }

/*iPhone main*/
#main .main-block { float: none; width: 100%; }
#main .hr { display: none; } 
.agentur { margin-top: 20px; margin-left: 0; }
#main .main-contact-text { float: left; margin-top: 20px; width: 254px; }

/*iPhone allgemein Referenzen*/
.reference .ref-text { background: none repeat scroll 0 0 #EEEEEE; border: 1px solid #D6D6D6; float: none; margin: 16px 0 16px; padding: 8px; text-shadow: 0 1px 0 #FFFFFF; width: auto; }
.reference { display: block; } 
.reference .ref-images  { display: block; overflow: hidden; float: none; } 
.reference .ref-images img { margin-right: 0;  margin-bottom: 4px; display: block;   } 
.reference .ref-images img.last { margin-right: 0; margin-bottom: 0;  } 
.reference .empty { display: none; }
.reference .none { background: none; border: none; float: none; margin: 0; padding: 0; text-shadow: none; width: 100%; } 

/*iPhone Corporate Design Referenzen*/
.ref-corporate .nav a img  { border: none; }
.ref-corporate .left { background: none repeat scroll 0 0 #EEEEEE; border: 1px solid #D6D6D6; float: none; margin: 16px 0 16px; padding: 8px; text-shadow: 0 1px 0 #FFFFFF; width: auto;  display: block; }
.ref-corporate .right img { display: block;  }
.ref-corporate .right { display: block; float: none;  overflow: hidden; }

#footer { width: 100%; }
#footer .right { display: none; }
}

/* iPhone Vertical */
@media screen and (width:320px) {
	
/* header */
#header { width: 300px; }
#logo a span { background: url(../images/rh_logo.gif) no-repeat top center;  width: 70px;  }

/* main */
.display_iphone img { display: block; width:300px; height:133px; }

.reference .ref-images img { width: 69px; height: 69px; margin-right: 4px; float: left; }

.ref-corporate .right  { height: 180px;  }
.ref-corporate .right img { width: 297px; height: 177px; }

/* form */
textarea { width: 286px; }
input[type="text"] { width: 286px; }
}

/* iPhone Horizontal */
@media screen and (width:480px) {
	
/* header */
#header { width: 460px;  }

/* main */
#main .display_iphone  { display: block; width:460px; height:205px;}
 
.reference .ref-images img { float: left; display: block;  width: 109px; height: 109px; margin-right: 4px; } 
.reference .ref-images { overflow: hidden; } 

.ref-corporate .right  { height: 276px;  }
.ref-corporate .right img { width: 458px; height: 272px; }

/* form */

textarea { width: 448px;  }
input[type="text"] { width: 448px; }
}

/* iPad Horizontal+Vertical */
@media screen and (min-width:768px) and (max-width:1024px) {
body { -webkit-text-size-adjust: none; font-size: 12px; }

#wrapper { margin: 0 10px; position: relative; max-width: 1024px; overflow: hidden; }
#inside { margin: 0; }

/*header*/

#logo { left: -10px; }
#header { position: relative;  }

/*main*/
.display_home  { display: none; }
.display_ipad { display: block; width: 100% }
.home_text { display:run-in;}
.display_iphone { display: none; }
#buttons { display: none; }
#main .display img { width:994px; height:443px;}
#main { padding: 10px 0 13px; }

.home-text { position:relative; width: 100%; height: auto; }
.home-text div { position:relative; top:0; margin-bottom: 20px; }
#leistungen .content .block img { float: left; margin-left: 30px; margin-right: 10px; display: block; }
#footer { width: 100%; }
}


/* iPad Vertical */
@media screen and (width:768px) {
	
/*header*/
#header { width: 748px; }
#logo { left: -10px; top: 34px; }
#logo a span { background: url(../images/rh_logo.gif) no-repeat top center;  width: 70px;  }

/*main*/
.display {width:748px;}
#main .display img { width:748px; height:334px;}
#main .main-block {  float: none; width: 100%; }
#main .hr { display: none; } 
.main-form { width: 408px; float: left;}
.agentur { margin-top: 20px; margin-left: 242px; }

/*Home Index*/
.display_home  { display: none; }
.display_ipad, .display_ipad img { display: block; width: 748px; }
.home_text { display:run-in;}
.display_iphone { display: none; }




/*allgemein Referenzen*/
.reference .empty { display: none; }
.reference .ref-text { background: none repeat scroll 0 0 #EEEEEE; border: 1px solid #D6D6D6; float: none; margin: 16px 0 16px; padding: 8px; text-shadow: 0 1px 0 #FFFFFF; width: auto; }
.reference .none { background: none; border: none; float: none; margin: 16px 0 16px; padding: 0; text-shadow: none; width: auto; } 
.reference .ref-images img { float: left; display: block;  width: 182px; height: 182px; margin-right: 4px;  margin-bottom: 4px;  } 
.reference { display: block; } 
.reference .ref-images  { display: block; overflow: hidden; float: none; } 
.reference .ref-images img.last { margin-right: 0; margin-bottom: 0; } 

/*Corporate Design Referenzen*/
.ref-corporate .left { background: none repeat scroll 0 0 #EEEEEE; border: 1px solid #D6D6D6; float: none; margin: 16px 0 16px; padding: 8px; text-shadow: 0 1px 0 #FFFFFF; width: auto;  display: block; }
.ref-corporate .right img { display: block;  }
.ref-corporate .right { display: block; float: none;  overflow: hidden; }
.ref-corporate .nav a img  { border: none; }

}

/* iPad Horizontal */
@media screen and (width:1024px) {
#header { width: 1004px;  }
#main .main-block { float: left; width: 314px; }
}

/* undefinierter Zwischenraum */
@media screen and (min-width:480px) and (max-width:768px) {
.display_home  { display: none; }
.display_ipad, .display_ipad img { display: block; width: 748px; }
.home_text { display:run-in;}
.display_iphone { display: none; }
#WE, #OM, #WD, #CD { display: none; }
}

@font-face {
	font-family: 'GothamBook';
	src: url('../fonts/gotham-book-webfont.eot');
	src: local('GothamBook'), url('../fonts/gotham-book-webfont.woff') format('woff'), url('../fonts/gotham-book-webfont.ttf') format('truetype'), url('../fonts/gotham-book-webfont.svg#webfontbwGQWwTp') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GothamMedium';
	src: url('../fonts/gotham-medium-webfont.eot');
	src: local('GothamMedium'), url('../fonts/gotham-medium-webfont.woff') format('woff'), url('../fonts/gotham-medium-webfont.ttf') format('truetype'), url('../fonts/gotham-medium-webfont.svg#webfontbwGQWwTp') format('svg');
	font-weight: bold;
	font-style: bold;
}