/* -------------------------------------------------------------- 
	
	layout.css	
	* Lays out the main page structure and design.
	
-------------------------------------------------------------- */

html, body {
	height: 100%;

	}

	body {
		background: #0a1d25 url(../../img/layout/bg-body.png) top center repeat-y;
		text-align: center;
		color: #373737;
		
		width:100%;
		overflow-x:hidden;
height: 100%;
display: block;
		}

		#background {
			position: relative;
			margin: 0 auto;
			min-height: 100%;
			width:100%;
			max-width: 1600px;
			overflow-x:hidden;
			background: #fff url(../../img/layout/bg-sublevel.png) top center no-repeat;
			}

		#envelope {
			position: relative;
			margin: 0 auto;
			padding: 236px 0 0 0; 
			max-width: 960px;
			width: 100%;
			text-align: left;
			}

			#logo {
				position: absolute;
				top: 33px;
				left: 0;
				}
				
				#logo a {
					display: block;
					width: 157px;
					height: 56px;
					background: url(../../img/logo-bayring.png) top left no-repeat;
				}

				#logo span {
					display: none;
				}

			#constants {
				position: absolute;
				top: 27px;
				right: 12px;
				}

			#search {
				position: absolute;
				top: 44px;
				right: -1px;
				width: 208px;
				height: 47px;
				background: url(../../img/layout/bg-search.png) top left no-repeat;
				}
				
				#search form { }

					#search fieldset {
						border: none;
						}
						
						#search label {
							display: none;
						}
	
						input#searchField {
							float: left !important;
							padding-left: 4px;
							width: 156px !important;
							height: 28px;
							background: none;
							border: none;
							font-weight: bold;
							text-shadow: #02253a 0 2px 2px;
							color: #0e99cd;
							color: #65c3e6;
							}
							
							input#searchField {
								padding-top: 8px;
								height: 20px;
							}

						input#searchButton {
							float: left !important;
						}

			#levelOneNavigation {
				position: absolute;
				top: 44px;
				right: 207px;
			}

			#sublevelNavigation {
				position: absolute;
				top: 237px;
				left: 20px;
				width: 166px;
			}

			.content {
				overflow:auto;
				padding-bottom: 39px;
				}  /* must be same height as the footer */
				
				#breadbrumbs {
					position: absolute;
					top: 139px;
					left: 16px;
				}

				#header {
					position: absolute;
					top: 188px;
					left: 20px;
					}
					
					h1#header {
						font-size: 3.6em;
						font-weight: bold;
						color: #0067aa;
					}

				#contentArea {
					margin: 0 0 8px 20px;
					padding: 16px 0 0 191px;
					width: 491px;
					border-top: 1px solid #cccccc;
					}

				#focusAreas { }
					
					#phoneLink {
						position: absolute;
						top: 180px;
						right: 25px;
						}
						
						#phoneLink a {
							display: block;
							width: 176px;
							height: 40px;
							background: url(../../img/content-design/bg-phone.png) top left no-repeat;
							}
							
							#phoneLink a:hover {
								
							}
							
							#phoneLink span {
								display: none;
							}
							
					#focusAreas ul {
						position: absolute;
						top: 234px;
						right: 15px;
					}
						

			#footer {
				clear:both; 
				position: relative;
				margin: 0 auto;
				margin-top: -39px; /* negative value of footer height */
				/*min-width: 960px;*/
				
			max-width: 1600px;
				width: 100%!important;
				height: 39px;
				background: url(../../img/layout/bg-footer.gif) top left repeat-x;
			}
#footerNavigation{
	max-width: 960px!important;
				width: 100%!important;
}
			#art { }
			
			
			ul.children
			{ display: none; }
			 
			.current_page_item ul.children,
			.current_page_ancestor ul.children,
			.current_page_parent ul.children 
			 
			{ display: block; }



