/* ==============================================
    Styles for computer screen bigger than 600px
   ============================================== */

/* Body Styles */
	body { background-color: white; font-family: 'PT Sans', verdana, arial, sans-serif; font-size: 11pt; height: 100%; }
	iframe { width: 600px; height: 350px; border: solid black 1px; } 
	.iframewrap { margin: 0 auto; display: block; width: 95%; }
	hr { width: 75%; padding: 0px; margin: 1em auto 1em auto; }
	.center { margin: 0px auto; display: block; }
	q { font-style: italic; }
	form { margin: 0 auto 0 auto; width: 500px; display: block; text-align: center; }


/* Font descriptions */
	h1 { color: inherit; background-color: inherit; font: italic bold 1.6em tahoma, arial, sans-serif; text-decoration: underline; text-align: center; margin: 0px auto 0.5em auto; }
	h2 { color: inherit; background-color: inherit; font-weight: bold; font-size: medium; text-align: left; margin: 15px auto 0px 8%; }
	h3 { color: inherit; background-color: inherit; font-size: small; text-align: left; margin: 2px auto 0px 2cm; } 
	a { text-decoration: none; border-bottom: dotted gray 1px; color: #24366A; background-color: inherit; }
	a:hover { text-decoration: underline; }

	small { font-size: 75%; }
	em { display:block ; font: bold medium verdana; text-align: center; margin: 5px auto 5px auto; }

/* pic rotator */
	.holder {text-align: center; vertical-align: top; color: black; }
	.holder img {border: solid black 1px; }
	.holder a {border: none; }

/* Header bar */
	.top { position:relative; width: 100%; height:100px; background:url('images/clouds.jpg') bottom left no-repeat; background-size: 100% 100px; text-align: right; }
	.logo {float: left; max-width: 100%; height: auto; width: auto\9; /* ie8 */ vertical-align: bottom; margin-left: 5%; }

/* Footer bar */
	footer { background-color: #CFCFCF; font-size: x-small; text-align: center; vertical-align: baseline; clear: both; padding: 7px; border-top: solid black 1px; border-bottom: solid black 1px; margin-top: 10px; }

/* wrapper of everything above the footer */
	.wrap { min-height: 100%; }

/* main container inside wrapper */
	.main { max-width: 1100px; height: auto; margin: 10px auto auto auto; display: block; vertical-align: top; padding: 0px; }

/* special alert box above everything */
	.alertbox { width: 85%; display: block; padding: 8px; margin: 0px auto 15px auto; border: solid red 3px; }

/* top container inside main containter */
	.mt { width: 85%; display: block; padding: 8px; margin: 0px auto 15px auto; }

	.toprowimg { display: block; height: 100%; width: 100%; vertical-align: middle; }   /* only for a single img centered on the page */
	.toprowimg img { width: auto; max-width: 95%; margin: 0em auto 0em auto; display: block; }  /* only for a single img centered on the page */

	.topwrap { display: block; height: 100%; width: 98%; vertical-align: top; } 
	.toprow1img { display: inline-block; height: 100%; width: 49%; vertical-align: middle; }
	.toprow1img img { width: auto; max-width: 90%; margin: 0em 1em 0em 0em; text-align: left; display: inline-block; }
	.toprow1text { display: inline-block; height: 100%; width: 49%; vertical-align: middle;  }
	.toprow2text { display: block; height: 100%; width: 98%; vertical-align: top; }

/* left, center, and right containers inside main containter */
	.ml, .mc, .mr { width: 32%; display: inline-block; padding: 0px; margin: 0px; vertical-align: top; }
	.mcr { width: 62%; display: inline-block; padding: 0px 10px 10px 10px; margin: 0px; vertical-align: top; }
	    .mcr ul { margin: 3px 0px 3px 8%; }

    /* special settings for .ml container */
	    .ml { background: #455868; color: white; padding: 0px 0px 0px 0px; border: solid black 1px; min-height: 345px; }
	    .ml ul a { color: white; border-bottom: dotted white 1px; }
	    .ml ul { margin: 0px 3% 0px 3%; }
	    .ads { max-width: 100%; height: auto; width: auto\9; /* ie8 */ vertical-align: bottom; border: solid black 1px; }
	    .icon { margin: 15px auto 8px 13%; vertical-align: text-bottom; }
	    .icon img { width: 38px; vertical-align: bottom; display: inline; margin: 0px 10px ; } 
	    .icon a { text-decoration: none; border-bottom: dotted gray 0px; background-color: inherit; }

/* Navbar menu */
	nav { height: 35px; width: 100%; background: #455868; font-size: 11pt; font-family: 'PT Sans', verdana, arial, sans-serif; font-weight: bold; position: relative; border-bottom: 1px solid #283744; }
	nav ul { padding: 0; margin: 0 auto; width: 820px; height: 35px; }
	nav li { display: inline; float: left; }
	nav a { color: #fff; display: inline-block; min-width: 115px; text-align: center; text-decoration: none; line-height: 35px; text-shadow: 1px 1px 0px #283744; }
	nav li a { border-right: 1px solid #576979; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding: 0em 0.5em 0em 0.5em; }
	nav li:last-child a { border-right: 0; }
	nav a:hover, nav a:active { background-color: #8c99a4; }
	nav a#pull { display: none; }

/* Email links */
	.email nav { height: auto; border: none; }
	.email nav ul { width: 90%; display: block; height: auto; }
  	.email nav li { width: 90%; float: left; display: block; }
  	.email nav li a { border: 1px solid #576979; font-weight: normal; }
  	.email nav a { text-align: left; width: 100%; text-indent: 25px; } 

/* EMF ad */
	#emf_advertisement { margin-top: 2px; text-align: center; font: x-small black calibri, verdana, sans-serif; }

/* ==========================================
    Styles for computer screen 700px to 515px
   ========================================== */

@media screen and (max-width: 700px) {
	nav { height: auto; }
	nav ul { width: 100%; display: block; height: auto; }
  	nav li { width: 50%; float: left; position: relative; }
  	nav li a { border-bottom: 1px solid #576979; border-right: 1px solid #576979; }
  	nav a { text-align: left; width: 100%; text-indent: 25px; } 
	.logo {margin-left: 2%; }
	.mt { width: 90%; display: block; padding: 8px; margin: 0px auto 15px auto; }
	.mcr { width: 95%; display: block; padding: 5px; margin: 0px auto ; vertical-align: top;  }
	.ml, .mc, .mr { clear: both; margin: 0px auto 5px auto; width: 66%; display: block; padding: 0px; }
	.ml ul { margin: 0px 6% 0px 12%; }
	.ml { background: #455868; color: white; padding: 8px 0px 10px 0px; }
	.toprow1img { display: block; height: 100%; width: 98%; }
	.toprow1text { display: block; height: 100%; width: 98%; }
	iframe { width: 450px; height: 350px; border: solid black 1px; } 
	.iframewrap { margin: 0 auto; display: block; width: 95%; }
}

/* ==========================================
   Styles for computer screen 515px and lower
   ========================================== */

@media only screen and (max-width : 480px) {
	nav { border-bottom: 0; }
	nav ul { display: none; height: auto; }
	nav a#pull { display: block; background-color: #283744; width: 100%; position: relative; }
	nav a#pull:after { content:""; background: url("images/nav-icon.png") no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; }
	.logo {margin-left: 0; }
	.mt { width: 95%; display: block; padding: 8px; margin: 0px auto 15px auto; }
	.mcr { width: 95%; display: block; padding: 5px; margin: 0px auto; vertical-align: top;  }
	.ml,.mc,.mr { clear: both; margin: 0px auto 5px auto; width: 85%; display: block; padding: 0px; }
	.ml { background: #455868; color: white; padding: 8px 0px 8px 0px; }
	.ml ul { margin: 0px 0px 0px 10%; }
	iframe { width: 350px; height: 350px; border: solid black 1px; } 
	.iframewrap { margin: 0 auto; display: block; width: 95%; }
	form { margin: 0 auto 0 auto; width: 300px; display: block; text-align: center; }
}

/* ==========================================
        Styles for Smartphone screens 
   ========================================== */

@media only screen and (max-width : 320px) {
	nav li { display: block; float: none; width: 100%; }
	nav li a { border-bottom: 1px solid #576979; }
	.logo {margin-left: 0; }
	.mt { width: 95%; display: block; padding: 8px; margin: 0px auto 15px auto; }
	.mcr { width: 95%; display: block; padding: 8px; margin: 0px auto; vertical-align: top;  }
	.ml,.mc,.mr,.holder { clear: both; margin: 0px auto 5px auto; width: 85%; display: block; padding: 5px; }
	.ml ul { margin-left: 7.5%; line-height: 200%; }
	.ml { background: #455868; color: white; padding: 8px 0px 8px 0px; }
	iframe { width: 350px; height: 350px; border: solid black 1px; } 
	.iframewrap { margin: 0 auto; display: block; width: 95%; }
}

/* =============================================================================
   HTML5 display definitions and corrections
   ========================================================================== */

/* Corrects `block` display not defined in IE6/7/8/9 & FF3. */
	article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display: block; }

/* Corrects `inline-block` display not defined in IE6/7/8/9 & FF3. */
	audio,canvas,video { display: inline-block; *display: inline; *zoom: 1; }

/* Prevents modern browsers from displaying `audio` without controls.  Removes excess height in iOS5 devices. */
	audio:not([controls]) { display: none; height: 0; }

/* Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4. Known issue: no IE6 support. */
	[hidden] { display: none; }


/* =============================================================================
  Text
   ========================================================================== */

/* Corrects text resizing oddly in IE6/7 when body `font-size` is set using `em` units.  Prevents iOS text size adjust after orientation change, without disabling user zoom. */
	html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

/* Addresses `font-family` inconsistency between `textarea` and other form elements. */
	html,button,input,select,textarea { font-family: sans-serif; }

/* Addresses margins handled incorrectly in IE6/7. */
	body { margin: 0; }


/* =============================================================================
   Links
   ========================================================================== */

/* Addresses `outline` inconsistency between Chrome and other browsers. */
	a:focus { outline: thin dotted; }

/* Improves readability when focused and also mouse hovered in all browsers. */
	a:active,a:hover { outline: 0; }

/* =============================================================================
   Typography
   ========================================================================== */

/* Addresses styling not present in IE7/8/9, S5, Chrome. */
	abbr[title] { border-bottom: 1px dotted; }

/* Addresses style set to `bolder` in FF3+, S4/5, Chrome. */
	b,strong { font-weight: bold; }
	blockquote { margin: 1em 40px; }

/* Addresses styling not present in IE6/7/8/9.  highlighting */
	mark { background: #ff0; color: #000; }

/* Addresses margins set differently in IE6/7. */
	p,pre { margin: 1em 0; }

/* Corrects font family set oddly in IE6, S4/5, Chrome. */
	code,kbd,pre,samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improves readability of pre-formatted text in all browsers. */
	pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

/* Prevents `sub` and `sup` affecting `line-height` in all browsers. */
	sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
	sup { top: -0.45em; }
	sub { bottom: -0.25em; }

/* =============================================================================
   Lists
   ========================================================================== */

/* Addresses margins set differently in IE6/7. */
	dl,menu,ol,ul { margin: 1em 0; }
	dd { margin: 0 0 0 40px; }

/* Addresses paddings set differently in IE6/7. */
 	menu,ol,ul { padding: 0 0 0 40px; }

/* Corrects list images handled incorrectly in IE7.  */
	nav ul,nav ol { list-style: none; list-style-image: none; }

/* =============================================================================
   Embedded content
   ========================================================================== */

/* Corrects overflow displayed oddly in IE9. */
	svg:not(:root) { overflow: hidden; }

/* =============================================================================
   Forms
   ========================================================================== */

/* Define consistent border, margin, and padding. */
	fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/* Corrects color not being inherited in IE6/7/8/9. Corrects text not wrapping in FF3. Corrects alignment displayed oddly in IE6/7. */
	legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px; }

/* Corrects font size not being inherited in all browsers. Addresses margins set differently in IE6/7, FF3+, S5, Chrome. Improves appearance and consistency in all browsers. */
	button,input,select,textarea { font-size: 100%; margin: 0 auto; vertical-align: baseline; *vertical-align: middle; }

/* Addresses FF3/4 setting `line-height` on `input` using `!important` in the UA stylesheet. */
	button,input { line-height: normal; }

/* Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. Corrects inability to style clickable `input` types in iOS. Improves usability and consistency of cursor style between image-type `input` and others. Removes inner spacing in IE7 without affecting normal text inputs. Known issue: inner spacing remains in IE6. */

	button,html input[type="button"],input[type="reset"],input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible; }

/* Re-set default cursor for disabled elements. */
	button[disabled],input[disabled] { cursor: default; }

/* Addresses box sizing set to content-box in IE8/9. Removes excess padding in IE8/9. Removes excess padding in IE7. Known issue: excess padding remains in IE6. */
	input[type="checkbox"],input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; }

/* Addresses `appearance` set to `searchfield` in S5, Chrome. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz` to future-proof). */
	input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

/* Removes inner padding and border in FF3+. */
	button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0; }

/* Removes default vertical scrollbar in IE6/7/8/9. Improves readability and alignment in all browsers. */
	textarea { overflow: auto; vertical-align: top; }

/* =============================================================================
   Tables
   ========================================================================== */

/* Remove most spacing between table cells. */
	table { border-collapse: collapse; border-spacing: 0; }

/* Clearfix */
	.clearfix:before, .clearfix:after {content: " "; display: table; }
	.clearfix:after {clear: both; }
	.clearfix { *zoom: 1; }