/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.chromeframe {position: absolute; top: 0;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
html, body {font: 1.1em BrownProLight, sans-serif;}

body, select, input, textarea {color: #262552;}

a {
	color: #008dbe;
	text-decoration: none;
}
a:hover {color: #384e95;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #008dbe; color: #fff; text-shadow: none;}
::selection {background: #008dbe; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #008dbe;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}
 
/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }


html, body { 
	height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
}

strong {
	font-family: BrownProBold;
}

header {
	width: 100%;
	height: 44px;
	padding: 6px 10px 6px 10px;
	z-index: 98;
	background-image: url('../img/rays.png');
	background-repeat:no-repeat;
	background-position:right top;
	background-size: auto 100%;
	background-color: white;
	position: fixed;
}

nav {
	height: 32px;
	width: 32px;
	background-color: white;
	border: 3px solid #262552;
	padding: 0px 3px 0px 3px;
	float: right;
}

article, #menu {
	padding-top: 44px;
	max-width: 768px;
	margin: 0 auto;
}

h1{
	font-size: 1.5em;
	font-family: BrownProLight;
}
.colored{
	color:#008dbe;
}

#menu {
	height: 100%;
	width: 100%;
	padding: 44px 10px 10px 10px;
}

.submenu{
	display: none;
}

.wrapper {
	 
	overflow: hidden !important; /* FF Scroll-leiste */
	width: 100%; 
}

.wrapper-content {
	padding: 10px;
}

.text {
	padding: 20px;
	font-size: 1.1em;
}

.bg-blue {
	background-color: #262552;
	height: 100%;
}


#main-menu-button {
	display:block;
	position: absolute;
	width: 32px;
	height: 32px;
	margin: -3px 0px 0px -6px;
}

.menu-line {
	width: 100%;
	height: 3px;
	margin-top: 4px;
	background-color: #262552;
}

.menu-cell {
	min-height: 44px;
	border-top: 1px solid #008dbe;
	color: #008dbe;
	font-size: 1.2em;
	line-height: 1.6em;
	text-align: center;
	cursor: pointer;
}

.endmargin {
	margin-bottom: 10px;
}

.left {
	float: left;
	text-align: left;
}

.right {
	float: right;
	text-align: right;
}

.centered {
	text-align: center;
}

.img-centered {
	display: block;
	margin: 5px auto;
}

.box, .box-dna {
	background-color: #262552;
	padding: 12px;
	margin-bottom: 5px;
	color: white;
	
}



.box-dna {
	padding-bottom: 20px;
}

.powerhouse-name, .headline {
	font-size: 1.2em;
	line-height: 1.6em;
}

.powerhouse-country {
	font-size: 0.8em;
	color: #008dbe;
}

.powerhouse-power {
	float: right;
	font-family: BrownProBold;
	line-height: 2.3em;
	margin-right: 5px;
}

.powerhouse-details {
    background-color: #262552;
    color: white;
    left: 0px;
    top: 0px;
    width: 100%;
	display: none;
	position: fixed;
	height: 100%;
	z-index: 99;
}

#detailScrollerWrapper {
	position: absolute;
    background-color: #262552;
    color: white;
    left: 0px;
    top: 40px;
    width: 100%;
	margin: 0;
	height: 100%;
}

#detailsScroller{
	padding: 0% 5% 5% 5%;
}

.powerhouse-details div{
	margin-top: 1%;
}

#header-details-close {
	top: 0px;
	left: 0px;
	height: 40px;
	width: 100%;
	padding: 10px;
	background-color: #262552;
	margin-bottom: 15px;
	position: fixed;
	margin-top: 0;
}

.close-button {
	height: 20px;
	width: 20px;	
	background-image: url('../img/close.png');
	background-repeat:no-repeat;
	background-size: auto 100%;
	float:right;
}

.selected_projects_box{
	background-color: #262552;
	padding: 12px;
	margin-bottom: 5px;
	color: white;
}

.selected_projects_box-border {
	padding: 9px;
	margin-bottom: 5px;
	color: #262552;
	border: 3px solid #262552;
}

.box-allprojects-1, .box-allprojects-2 {
	font-size: 0.8em;
	padding: 5px 8px;
	height: 32px;
}

.box-allprojects-1 .left_column, .box-allprojects-2 .left_column{
	text-overflow: ellipsis;
	overflow: hidden; 
	width: 65%;
	white-space: nowrap; 
	float: left; 
	-o-text-overflow: ellipsis;
}

.box-allprojects-2 {
	background-color: #f4f4f4;
}

.trenner, .trenner-contact {
	background-color: #c8c8c8;
	height: 2px;
	width: 100%;
	margin: 14px 0px 11px 0px;
	padding: 1px;
}

.trenner-contact {
	background-color: #262552;
}

.label-year {
	width: 44px;
	margin: -12px auto 0 auto;
	display: block;
	background-color: white;
	color: #c8c8c8;
	text-align: center;
	font-family: BrownProBold;
	font-size: 0.8em;
	letter-spacing: 0.1em;
}

#thePowerhouse_image img{
	width: 100%;
	margin-top: 8%;
	height:66%;
}

/* Focusseite */

#focus_scroll_area
{
	padding: 10px;
}

#focus_background{
	margin: 0 auto;
	position: relative;
}

.earth-map {
	margin-bottom: 10px;
}

.location_box_left,
.location_box_right{
	width: 37%;
	height: 6%;
	position: absolute;
	cursor: default;
}

.location_box_left a,
.location_box_right a {
	color: #262552;
}