/* LL New Classes */
.leftbr{
float: left;
position: relative!important;
top: 0!important;
left: 0!important;
margin: 0 0px 0 20px;
border-top: 1px solid #cccccc;
padding: 0 20px 0 0px;}

#contentArea {
margin: 0 0 8px 0px;
padding: 16px 0 0 5px;
max-width: 491px;
width:94%;
border-top: 1px solid #cccccc;
float: left;
}


#focusAreas ul {
position: relative;
top: 0;
right: 0;
float: left;
margin: 0 5px 0 20px;
}


/* sidemenu style */
.selectnav,
.selectnav1,
.selectnav2{ display: none; }



/* landscape tablets larger */


@media screen and (min-width: 901px) and (max-width: 1280px) {

	
	
	
}


/* portrait tablets */
@media screen and (max-width: 900px) {
	#envelope {max-width:100%; width:100%; min-width:100%; }
	
	#footerNavigation{
		min-width:10px;
		width:96%;
		margin:0 auto;
	}
	
	
	#header {
position: relative;
top: 0;
left: 0;
margin: -4px 0 20px 9px;
}

	
#contentArea {
margin: 0 0 8px 0px;
padding: 16px 0 0 0px;
max-width: 420px;
width: 47%;
border-top: 1px solid #cccccc;
float: left;
}

#levelOneNavigation ul a {
padding: 12px 8px 4px 8px!important;
font-size: 14px!important;
}

#logo {
left: 23px;
}

#levelOneNavigation {
margin-top: 0px!important;
}

.content #sublevelNavigation {


}

#focusAreas ul {
	margin-left:3px;
}

#footer {
MAX-WIDTH: 100%!important;
width: 100%;
min-width: 100%;
height: auto;
background: url(../../img/layout/bg-footer.gif);
background-size: cover;

}

#footerNavigation {
margin: 0 auto!important;
width: 95%!important;
line-height: 15px!important;
text-align: center!important;
}
#footerNavigation ul {
display: block!important;
}

.leftbr{
max-width: 135px;
margin-left: 10px;
}

#sublevelNavigation ul a {
padding: 12px 0 6px 12px!important;
font-size: 1.25em
}
	
	
	
div.callout {
background: url(../../img/content-design/bg-grid-2.png) repeat!important;
}

	
	
	div#offerings ul{
margin-left: 18%;
max-width: 98%;
overflow-x: hidden;
height:auto!important;
}


	#offerings ul li {
margin-right: 15px;
margin-top:10px;
}

}


/* small screen */
@media screen and (max-width: 748px) {
	#envelope {max-width:100%; width:100%; min-width:100%; }
	
	#footerNavigation{
		min-width:10px;
		width:96%;
		margin:0 auto;
	}
	
	
	#header {
position: relative;
top: 0;
left: 0;
margin: -4px 0 20px 9px;
}

#breadbrumbs {
position: absolute;
top: 137px;
left: 4px;
font-size: 8px;
}
#contentArea {
margin: 0 0 8px 0px;
padding: 16px 0 0 5px;
max-width: 491px;
width:94%;
border-top: 0px solid #cccccc;
float: left;
}



  .js #leftNav,
  .js #top_links,
  .js #top_links1{ display: none; }
  .js .selectnav {
	  
display: block;
min-width: 300px!important;
font-size: 1.4em;
font-weight: bold;
text-decoration: none;
color: #464646;
border-bottom: 0px!important;
margin-bottom: 10px;
width: 90%!important;
}
.menu-top-menu-container .selectnav {display: block;
display: block;
background: #042a51;
font-size: 27px;
font-weight: bold;
text-decoration: none;
color: #0d74b8;
border: 1px #0d74b8 solid!important;
min-width: 60px!important;
width: 60px!important;
float: right;
margin: -20px 0px 3px 0px;
height: 46px;
}
.menu-main-menu-container .selectnav{
	display: block;
/* min-width: 280px!important; */
background: url(../../img/navigation/bg-ul.png) top left repeat-x;
font-size: 1.4em;
font-weight: bold;
text-decoration: none;
color: #fff;
border: 0px #0d74b8 solid!important;
display:block;
min-width: 75px!important;
width:75px!important;
float: right;
margin: 0px -1px 3px 0px;
height: 48px;
}

