/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain) */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, em, img, q, s, small, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit; vertical-align: baseline;}
/* HTML5 reset */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1.2;} 
body {color: #003366;background: #69C;font-family: Arial, sans-serif;font-size: 0.750em;background-image: linear-gradient(to bottom, #6699cc, #336699);}
@font-face {font-family: 'fontleroybrownregular'; src: url('fonts/FontleroyBrown-webfont.eot?') format('embedded-opentype'), url('fonts/FontleroyBrown-webfont.woff') format('woff'), url('fonts/FontleroyBrown-webfont.ttf') format('truetype'), url('fonts/FontleroyBrown-webfont.svg') format('svg'); font-weight: normal;font-style: normal;}
h1, h2, h3, h4, .view {font-family: 'fontleroybrownregular', 'Arabic Typesetting', 'Arial Narrow';}
h1 {font-size:4em;}
h2 {font-size:3em;}
h3 {font-size:2.5em; margin-top: 1em;}
h4 {font-size:2em;}
.view {font-size:2.5em;}  
p {padding: .5em;}
ol {list-style: none;}
ul {list-style: square; padding:.1em 0 .8em 3.5em;}
.a {font-variant: small-caps;} 
.am a, .amr a, .soon {display: block;padding: .6em;}
.am a {width: 10em;}
.amr a {width: 4em;}
.am, .amr {margin: .5em 0 0 0;}
.amr {float:right; text-align: right;}
.intro {text-align: center;}
.intropod {margin: 1em auto; max-width: 68em;}
.container {position:relative;width: 94%;margin: .6em auto 1.25em auto;background: #deeeff;border: .3em dotted #65a690;
padding: .5em;box-shadow:0 .5em 1em 0 rgba(0,0,0,0.4),0 .4em 1.3em 0 rgba(0,0,0,0.3);}
.Enid {width: 800px; max-width: 98%;}
.top {position: relative;width: 100%;}
.pod {width: 25%;margin: .8em auto;}
.picpod {width: 24%;margin: .8em auto;}
.picpod img, .intro img, .ks {display:block;max-width: 100%;box-shadow:0 .5em 1em 0 rgba(0,0,0,0.4),0 .4em 1.3em 0 rgba(0,0,0,0.3);margin: 0 auto;}
.clr {clear: both;}
.clr1 {clear: both;padding: 1em 0 0 0;}
.clrdos {clear: both; padding: 2em 0 2em 0;}
.toprightsmall {position:relative;float: right; width: 163px;height: 175px;background: #036;margin: 5px 15px 0 0;
padding: 13px 7px 1px 7px;border-radius: .4em;background-image: linear-gradient(to bottom, #003366, #3366cc);}
.toprightsmall img {margin: 0 0 0 .5em;height: 161px;width: 150px;}
.thb {border-style: dotted;border-color: #65a690;border-width: 0 0 6px 0;}
.main {max-width: 50em;margin: .6em auto;padding: .6em .6em .6em 4%;border-style: dotted;border-color: #65a690;border-width: 0 0 0 6px;}
.soc {margin: 2em; max-width: 4em;}
.socw {margin: 2em; max-width: 8em;}
.bold {font-weight:bold;} .boldbig {font-weight:bold; font-size:115%;} .it {font-style: italic;} .sm {font-size: 80%;}
a {color: #006699;text-decoration: none;}
.myvid {margin: 0 auto; max-width: 1280px;}
.embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; height: auto; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


@media only screen and (max-width: 300px) {
.container {width: 84%; margin: 8px auto 20px auto;}
.pod {width: 94%;}
.picpod {width: 94%;}
.Enid {width: 96%;}}
@media only screen and (min-width: 301px) and (max-width: 480px) {.container {width: 88%; margin: 8px auto 20px auto;}
.podone {width: 96%;}
.picpodone {width: 96%;}
.pod {width: 96%;}
.picpod {width: 96%;}
.Enid {width: 96%;}}
@media only screen and (max-width: 800px) {body {font-size: 0.813em;}h1 {font-size:3.4em;}}

@media only screen and (min-width: 481px)and (max-width:800px){
.container {width: 90%; margin: 8px auto 40px auto;}
.pod {width: 46%;float: left;margin: 6px 0 0 0;}
.picpod {width: 46%;float: left;margin: 6px 6px 0 0;}}

@media only screen and (min-width: 801px) {body {font-size: 0.813em;}.am {clear:both;position: absolute; top: 0; left:0;}
.amr {clear:both;position: absolute; top: 0; right:0;}.pod {float: left;margin: 6px 0 0 0;}.picpod {float: left;margin: 6px 6px 0 0;}}
@media screen and (min-width: 900px) {body {font-size: 0.875em;}}
@media screen and (min-width: 1200px){body {font-size: 1em;}.container {width: 96%;}.intro {padding:0 0 2em 0;}}
@media screen and (min-width: 1451px) and (max-width: 1590px) {.pod {width: 24%; margin: 15px 10px 24px 30px;}.picpod {width: 310px;}}
@media screen and (min-width: 1591px) and (max-width: 1800px) {body {font-size: 1.1em;}.container {padding: 10px 10px 100px 10px; border: 4px dotted #65a690;}.pod {margin: 15px 15px 5px 30px; width: 26%;}.picpod {width: 310px;}}
@media screen and (min-width: 1801px) {body { font-size: 1.1em;}.container { padding: 10px 10px 100px 10px; border: 6px dotted #65a690;}.pod { margin: 15px 15px 5px 26px; width: 29%;}.picpod { width: 312px;}}
@media screen and (min-width: 1981px) {body {font-size: 1.3em;}.container { border: 8px dotted #65a690;}.pod {width: 18.5%; min-height: 350px; float: left; margin: 0 10px; padding: 14px 1% 14px 1%;}.picpod {width: 340px; height: 350px; float: left; margin: 0; padding: 14px 0 14px 0;}}
@media screen and (min-width: 2400px) {body {font-size: 1.5em;}}
@media screen and (min-width: 3000px) {body {font-size: 2.1em;}.container {border: 10px dotted #65a690;}.pod { width: 18.5%;}}
@media screen and (min-width: 3800px) {body {font-size: 2.8em;}.container {border: 15px dotted #65a690; max-width: 4000px;}
.pod { width: 21%;}}