.location_box_left{
	left: 0%; /* Browserkompatibel */
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}

.location_box_right{
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}

.location_circle{
	height: 100%;
	width: 9.2%;
	background-color: #262552;
	float: left;
	-webkit-border-radius:100%; 
	-moz-border-radius:100%; 
	border-radius:100%;
}

.location_name{
	top: 50%;
	position:absolute;
	font-size: 16px;
	margin-top: -9px;
	
	float: left;
	line-height: 16px;
}
#loc_1 .location_name{
	left: 12%;
}
#loc_3 .location_name{
	left: 12%;
}
#loc_4 .location_name{
	left: 12%;
}

#loc_5 .location_name{
	right: 12%;
}

#loc_5 .location_circle{
	
	float: right;
}

#loc_6 .location_name{
	right: 12%;
}

#loc_6 .location_circle{
	float: right;
}

#loc_8 .location_name{
	left: 12%;
}

#loc_1{
	top: 22%;
	left: 12%
}
#loc_3{
	top: 70%;
	left: 21%;
}
#loc_4{
	top: 16%;
	left: 48%;
}
#loc_5{
	top: 29%;
	left: 49%;
}
#loc_6{
	top: 65%;
	left: 51%;
}

#loc_8{
	top: 72%;
	left: 50%;
}

#focus_scroll_area .box a{
	color: white;
	font-size: 1.1em;
}

#usaSubHeader{
	color: #008dbe;
}

.focus_details .text{
	padding: 0;
	font-size: 0.7em;
}

.claim {
	font-size: 1.8em;
	margin-bottom: 20px;
	font-family: BrownProBold;
}

.important {
	font-size: 1.2em;
}

.important-power {
	font-size: 1.6em;
}

.label-power {
	display: block;
	margin-bottom: 12px;
	margin-top: -6px;
}

.p5Head {
	font-size: 1.2em;
	font-family: BrownProBold;
}

.saferay-logo {
	height:24px;
	width: 99px;
	margin-top: 4px;
	background-image: url('../img/saferay.png');
	background-repeat:no-repeat;
	float: left;
}

.box-contact {
	font-family: BrownProLight;
}

.scroll_content{
	padding: 0;
	height: 100%;
	width: 100%;
}

#scroll_wrapper{
	overflow: hidden;
	width: 100%;
	height: 100%;
}

#scroller{
}

.scrolling_element{
	width: 320px;
	height: 100%;
	float: left;
}

.text-scrolling_element{
	font-size:0.9em;
	padding: 10px 20px 50px 20px;
}

.checklistdiv{
	font-size:0.9em;
	padding: 10px 10px 50px 10px;
}

.arrow-tall {
	margin-top: 10px;
	background-color: #262552;
	color: white;
	text-align: center;
	height: 64px;
	padding: 10px 10px 10px 20px;
}

.arrow-small {
	background-color: #008dbe;
	color: white;
	height: 44px;
	text-align: center;
}

.arrowstart {
	padding-left: 10px;
}

.arrowend {
	padding-right: 10px;
}

.bullets-blue {
	color: #008dbe;
	border-color: #008dbe;
	font-family: BrownProBold;
	line-height: 0.8;
	min-height: 44px;
}

.checklistBox{
	color: #008dbe;
	border: 3px #008dbe solid;
	width: 100%;
	padding: 5px 8px 5px 12px;
	margin: 0px 0px 10px 0px;
	font-size: 0.9em;
}

/* Leadership Team */

.leadership_teammember{
	float:left;
	overflow: hidden;
	height:100%;
}

.leadership_image{
	width: 100%;
}

.leadership_teammember .leadership_text{
	padding:1% 10px 10px 10px;
}

.leadership_teammember .leadership_text .team-position{
	line-height:1.0em;	
}

.leadership_teammember .leadership_text .text{
	padding:0;
	margin-top: 5%;
	font-size: 0.8em;
}

.navBar_wrapper{
	width: 100%;
	background-color: white;
	position: absolute;
	left:0;
    right:0;
    bottom: 0px;
	z-index: 99;
	height: 30px;
}

.navigation_bar{
	
	width: 186px;
	margin-top: 10px;
    margin-left:auto;
    margin-right:auto;
}

#leadership_navBar
{
}

#business_model_navBar
{
	bottom: 2%
}

.navigation_bar .circle{
	height: 13px;
	width: 13px;
	border-radius:50%;
	background-color: #c8c8c8	;
	float:left;
	margin:0 5px 0 5px;	
	border: 1px solid white;
}

.imageCrop{
	width: 100%;
	overflow: hidden;
	padding:10px 10px 0 10px;
}

/* History */

#history_wrapper{
	padding: 4%;
}

#history_wrapper .text{
	font-size: 0.9em;
	padding: 0;
}

/* Imprint */

#imprint_wrapper{
	font-size: 0.8em;
}

.impressumHeadlines{
		font-family: BrownProBold;
		margin: 25px 0px 8px 0px;
}

.haken {
		height: 29px;
		width: 28px;
		background-image: url('../img/haken.png');
		background-repeat:no-repeat;
		background-size: auto 100%;
		float: right;
}

/* Print styles!
-------------------------------------------------------------------------------*/
@media print {



}


/* Media queries!
-------------------------------------------------------------------------------*/

@media screen and (max-width: 480px) {
	
		
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {

	.saferay-logo {
		height:24px;
		width: 99px;
		margin-top: 4px;
		background-image: url('../img/saferay@2x.png');
		background-repeat:no-repeat;
		background-size: auto 100%;
		float: left;
	}
	
}