.menu-main-menu-container .selectnav option{
height: 48px;
display:block;
}

levelOneNavigation {
padding-left: 7px;
height: 47px;
top: 78px;
background: transparent;
}

#logo {
left: 23px;
}

#levelOneNavigation {
margin-top: 45px!important;
}

.content #sublevelNavigation {
position: relative;
top: 0;
left: 12px;
width: 79%;
float: left;
display: block;
}

#focusAreas ul {
float: none;
margin: 0 auto;
clear: both;
}

#footer {
MAX-WIDTH: 100%!important;
width: 100%;
min-width: 100%;
height: auto;
background: url(../../img/layout/bg-footer.gif);
background-size: cover;

}

#footerNavigation {
margin: 0 auto!important;
width: 95%!important;
line-height: 15px!important;
text-align: center!important;
}
#footerNavigation ul {
display: block!important;
}

input#searchField{
	width: 100px !important;
}
#search {
top: 89px!important;
right: -1px!important;
width: 152px!important;
}


.menu-main-menu-container{
	margin-top: 11px!important;
margin-right: -56px!important;
}



}


@media screen and (min-width: 661px) and (max-width: 748px) {
	#contentArea {
margin: 7px 0 8px 0px;
padding: 16px 0 0 21px;
max-width: 650px;
width: 94%;
}
	
}


@media screen and (max-width: 530px) {
	
	
	div#offerings ul{
margin-left: 18%;
max-width: 98%;
overflow-x: hidden;
height:auto!important;
}


	#offerings ul li {
margin-right: 15px;
margin-top:10px;
}

div.promos {
margin-bottom: 20px!important;
width: 98%!important;
}
div.promo {
width: 100%!important;
}


#promoLinks ul li {
float: left!important;
position: relative!important;
width: 66px!important;
height: 62px!important;
background: url(../../img/homepage/bg-promolink.png) top  no-repeat!important;

	text-indent: -999999%!important;
	text-align:left;
	display:inline-block;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}

#promoLinks ul a {
padding: 0!important;
height: 48px!important;
font-size: 1px!important;
text-shadow: #0a5478 0 0 0!important;
color: transparent!important;
/* text-indent: -10000px; */
}
#promoLinks {
left: 19%!important;
}

#promoLinks ul li#networking {
right: -8px!important;
}

#promoLinks ul li#collocation {
right: -12px!important;
}


}

@media screen and (max-width: 460px) {

#promoLinks ul li {
float: left!important;
position: relative!important;
width: 66px!important;
height: 62px!important;
background: url(../../img/homepage/bg-promolink.png) top  no-repeat!important;

	text-indent: -999999%!important;
	text-align:left;
	display:inline-block;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}

#promoLinks ul a {
padding: 0!important;
height: 48px!important;
font-size: 1px!important;
text-shadow: #0a5478 0 0 0!important;
color: transparent!important;
/* text-indent: -10000px; */
}
#promoLinks {
left: 14%!important;
}

#fbLike {
position: absolute;
bottom: 0!important;
right: 0;
top: auto!important;
}


div.promos {
margin-bottom: 20px!important;
width: 98%!important;
}
div.promo {
width: 100%!important;
}

}

/*******************************************************************************************

TITLE: the genius development framework

VERSION: 1.0.0
URI: http://www.geniusswitchstudio.com/
AUTHOR: Christian Alexander Seeber, Principal + User Experience Architect
COPYRIGHT: 2009 genius switch studio llc

DESCRIPTION: HTML/CSS/JS Framework or Repository created by genius switch studio
in order to streamline all builds. HTML Structure is always the same, 
CSS Structure is always the same, jQuery drives everything. 

**********************************************************************************************/
