/* =Media queries
-------------------------------------------------------------- */

/* Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See http://core.trac.wordpress.org/ticket/25888.
 */
@media screen and (max-width: 700px) {


body { background:none; }
#banner_container { display:none; }
#banner_container-mobile { display:block; background-image: url(../images/top_banner-mobile-bg.png); background-repeat:repeat-x; max-height:101px; border-bottom:solid 1px #000; }
#banner_container-mobile img { max-width: 100%; height:auto; }

#whiteblock_container { display: none; }
#navbar_container { position: relative; top: 0; left: 0px; width: 100%; }

#header_container { position: relative; top: 0; left: 0; right:auto; }
#header_container_pages { position: relative; top: 0; left: 0; }

#header_container { overflow: none; display: block; margin:0; padding:50px 0 10px 1%; text-align:center; }
#header_container_pages { width: 98%; overflow: none; display: block; margin:0; padding:30px 1% 10px 1%; text-align:left; }


h1.header { margin: 0; padding: 5px 0px; }

#content_container, #content_container_home { overflow:none; margin: 0 2%; padding:0; }
.content_area { margin: 0; }

#pad, #pad_pages {display:none; }
.widthcontent { width: 100%; }

.index .brand { position: relative; margin:20px 5px 0 0; text-align:right; }


img.alignright { max-width:50%; height:auto; } 
img.alignleft { max-width:50%; height:auto;  } 

img.floatleft { max-width:50%; height:auto; }
img.FloatLeft { max-width:50%; height:auto; }
img.floatleft_content { max-width:50%; height:auto;  }
img.floatright_content { max-width:50%; height:auto; }
img.floatright { max-width:50%; height:auto; }
img.FloatRight { max-width:50; height:auto; }
img.floatright_sidebar { max-width:50%; height:auto; }

 .captcha { max-width: 95%; height: 60px; margin: 5px 0px 5px 0; }
 
div.inputfield { clear: left; font-weight: normal; padding:3px 0px; text-align:left;}
div.inputfieldn { display: none; }
input { max-width: 90%; }
label {  display:block; }
label.short1 { width: 38px; text-align: left; float:none; padding-top: 2px; padding-right: 0;  }
label.short2 { width: 30px; text-align: left; float:none; padding-top: 2px; padding-right: 0; }
label.short { width: 70px; text-align: left; float:none; padding-top: 2px; padding-right: 0; }
label.med1 { width: 110px; text-align: left; float:none; padding-top: 2px; padding-right: 0; }
label.med { width: 150px; text-align: left; float:none; padding-top: 2px; padding-right: 0; }
label.long { width: 220px; text-align: left; float:none; padding-top: 2px; padding-right: 0; }

.map iframe { width: 98%; }
.map { float:none; margin:0 0 1em 0; }


}