/*
BREAKPOINTS
10	720	900	1200
*/

/* GLOBAL STYLES */

@media screen and (min-width: 10px) {
body{font-size:94%;font-family:Verdana,Geneva,sans-serif;margin:4px;}
}

@media screen and (min-width: 320px) {
body{font-size:96%;}
}

@media screen and (min-width: 480px) {
body{font-size:98%;}
}

@media screen and (min-width: 600px) {
body{font-size:100%;}
}

@media screen and (min-width: 1200px) {
body{font-size:104%;}
}

/* STRUCTURAL DIV STYLES */

#container{box-sizing:border-box;background-color:#fff;max-width:1420px;overflow:hidden;height:100%;}

@media screen and (min-width: 10px) {
#container{border-bottom-left-radius:.6em;border-bottom-right-radius:.6em;}
}

#header{background-color:#fff;width:100%;overflow:hidden;box-sizing:border-box;}
#logo{background-color:#fff;float:left;padding:3px;}
#logo img{vertical-align:top;}

.whyjoin{padding:8px;border-radius:0.4em;height:70px;margin-left:20px;text-align:center;border:1px solid black;background-color:#efefef;}

.whyjoin h4{margin:0;color:#a51818;}

/* HEADER/LOGO SCREEN SIZES */

@media screen and (min-width: 10px) {
#header{height:auto;padding:5px 0px;}
#logo{text-align:center;}
#logo img{width:100%;height:auto;max-width:353px;}
.whyjoin{display:none;}}

@media screen and (min-width: 480px) {
#logo{text-align:left;}
}

@media screen and (min-width: 1050px) {
.whyjoin{display:block;float:left;max-width:280px;font-size:0.7em;margin-left:95px;}
}

@media screen and (min-width: 1150px) {
.whyjoin{max-width:350px;}
}

@media screen and (min-width: 1250px) {
.whyjoin{max-width:450px;}
}

@media screen and (min-width: 1400px) {
.whyjoin{max-width:600px;margin-left:125px;}
}

/* HORIZONTAL MENU */

#horizontal-menu{box-sizing:border-box;}
#horizontal-menu ul li.active{background:#F2EBDE;border:solid 1px #BFB5A4;box-shadow:inset 0 0 0 1px #fff;text-shadow:1px 1px 0 rgba(255,255,255,.9);}
#horizontal-menu ul li a{text-decoration:none;color:#1C1C1C;}
#horizontal-menu ul li a:hover{color:#BFB5A4;text-shadow:1px 1px 0 rgba(255,255,255,.9);}
#horizontal-menu ul li.active a{color:#403B31;}
#header #horizontal-menu ul li.active:hover{border:solid 1px #1C1C1C;}

@media screen and (min-width: 10px) {
#horizontal-menu{display:none;}
}

/* top right horizontal menu appears */
@media screen and (min-width: 670px) {
#horizontal-menu{background-color:#fff;display:block;float:right;text-align:left;font-size:80%;width:26%;max-width:275px;min-width:255px;border-radius:.6em;border:1px solid silver;}
#horizontal-menu ul{margin-left:-25px;}
#horizontal-menu ul li{display:inline;padding:4px;margin:0 3px;}
}

@media screen and (min-width: 1050px) {
#horizontal-menu{font-size:90%;}
}

/* MID BAR */

#mid-bar, #mid-bar-member-links, #mid-bar-menu-button{box-sizing:border-box;}
#mid-bar{width:100%;background-color:#000;}

#mid-bar-member-links{float:left;}

a.menu-link, a.member-link{display:inline-block;color:#fff;background:#A51818;text-decoration:none;}

a.menu-link{float:right;text-transform:uppercase;letter-spacing:0.1em;}

a.menu-link:hover, a.menu-link:focus, a.member-link:hover, a.member-link:focus{background-color:#c84444;}

a.member-link.active{font-weight:bold;border:1px solid silver;}

@media screen and (min-width: 10px) {
#mid-bar{height:42px;}
#mid-bar-member-links{display:none;}
.menu-pipe{display:none;}
a.menu-link, a.member-link{padding:0 8px;font-size:14px;line-height:32px;height:32px;border-radius:2px;margin:4px 3px;}
a.menu-link{font-weight:bold;}
.member-name{display:none;}
}

@media screen and (min-width: 320px) {
#mid-bar-member-links{display:block;margin-left:5px;}
a.login-problems{display:none;}
}


@media screen and (min-width: 460px) {
a.login-problems{display:inline-block;}
}

/* menu button disappears, mid-bar links go to normal underlined hyperlinks */
@media screen and (min-width: 720px) {
#mid-bar{height:30px;border-top-left-radius:.4em;border-top-right-radius:.4em;}
#mid-bar-member-links{float:right;color:#fff;}
.menu-pipe{display:inline;}
a.menu-link, a.member-link{background:#000;padding:0;margin:0px 1px;line-height:30px;height:30px;}
a.sign-up{font-weight:bold;}
.member-name{display:inline;color:yellow;font-size:14px;}
a.login-problems, a.your-account{margin-right:8px;}
a.menu-link:hover, a.menu-link:focus, a.member-link:hover, a.member-link:focus{color:#fff;background-color:#000;text-decoration:underline;}
a.menu-link{display:none;}
}

@media screen and (min-width: 900px) {
a.menu-link, a.member-link, .member-name{font-size:16px;}
}

/* LEFT MENU */

#left-menu{box-sizing:border-box;}

/* LEFT MENU SCREEN SIZES */

@media screen and (min-width: 10px) {
#left-menu{width:100%;font-size:130%;text-align:center;background-color:#fff;}
#left-menu ul{line-height:1.8em;list-style-type:none;margin:0;padding:0;}
#left-menu ul li{background-color:#eee;border-bottom:1px solid #ddd;border-radius:.3em;margin:1px;}
#left-menu ul li a{display:block;text-decoration:none;color:#222;}
#left-menu ul li:hover{text-decoration:none;}
#left-menu ul li:hover a{background-color:#ddd;color:#555;}
#left-menu h3{display:none;}
#left-menu .narrow-no{display:none;}
#left-menu .menu-twitter{display:none;}
}

@media screen and (min-width: 720px) {
#left-menu{float:left;height:100%;padding-left:6px;text-align:right;width:32%;background-color:#A51818;font-size:96%;border-bottom-right-radius:.6em;border-bottom-left-radius:.6em;}
#left-menu ul li{border-left:none;border-right:none;border-top:none;border-bottom:none;margin-right:5px;background-color:#A51818;}
#left-menu ul li a{border-radius:.2em;border:none;letter-spacing:1px;margin:2px 4px 1px 0;line-height:25px;padding-right:4px;color:#fff;}
#left-menu ul li:hover a{background-color:#820202;color:#fff;}
#left-menu li.top{display:none;}
#left-menu h3{display:block;color:#c9c9c9;margin-left:5px;text-align:left;font-size:104%;border-bottom:1px solid #fff;}
#left-menu .narrow-no{display:block;}
#left-menu .wide-no{display:none;}
#left-menu .menu-twitter{display:block;text-align:center;margin:3px;}
}

@media screen and (min-width: 900px) {
#left-menu{width:26%;font-size:95%;}
}

@media screen and (min-width: 1200px) {
#left-menu{width:20%;}
}

/* MAIN CONTENT */

#content{clear:both;vertical-align:top;overflow:auto;background-color:#fff;box-sizing:border-box;height:100%;padding:0 .7% .7% 1%;border-right:1px solid silver;}
#content blockquote p{border-left:3px solid #98AFC7;padding-left:8px;}
#content p{line-height:1.8em;}
#content ul,#content ol, #content dl{line-height:1.8em;}
#content h1.bordered,#content h2.bordered,#content h3.bordered,#content h4.bordered {border-bottom:thin solid #A51818;}

/* CONTENT SCREEN SIZES */

@media screen and (min-width: 10px) {
#content{width:100%;border-right:1px solid silver;border-left:1px solid silver;}
#content h1{font-size:120%;}
#content h2{font-size:110%;}
#content h3{font-size:100%;}
#content h4{font-size:90%;}
}

@media screen and (min-width: 720px) {
#content{float:right;width:68%;border-left:none;min-height:2100px;}
}

@media screen and (min-width: 900px) {
#content{width:74%;}
#content h1{font-size:165%;}
#content h2{font-size:145%;}
#content h3{font-size:125%;}
#content h4{font-size:115%;}
}

@media screen and (min-width: 1200px) {
#content{width:80%;}
}

/* FOOTER AND GUTTER */

#footer{box-sizing:border-box;font-size:.85em;width:100%;background-color:#A51818;overflow:hidden;text-align:center;color:#fff;padding:8px;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em;}
#footer a{color:#fff;text-decoration:none;}
#footer a:hover{text-decoration:underline;}
#gutter{box-sizing:border-box;font-size:.9em;width:100%;max-width:1420px;background-color:#fff;text-align:center;padding:8px;}

/* FOOTER AND GUTTER SCREEN SIZES */

@media screen and (min-width: 10px) {
#footer .narrow-no{display:none;}
}

@media screen and (min-width: 720px) {
#footer .narrow-no{display:inline;}
}

/* CUSTOM STYLES */

H1,H2,H3,H4,H5,H6{border-bottom:thin solid #000;color:#369;}

.boxed{box-sizing:border-box;background-color:#efefef;padding:6px;border:1px solid gray;border-radius:0.6em;text-align:center;}

.links{box-sizing:border-box;margin-bottom:22px;font-size:1.05em;padding:4px;border:1px solid silver;border-radius:0.6em;border-radius:0.6em;line-height:1.7em;box-shadow:5px 5px 5px #ccc;}
.links A{text-decoration:underline;}
.links A:hover{text-decoration:none;}
.links .active{font-weight:bold;background:white url(graphics/bergundy-arrow.gif) no-repeat scroll 0% 50%;padding-left:10px;}

.comment{box-sizing:border-box;border:1px solid silver;border-radius:0.5em;background-color:#EFEFEF;padding:5px;}
.comment p{margin-top:0px;margin-bottom:0px;}

.promo{width:auto;border:1px solid black;border-radius:0.6em;margin:5px auto 8px auto;}
.promo table tr td{width:25%;}
.promo table tr.images{text-align:center;}
.promo table tr.description{font-size:0.8em;font-weight:bold;text-align:center;}
.promo-quote{background-color:#ff9;width:60%;margin:3px auto 3px auto;border-radius:0.5em;color:#666;font-size:0.9em;padding:5px 22px 5px 22px;}
.button-div{margin:8px auto 8px auto;text-align:center;width:90%;}
.promo-footer{text-align:center;font-size:0.95em;margin-bottom:5px;}

.materials-box{box-sizing:border-box;margin:26px 0;}
.materials-box H3{margin-top:0px;margin-bottom:4px;color:#369;border:none;}
.materials-box .downloads{border-bottom:1px solid #dedede;font-size:0.9em;}
.materials-box .downloads a{text-decoration:none;}
.materials-box .downloads a:hover{text-decoration:underline;}
.materials-box .cover-image{vertical-align:top;}
.materials-box .description{width:100%;vertical-align:top;padding-left:5px;}
.materials-box .download-links {float:left;width:90%;}
.tags-div{margin-bottom:3px;display:inline-block;border:1px solid silver;border-radius:0.3em;padding:2px 14px;}

.bundle-links{box-sizing:border-box;border:1px solid silver;border-radius:0.6em;width:98%;margin:6px 0;}
.bundle-links .left-cell{text-align:center;width:95px;}
.bundle-links .mid-cell{background-color:#efefef;padding:0px 10px;}

.image-wrapper img, .image-wrapper-horizontal img, .image-wrapper-paypal img{margin-left:8px;}

.flashcard-box, .flashcard-box .col-1, .flashcard-box .col-2, .flashcard-box .flashcard-img{box-sizing:border-box;}
.flashcard-box{background-color:#f6f6f6;border:1px solid black;vertical-align:top;}

.sign-up-call, .sign-up-call-single{box-sizing:border-box;box-shadow:5px 5px 5px #ccc;line-height:2.1em;font-weight:bold;margin:12px 0px;padding:8px;text-align:center;border:1px solid silver;border-radius:0.6em;text-align:center;}

.language-div{box-sizing:border-box;border-left:16px solid #ccc;border-radius:0.5em 0 0 0.5em;background-color:#efefef;padding:8px;margin:15px auto;line-height:2em;font-size:1em;color:#777;position:relative;}

.language-div a{color:#777;text-decoration:none;}
.language-div a:hover{color:navy;text-decoration:underline;}

/* CUSTOM STYLES SCREEN SIZES */

@media screen and (min-width: 10px) {
.boxed{width:100%;}
.links{width:100%;margin:5px 0;}
.comment{width:100%;margin:5px 0;}
.promo{display:none;}
.materials-box{width:100%;font-size:.9em;line-height:1.4em;}
.materials-box .cover-image img{display:none;}
.materials-box .description-div, .materials-box .listening-info{display:none;}
.materials-box .tags-div{display:none;}
.materials-box .downloads{line-height:2em;font-size:1.1em;}
.materials-box .downloads img{max-width:20px;height:auto;}
.materials-box .download-links .flag, .materials-box .download-links .file{position:relative;top:3px;}
.bundle-links{width:100%;}
.flashcard-box{font-size:1em;padding:4px;width:100%;border-radius:0.6em;overflow:auto;line-height:1.4em;}
.flashcard-box .col-1, .flashcard-box .col-2{float:left;width:100%;text-align:center;}
.flashcard-box .flashcard-img img{display:none;}
.sign-up-call{width:100%;max-width:400px;}
.sign-up-call img{max-width:110px;height:auto;}
.sign-up-call-single img{max-width:150px;height:auto;}
.language-div{width:90%;}
.image-wrapper img{max-width:150px;height:auto;}
.image-wrapper-horizontal img{max-width:210px;height:auto;}
.image-wrapper-paypal img{max-width:93%;height:auto;}
}

@media screen and (min-width: 320px) {
.materials-box .cover-image img{display:inline;max-width:95px;height:auto;}
.materials-box .downloads img{max-width:22px;}
.image-wrapper-horizontal img{max-width:240px;}
}

@media screen and (min-width: 480px) {
.boxed{width:90%;margin:8px auto;}
.comment{width:90%;margin:8px auto;}
.promo{display:block;}
.promo .narrow-no{display:none;}
.promo tr.images img{max-width:120px;height:auto;}
.materials-box{font-size:0.9em;line-height:1.5em;}
.materials-box .cover-image img{max-width:135px;}
.materials-box .downloads img{max-width:24px;}
.materials-box .download-links .flag, .materials-box .download-links .file{top:8px;}
.sign-up-call img{max-width:200px;}
.language-div{width:80%;}
.image-wrapper img{max-width:250px;}
.image-wrapper-horizontal img{max-width:370px;}
}

@media screen and (min-width: 600px) {
.promo tr.images img{max-width:100px;height:auto;}
.materials-box .cover-image img{max-width:155px;}
.materials-box .downloads img{max-width:26px;}
.materials-box .tags-div{display:block;margin-top:6px;}
.flashcard-box{font-size:1em;}
.flashcard-box .col-1, .flashcard-box .col-2{float:left;width:50%;text-align:center;}
.image-wrapper img{max-width:210px;}
.image-wrapper-horizontal img{max-width:310px;}
}

@media screen and (min-width: 720px) {
.links{width:95%;margin:8px auto;}
.promo tr.images img{max-width:130px;height:auto;}
.materials-box{font-size:.95em;line-height:1.6em;}
.materials-box .cover-image img{max-width:175px;}
.materials-box .listening-info{display:inline;}
.materials-box .downloads img{max-width:30px;}
.flashcard-box .col-1, .flashcard-box .col-2{width:100%;}
.image-wrapper img{max-width:250px;}
.image-wrapper-horizontal img{max-width:390px;}
.language-div{width:75%;}
}

@media screen and (min-width: 900px) {
.promo tr.images img{max-width:160px;height:auto;}
.materials-box{width:95%;font-size:1em;line-height:1.7em;}
.materials-box .cover-image img{max-width:210px;}
.materials-box td.cover-image{width:210px;}
.materials-box .downloads{line-height:1.5em;font-size:1em;}
.flashcard-box .col-1, .flashcard-box .col-2{width:50%;}
.bundle-links{width:90%;}
.image-wrapper img{max-width:300px;}
.image-wrapper-horizontal img{max-width:500px;}
.language-div{width:65%;}
}

@media screen and (min-width: 1024px) {
.materials-box .description-div{display:inline;}
}

@media screen and (min-width: 1200px) {
.comment{width:80%;}
.promo .narrow-no{display:inline;}
.promo tr.images img{max-width:auto;height:auto;}
.materials-box{width:95%;line-height:1.9em;}
.flashcard-box .col-1, .flashcard-box .col-2{width:35%;}
.flashcard-box .flashcard-img{display:inline;}
.flashcard-box .flashcard-img img{display:inline;max-width:200px;height:auto;}
.image-wrapper img{max-width:400px;}
.image-wrapper-horizontal img{max-width:650px;}
.language-div{width:55%;}
}

/* special pages styles */

.contact{box-sizing:border-box;background-color:#EFEFEF;border:1px solid #444;padding:5px 15px;border-radius:.4em;box-shadow:5px 5px 5px #ccc;}
.contact .button{background-color:#A51818;color:#fff;padding:3px 8px;border:2px outset #666;margin-top:4px;}
.contact h2{color:#A51818;}
.contact .input-field{background-color:#FFF;border:1px inset #000;font-family:Arial;font-size:1.2em;width:50%;font-weight:bold;color:#A51818;}
.contact .text-field{border:1px inset #000;border-radius:.3em;width:90%;}

form.search-form{background-color:#efefef;border:1px solid silver;border-radius:.4em;padding:5px;}

.sitemap{box-sizing:border-box;background-color:#efefef;border:0px;text-align:left;width:98%;padding:6px;border-radius:.3em;}
.sitemap a{border-bottom:1px dashed navy;text-decoration:none;}
.sitemap a:hover{border-bottom:1px solid navy;}
.sitemap h3{font-size:1.2em;border:none;}
.sitemap li{list-style-type:circle;}
.sitemap .left{padding:8px;width:50%;vertical-align:top;}
.sitemap .right{padding:8px;width:50%;vertical-align:top;}

.curriculum-table{width:95%;border:1px solid silver;border-radius:0.4em;line-height:1.5em;}
.curriculum-table tr td{padding:8px;}
.curriculum-table .left-col{background-color:#efefef;}
.curriculum-table .right-col{border-bottom:1px solid silver;}
.curriculum-table .red{color:red;font-weight:bold;}
.curriculum-table .saddlebrown{color:saddlebrown;font-weight:bold;}
.curriculum-table .green{color:green;font-weight:bold;}
.curriculum-table .blue{color:blue;font-weight:bold;}
.curriculum-table .orange{color:orange;font-weight:bold;}
.curriculum-table .purple{color:#90c;font-weight:bold;}
.curriculum-table .grey{color:#aaa;font-weight:bold;}

a.curriculum-link{color:inherit;text-decoration:none;}
a.curriculum-link:hover{text-decoration:underline;}

/* special pages screen sizes */

@media screen and (min-width: 200px) {
.sitemap{font-size:.9em;}
.sitemap ul{margin-left:5px;}
.sitemap ul ul{margin-left:-25px;}
form.search-form{width:98%;font-size:0.8em;}
.contact{width:96%;}
}

@media screen and (min-width: 320px) {
.sitemap{font-size:.95em;}
}

@media screen and (min-width: 480px) {
.sitemap ul ul{margin-left:-15px;}
form.search-form{width:90%;font-size:0.9em;}
}

@media screen and (min-width: 768px) {
.sitemap{font-size:1em;}
.sitemap ul{margin-left:5px;}
.sitemap ul ul{margin-left:-15px;}
form.search-form{width:80%;max-width:450px;font-size:1em;}
}

@media screen and (min-width: 900px) {
.contact{width:90%;}
}

@media screen and (min-width: 1200px) {
.sitemap ul ul{margin-left:-10px;}
form.search-form{width:70%;}
.contact{width:70%;}
}

/* HOME STYLES */

/*
top-left: top left promo div
home-div-left: div taking half screen on left
home-div-right: div taking half screen on right
bar: div taking full width across screen
embedded-div: burgundy bar on all three div types (left, right & bar)
*/

.top-left, .home-div-left, .home-div-right, .embedded-div, .bar{box-sizing:border-box;}

.top-left, .home-div-left,.home-div-right{border:1px solid silver;border-radius:0.25em;vertical-align:top;float:left;background-color:#efefef;}
.home-div-left p,.home-div-right p,.bar p{padding:5px;margin:0;}
.top-left{text-align:center;background-color:#C6D7CF;}

.top-right-table  td{text-align:center;font-weight:bold;width:33.3%;padding:6px;}

.embedded-div{background-color:#A51818;color:#fff;}

.bar{vertical-align:top;float:left;}

.video-box{border:1px solid #ccc;border-radius:0.6em;background-color:#efefef;box-shadow:5px 5px 5px #ccc;text-align:center;margin-bottom:35px;margin-left:auto;margin-right:auto;position:relative;}

.video-box iframe,
.video-box object,
.video-box embed {position:absolute;top:0;left:0;width:100%;height:100%;}

.home-div-image{float:left;margin:3px 22px 3px 3px;}


/* HOME PAGE SCREEN SIZES */

@media screen and (min-width: 10px) {
.top-left, .home-div-left, .home-div-right{height:auto;width:98%;}
.top-left, .home-div-left,.home-div-right,.bar{margin:5px .5%;font-size:1em;}
.top-left p, .home-div-left p,.home-div-right p,.bar p{line-height:1em;}
.home-div-left ul, .home-div-right ul, .bar ul{list-style-type:circle;line-height:1.6em;margin:0;}
.embedded-div{width:100%;height:30px;border-top-right-radius:.15em;border-top-left-radius:.15em;padding:8px 8px;font-size:0.8em;font-weight:bold;}
.top-right-table{border:1px solid black;width:100%;box-sizing:border-box;}
.top-right-table td.third{display:none;}
.bar{width:98%;margin:5px .5%;border:1px solid silver;border-radius:0.25em;}
.bar h2{margin:2px 5px;}
.wide-list-content, .wide-paragraph-content, .wide-span-content{display:none;}
}

@media screen and (min-width: 320px) {
.video-box{width:98%;height:0;overflow:hidden;padding-top:30px;padding-bottom:56%;}
}

@media screen and (min-width: 375px) {
.embedded-div{font-size:0.88em;}
}

@media screen and (min-width: 410px) {
.embedded-div{font-size:0.95em;}
}

@media screen and (min-width: 550px) {
.top-right-table td.third{display:table-cell;text-align:center;font-weight:bold;width:33.3%;}
}

@media screen and (min-width: 720px) {
.top-right-table td.third{display:none;}
}

@media screen and (min-width: 768px) {
.video-box{width:95%;padding-bottom:50%;}
}

/* bottom of div links change from block display <li> to in-line 'bubbles' */
@media screen and (min-width: 900px) {
.top-right-table td.third{display:table-cell;}
.narrow-span-content{display:none;}
.video-box{width:95%;padding-bottom:45%;}
}

/* divs go from full width to half width */
@media screen and (min-width: 1100px) {
.home-div-left p,.home-div-right p,.bar p{line-height:1.2em;}
.home-div-left,.home-div-right, .bar{font-size:1em;}
.embedded-div{font-size:0.92em;}
.top-left, .home-div-left, .home-div-right{width:49%;float:left;}
.top-right-table td.third{display:none;}
.bar{width:97%;}
}

@media screen and (min-width: 1200px) {
.top-left, .home-div-left, .home-div-right{font-size:1.03em;}
.top-right-table td.third{display:table-cell;}
.wide-list-content{display:list-item;}
.wide-paragraph-content{display:block;}
.wide-span-content{display:inline;}
.video-box{width:95%;padding-bottom:40%;}
}