/* BREAKPOINTS NEW?
CURRENTLY, LEFT MENU COMES IN AT 720PX
< 640px
768px
1024px
1280px
1536px
*/

/* GLOBAL STYLES */

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

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

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

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

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

/* STRUCTURAL DIV STYLES */

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

@media screen and (min-width: 100px) {
#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;}

/* HEADER/LOGO SCREEN SIZES */

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

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

/* custom size! */
@media screen and (min-width: 720px) {
#header-as{float:left;display:block;margin:5px auto;max-width:468px;max-height:60px;width:468px;height:60px;}
}

@media screen and (min-width: 768px) {
#header-as{max-width:728px;max-height:90px;width:728px;height:90px;}
}

@media screen and (min-width: 900px) {
#header-as{display:none;}
}

/* custom size! */
@media screen and (min-width: 970px) {
#header-as{float:left;display:block;max-width:234px;max-height:60px;width:234px;height:60px;margin:20px 0 0 25px;}
}

@media screen and (min-width: 1200px) {
#header-as{max-width:468px;max-height:60px;width:468px;}
}

/* custom size! */
@media screen and (min-width: 1420px) {
#header-as{max-width:728px;max-height:90px;width:728px;height:90px;margin:2px;}
}

/* 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:78%;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:86%;}
}

/* MID BAR */

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

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

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

a.menu-link:hover, a.menu-link:focus, a.horizontal-site-link:hover, a.horizontal-site-link:focus{color:#29649D;background:#91BAE2;}

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

@media screen and (min-width: 10px) {
#mid-bar{height:42px;}
#mid-bar-site-links{display:none;}
a.menu-link, a.horizontal-site-link{display:inline-block;color:#fff;background:#29649D;text-decoration:none;padding:0 5px;font-size:13px;font-weight:bold;line-height:28px;height:28px;border-radius:2px;margin:5px 2px;}
}

@media screen and (min-width: 320px) {
#mid-bar-site-links{display:block;margin-left:5px;}
}

@media screen and (min-width: 355px) {
a.menu-link, a.horizontal-site-link{padding:0 8px;font-size:14px;line-height:32px;height:32px;margin:4px 3px;}
}

@media screen and (min-width: 720px) {
#mid-bar{border-top-left-radius:.4em;border-top-right-radius:.4em;}

#mid-bar-site-links{display:none;}
a.menu-link{display:none;}
}

@media screen and (min-width: 900px) {
#mid-bar{height:30px;}
}

/* LEFT MENU */

#left-menu{box-sizing:border-box;}
#left-menu ul{list-style-type:none;margin:0;padding:0;}
#left-menu h3{color:#FF9000;margin-left:5px;text-align:left;}
#left-menu ul li a{text-decoration:none;color:#fff;display:block;}
#left-menu .menu-facebook, #left-menu .menu-twitter{text-align:center;margin:3px;}

.menu-app-promo{line-height:1.5em;font-size:.8em;width:95%;border:1px solid #999;border-radius:.5em;padding:3px;margin-top:12px;}

.menu-app-promo a.apppromo{color:#0000ff;display:inline;font-size:1.1em;font-weight:bold;}

/* LEFT MENU SCREEN SIZES */

@media screen and (min-width: 10px) {
#left-menu{width:100%;font-size:120%;text-align:center;background-color:#fff;}
#left-menu ul{line-height:1.8em;}
#left-menu ul li{background-color:#eee;border-bottom:1px solid #ddd;border-radius:.3em;margin:1px;}
#left-menu ul li a{display:block;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-facebook, #left-menu .menu-twitter, #left-menu .menu-app-promo{display:none;}
}

@media screen and (min-width: 720px) {
#left-menu{float:left;height:100%;padding-left:6px;text-align:right;width:32%;background-color:#eee;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;}
#left-menu ul li a{border-radius:.2em;border:1px solid #fff;letter-spacing:1px;margin:2px 4px 1px 0;line-height:25px;padding-right:4px;}
#left-menu li.top{display:none;}
#left-menu h3{display:block;font-size:104%;}
#left-menu .narrow-no{display:block;}
#left-menu .wide-no{display:none;}
#left-menu .menu-facebook, #left-menu .menu-twitter, #left-menu .menu-app-promo{display:block;}
}

@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.9em;}
#content h1, #content h2, #content h3, #content h4, #content h5{color:#FF9000;}
#content b.exercise-number{color:#999;text-transform:lowercase;}
#content b.upper{text-transform:uppercase;}

/* 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:125%;}
#content h2{font-size:115%;}
#content h3{font-size:100%;}
#content h4, #content h5{font-size:95%;}
#content ul, #content ol, #content dl{line-height:1.9em;}
}

@media screen and (min-width: 490px) {
#content ul, #content ol, #content dl{line-height:2em;}
}

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

@media screen and (min-width: 900px) {
#content{width:74%;}
#content h1{font-size:165%;}
#content h2{font-size:148%;}
#content h3{font-size:122%;}
#content h4{font-size:115%;}
#content ul, #content ol, #content dl{line-height:2.5em;}
}

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

/* FOOTER AND GUTTER */

#footer{box-sizing:border-box;font-size:.85em;width:100%;background-color:#6699CC;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: 600px) {
#footer .narrow-no{display:inline;}
}

/* TOP LEVEL CUSTOM STYLES */

/* image-wrapper and image-shrinker, .large-image for IELTS writing images, .vocab-image for pic vocab quizzes */

@media screen and (min-width: 200px) {
.image-wrapper img{width:99%;height:auto;}
.image-shrinker img{width:60px;height:auto;}
.vocab-image img{width:65%;height:auto;}
.large-image img{width:99%;height:auto;}
}

@media screen and (min-width: 320px) {
.image-shrinker img{width:75px;}
.vocab-image img{width:70%;}
}

@media screen and (min-width: 480px) {
.image-shrinker img{width:auto;}
.vocab-image img{width:75%;}
}

@media screen and (min-width: 600px) {
.image-wrapper img{width:90%;}
.image-shrinker img{width:90px;}
.large-image img{width:98%;}
.vocab-image img{width:80%;}
}

@media screen and (min-width: 768px) {
.image-shrinker img{width:auto;}
}

@media screen and (min-width: 900px) {
.image-wrapper img{width:auto;}
.vocab-image img{width:90%;}
}

@media screen and (min-width: 1200px) {
.large-image img{width:auto;}
.vocab-image img{width:100%;}
}

/* adsense ads */

.content-top-as{box-sizing:border-box;margin-bottom:8px;}
.page-bottom-as{margin-left:5px;margin-top:5px;}
.midpage-as{}

/* adsense screen sizes */

@media screen and (min-width: 200px) {
.content-top-as{max-width:145px !important;}
.midpage-as{display:none;}
}

@media screen and (min-width: 320px) {
.content-top-as{max-width:270px !important;}
}

@media screen and (min-width: 480px) {
.content-top-as{max-width:430px !important;}
}

/* top of content adsense limited to 340px for larger screens to ensure large square ads always load to have continuity of look and feel */

@media screen and (min-width: 600px) {
.content-top-as{max-width:340px;}
.midpage-as{display:block;}
}

#content .indented{margin-left:7%;border-left:3px solid #ff9000;padding-left:8px;}

#content .links, #content .narrow-links{box-sizing:border-box;background-color:#efefef;border:3px double #ff9000;border-radius:.6em;margin:12px auto;text-align:center;line-height:2.1em;color:black;padding:10px;}

#content .links td, #content .narrow-links td{vertical-align:top;padding:12px;}

.links-to-grammar{box-sizing:border-box;background-color:#efefef;border:3px double #ff9000;border-radius:.5em;text-align:left;line-height:2em;color:black;padding-left:5px;}
.links-to-grammar P:first-letter{font-size:19px;color:#ff9000;font-weight:bold;border:0;margin:0;}
.links-to-grammar.feedback{background-image:url(graphics/feedback-icon.gif);background-repeat:no-repeat;background-position:99% 2%;}

.exam-sub-heading{color:#3388cc;}

.grammar-guide{box-sizing:border-box;background-color:#efefef;border:3px double #ff9000;border-radius:0.4em;margin:12px 0;text-align:center;line-height:1.4em;;box-shadow:3px 3px 3px #ddd}
.grammar-guide td,.grammar-guide th{padding:8px;}
.grammar-guide td.odd{background-color:#fff;}

.bookworm{background-color:#FFF;text-align:center;width:90%;margin:8px auto;border-radius:.8em;border:1px solid silver;padding:8px 0;}
.bookworm a {text-decoration:none;}
.bookworm-title{background-color:#ff9000;padding:5px;font-weight:bold;}

.breadcrumb{box-sizing:border-box;border:1px solid silver;background-color:#efefef;padding:8px;border-radius:.8em;margin:4px;box-shadow: 0 10px 6px -6px #777}

.breadcrumb a{text-decoration:none;border:none;} /* links in normal breadcrumb not underlined  */
p.breadcrumb a{text-decoration:underline;} /* links in content breadcrumb divs, e.g. exam page link boxes, underlined  */
p.breadcrumb a:hover{text-decoration:none;border-bottom:0;}

.breadcrumb a:hover{text-decoration:none;border-bottom:1px dashed blue;}
.breadcrumb .first-link{font-weight:bold;}

#content .boxed{box-sizing:border-box;border:1px solid #6699cc;border-radius:0.2em;margin:8px 2px;text-align:justify;line-height:1.6em;padding:6px 12px;}

.tipbox{box-sizing:border-box;border:1px solid silver;padding:8px;border-radius:.6em;margin:8px auto;box-shadow:5px 5px 5px #ccc;background-color:#efefef;}

/* mp3 download div */

#audio-download{box-sizing:border-box;margin:0;padding:0;border:0;width:auto;max-width:600px;background:#efefef;}
#audio-download td.image-td{width:20%;border-left:16px solid #c8e0f9;padding-left:8px;}
#audio-download td.link-td{width:80%;padding:12px;}

/* TOP LEVEL SCREEN SIZES */

@media screen and (min-width: 10px) {
.bookworm {display:none;}
.breadcrumb {display:none;}
#audio-download td.image-td img{width:32px;height:32px;}
.links-to-grammar.feedback{display:none;}
}

@media screen and (min-width: 200px) {
#content .links{font-size:1.2em;width:99%;}
#content .narrow-links{font-size:.9em;}
#content .links-to-grammar{font-size:.9em;width:99%;}
#content .grammar-guide{width:99%;font-size:.7em;}
#content .boxed{width:99%;}
.tipbox{width:99%;}
.tipbox ul, .tipbox ol{line-height:1.6em !important;}
}

@media screen and (min-width: 320px) {
.breadcrumb {display:block;font-size:0.95em;line-height:1.4em;}
.breadcrumb .first-link, .breadcrumb .first-chevrons{display:none;}
#content .grammar-guide{font-size:.75em;}
.links-to-grammar.feedback{display:block;background-size:55px 55px;}
.links-to-grammar.feedback P{margin-right:65px;}
}

@media screen and (min-width: 480px) {
#content .links{font-size:1.1em;width:auto;min-width:85%;}
#content .grammar-guide{font-size:.8em;}
.bookworm {display:table;font-size:.8em;}
.breadcrumb .first-link, .breadcrumb .first-chevrons{display:inline;}
#content .boxed{width:90%;}
.links-to-grammar.feedback{background-size:65px 65px;}
.links-to-grammar.feedback P{margin-right:75px;}
}

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

@media screen and (min-width: 720px) {
#content .links{min-width:60%;font-size:.95em;}
#content .narrow-links{font-size:.95em;}
#content .links-to-grammar{font-size:.95em;width:80%;}
#content .grammar-guide{width:auto;min-width:80%;font-size:.9em;}
.tipbox{width:90%;}
.tipbox ul, .tipbox ol{line-height:1.8em !important;}
#audio-download td.image-td{width:20%;}
#audio-download td.image-td img{width:64px;height:64px;}
}

@media screen and (min-width: 900px) {
#content .links{min-width:40%;font-size:1em;}
#content .narrow-links{font-size:1em;}
#content .links-to-grammar{font-size:1em;width:65%;}
#content .grammar-guide{min-width:70%;font-size:.9em;}
.breadcrumb {font-size:.9em;width:80%;}
#content .boxed{width:85%;}
.tipbox{width:85%;}
}

@media screen and (min-width: 1200px) {
#content .links-to-grammar{width:55%;}
#content .grammar-guide{min-width:60%;font-size:.95em;}
.bookworm {font-size:.9em;}
.breadcrumb {font-size:.9em;width:70%;}
#content .boxed{width:75%;}
.links-to-grammar.feedback{display:block;background-size:75px 75px;}
.links-to-grammar.feedback P{margin-right:85px;}
.tipbox ul, .tipbox ol{line-height:2.2em !important;}
}

/* APP PROMO & PREMIUM AD DIVS */

.app-promo{box-sizing:border-box;box-shadow:5px 5px 5px #ccc;padding:4px;border:1px solid #bbb;border-radius:0.4em;margin:6px auto 12px auto;}
.app-promo h1{text-align:center;margin:0;}
.app-promo .linkbar{text-align:center;border:1px solid #eee;padding-bottom:8px;border-radius:0.4em;}
.app-promo .linkbar img{position:relative;top:10px;}

.premium-pr-omo{margin:6px 2%;border:1px solid silver;border-radius:.4em;padding:12px;background-color:#efefef;}
.premium-pr-omo img.cover-sample{float:right;margin-left:6px;}
.premium-pr-omo h3{margin:0;}
.premium-pr-omo p.links-block, .premium-pr-omo p.bottom-block{text-align:center;}

/* APP PROMO & PREMIUM AD SCREEN SIZES */

@media screen and (min-width: 200px) {
.app-promo{width:99%;font-size:.75em;}
.app-promo ul{line-height:1.6em !important;margin-left:-20px;}
.app-promo .sidebar{width:5px;}
.app-promo .sidebar img{display:none;}
.app-promo .linkbar a{font-size:.95em;color:#ff9000;}
.app-promo .linkbar img{display:none;}
.premium-pr-omo{display:none;}
}

@media screen and (min-width: 320px) {
.app-promo{font-size:.8em;}
}

/* only show on decent smartphones above 360px */
@media screen and (min-width: 360px) {
.premium-pr-omo{display:block;}
.premium-pr-omo img.cover-sample {max-width:120px;height:auto;}
.premium-pr-omo li.mobile-no{display:none;}
}

@media screen and (min-width: 480px) {
.app-promo{width:99%;font-size:.9em;}
.app-promo .linkbar a{font-size:1em;}
}

@media screen and (min-width: 600px) {
.premium-pr-omo img.cover-sample {max-width:130px;}
.premium-pr-omo li.mobile-no{display:list-item;}
}

@media screen and (min-width: 768px) {
.premium-pr-omo img.cover-sample {max-width:150px;}
}

@media screen and (min-width: 900px) {
.app-promo .sidebar{width:115px;}
.app-promo .sidebar img{display:block;max-width:105px;height:auto;}
.app-promo .linkbar img{display:inline;}
.premium-pr-omo img.cover-sample {max-width:160px;}
}

@media screen and (min-width: 1200px) {
.app-promo{width:90%;font-size:1em;}
.app-promo .sidebar{width:175px;}
.app-promo .sidebar img{max-width:165px;}
}

/* NAV AND LINKS CUSTOM STYLES */

/* VIEW STYLE_GLOSSARY.TXT FOR INFO ABOUT CLASSES IN THIS SECTION */

.nav ul.block, .nav ul.non-block{list-style-type:none;padding:0;margin:0 auto;}
.nav ul.block li a{display:block;text-align:center;}

.nav ul.non-block li a{display:inline;text-align:center;}

.nav .gray{background-color:#eee;}

.nav li.this-styled{font-style:italic;text-align:center;}
.nav li.this-bordered{border-left:6px solid #ffba64;text-align:center;}

.nav ul li.header{text-align:center;font-weight:bold;}
.nav ul li.footer{border-top:1px solid #666;text-align:center;}

/* USE #CONTENT TO MAKE MORE SPECIFIC */
#content .nav ul li.footer a:hover{background-color:#eee;color:#00f;}
#content .nav ul li.footer a{padding:0;}

/* NAV AND LINKS SCREEN SIZES */

@media screen and (min-width: 100px) {
.nav ul.big-block li a{padding:14px 16px;font-size:1.1em;}
.nav ul.medium-block li a{padding:4px 5px;font-size:1.05em;}
.nav ul.very-wide{width:98%;}
.nav ul.wide{width:98%;}
.nav ul.medium{width:98%;}
.nav ul.narrow{width:98%;}
.nav ul.floater{width:90%;}
.nav ul.narrow-floater{float:left;width:32%;border-left:1px solid #aaa;}
.nav ul.hover-one li a:hover{background-color:#eee;}
.nav ul.segmented li{border-bottom:1px solid #bbb;}
.nav ul.segmented li:first-child{border-top:1px solid #bbb;}
.nav ul li.title{background-color:#ddd;font-size:1.05em;}
.nav ul li.wide-title{background-color:#ddd;font-weight:bold;text-align:center;}
.nav ul.narrow-nolinked li a{text-decoration:none;color:#000;}
.nav ul li.footer a{display:inline;text-decoration:underline;color:blue;}
.nav span.line-break{display:inline;}
.nav span.pipe{display:none;}
}

@media screen and (min-width: 320px) {
.nav ul.very-wide{width:95%;}
.nav ul.narrow{width:80%;}
}

@media screen and (min-width: 480px) {
.nav ul.medium{width:85%;}
.nav ul.narrow{width:50%;}
}

@media screen and (min-width: 600px) {
.nav ul.medium{width:80%;}
.nav ul.narrow{width:55%;}
}

@media screen and (min-width: 768px) {
.nav ul.big-block li a{padding:3px 4px;font-size:1em;}
.nav ul.medium-block li a{padding:2px 3px;font-size:1em;}
.nav ul.wide{width:80%;}
.nav ul.medium{width:60%;}
.nav ul.narrow{width:39%;}
.nav.grammar{background-color:#eee;width:80%;margin:0 auto;}
.nav.phrasal-verbs{background-color:#eee;margin:0 auto;width:70%;}
.nav ul.floater{float:left;width:48%;}
.nav ul.narrow-floater{border-left:0;}
.nav ul.hover-one li a:hover{color:#fff;background-color:#ff9000;}
.nav .border-one{border:3px double #ff9000;border-radius:0.3em;}
.nav li.this-bordered{border-left:0;}
.nav.phrasal-verbs li.this-bordered{background-color:#ddd;}
.nav ul.segmented li{border-bottom:0;}
.nav ul.segmented li:first-child{border-top:0;}
.nav ul li.title{background-color:#eee;border-top:1px solid #bbb;}
.nav ul li.first.title{border-top:0;}
.nav ul.narrow-nolinked li a{text-decoration:underline;color:blue;}
#content .nav ul li.footer a:hover{text-decoration:none;}
.nav span.line-break{display:none;}
.nav span.pipe{display:inline;}
}

@media screen and (min-width: 900px) {
.nav ul.very-wide{width:85%;}
.nav ul.wide{width:65%;}
.nav ul.medium{width:40%;}
.nav ul.narrow{width:34%;}
.nav.phrasal-verbs{width:50%;}
}

@media screen and (min-width: 1200px) {
.nav ul.very-wide{width:80%;}
.nav ul.wide{width:55%;}
.nav ul.narrow{width:26%;}
.nav.phrasal-verbs{width:45%;}
}

/* CONTENT LEVEL CUSTOM STYLES */

.hangman{text-align:center;border:1px solid silver;border-radius:.6em;}

div.short-reading {box-sizing:border-box;box-shadow: 5px 5px 5px #ccc;border-radius:.6em;padding:12px;border:1px solid silver;background-color:#efefef;margin:12px auto;}
div.short-reading p{line-height:5em;}

div.reading {box-sizing:border-box;box-shadow: 5px 5px 5px #ccc;border-radius:.6em;padding:12px;border:1px solid silver;background-color:#efefef;margin:12px auto;}
div.reading p{line-height:1.6em;}

.citation{font-style:italic;font-size:.8em !important;color:#888 !important;}

div.long-reading {box-sizing:border-box;box-shadow: 5px 5px 5px #ccc;border-radius:.6em;padding:12px;border:1px solid silver;background-color:#efefef;margin-bottom:8px;margin:12px auto;}
div.long-reading p{line-height:1.5em !important;}

.wordlist{box-sizing:border-box;border:1px solid #ff9000;border-radius:.6em;margin:5px auto;text-align:center;padding:12px 4px;font-weight:bold;}

.matching{box-sizing:border-box;margin:6px auto;border:1px solid #6699cc;border-radius:.6em;}
.matching tr td{text-align:center;width:50%;}
.matching tr td.left{border-right:1px solid #6699cc;}
.matching tr td.left-big{border-right:1px solid #6699cc;width:62%;}
form .matching{border:none;}

.card{margin:14px 0;box-sizing:border-box;font-size:1.2em;font-weight:bold;border:1px solid black;padding:12px;height:auto;box-shadow:8px 8px 1px #aaa;}
.card .no-bold, .card.no-bold{font-weight:normal;}

table.one{box-sizing:border-box;border:3px solid #6699cc;border-radius:.6em;line-height:1.4em;padding:5px;text-align:center;margin:12px auto;}

table.two{box-sizing:border-box;border:3px solid #6699cc;border-radius:.6em;line-height:2em;padding:5px;text-align:center;margin:12px auto;}

table.three{box-sizing:border-box;border:3px solid #6699cc;border-radius:.9em;line-height:2em;border-spacing:0;padding:0;text-align:center;margin:12px auto;}
table.three td{border:1px solid #6699cc;padding:12px;}

form.standard{box-sizing:border-box;margin:12px auto;background-color:#efefef;border:1px solid silver;border-radius:.6em;}

form.standard input[type=text]{max-width:90%;font-size:1.1em;color:#147;}

form.standard input[type=button], form.standard input[type=submit] {font-size:1.2em;background-color:#6699cc;color:white;border-radius:0.3em;appearance:none;}

/* pet/ket real world text boxes */
.real-world-text-box{border-radius:3px;border:1px solid black;background-color:#fff;padding:12px;}
.real-world-text-box p{font-size:110%;}
.real-world-text-box h2{color:#cc7400 !important;margin:4px;float:right;}
.real-world-text-box p.title{font-weight:bold;text-align:center;font-size:125%;}
ol.real-world-list{padding-bottom:15px;border-bottom:1px solid silver;} /* OLs that come directly after named div will have padding/border */

/* social sharer */
.social-share{float:left;margin-top:8px;}
.social-share a:hover img{transform:scale(1.05,1.05);}

/* next links at bottom of quizzes */
.next-links{font-size:1em;line-height:2em;}
.next-links ul{line-height:2.6em !important;}
.next-links ul li{display:inline;background-color:#eee;border-left:2px solid #ccc;border-bottom:1px solid #ccc;padding:8px;border-radius:0.5em;}
.next-links ul li a{display:inline;color:#222;text-decoration:none;padding:4px;}
.next-links ul li:hover a{background-color:#ddd;color:#000;}
.next-links ul li:hover{background-color:#ddd;}

/* CONTENT LEVEL SCREEN SIZES */

@media screen and (min-width: 10px) {
.social-share{display:none;}
div.short-reading{font-size:1.05em;width:99%;}
div.reading{font-size:.95em;width:99%;}
div.long-reading{font-size:.9em;width:99%;}
.wordlist{width:99%;}
.matching{width:99%;line-height:3em;}
.card{width:98%;}
table.one{width:99%;}
table.two{width:99%;}
table.three{width:99%;}
form.standard{width:99%;padding:4px;}
.real-world-text-box{width:90%;}
}

@media screen and (min-width: 320px) {
.social-share{display:block;}
.social-share img{transform:scale(0.75,0.75);}
div.short-reading{font-size:1.15em;}
div.reading{font-size:1.05em;}
}

@media screen and (min-width: 480px) {
.wordlist{width:85%;}
table.two{width:90%;}
table.three{width:99%;}
form.standard{width:95%;padding:6px;}
}

@media screen and (min-width: 600px) {
table.one{width:99%;}
}

@media screen and (min-width: 768px) {
div.short-reading{font-size:1.15em;}
div.reading{width:90%;}
div.long-reading{width:90%;}
.wordlist{width:80%;}
.card{width:80%;}
table.one{width:95%;}
table.two{width:70%;}
form.standard{width:90%;padding:8px;}
.real-world-text-box{width:85%;}
}

@media screen and (min-width: 900px) {
.social-share img{transform:scale(1.0,1.0);}
div.short-reading{font-size:1.2em;width:90%;}
div.long-reading{width:85%;}
.wordlist{width:75%;}
.matching{font-size:.9em;line-height:3em;}
table.two{width:65%;}
table.three{width:90%;}
form.standard{width:85%;}
.real-world-text-box{width:80%;}
}

@media screen and (min-width: 1200px) {
div.short-reading{width:80%;}
div.reading{font-size:1.1em;width:80%;}
div.long-reading{font-size:.95em;width:80%;}
.wordlist{width:70%;}
.matching{width:95%;font-size:1.1em;line-height:3em;}
table.one{width:90%;}
table.two{width:60%;}
table.three{width:85%;}
form.standard{width:80%;}
.real-world-text-box{width:70%;}
}

/* reading divs inside forms */
@media screen and (min-width: 10px) {
form div.short-reading {width: 98%;}
form div.reading {width: 98%;}
form div.long-reading {width: 98%;}
}

form div.short-reading, form div.reading, form div.long-reading {
box-shadow:none;
}

/* VIDEO STYLES */

.video-box {
width:100%;
max-width:100%;
margin:25px auto;
border-radius:10px;
box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);
overflow:hidden;
background-color:#000;
}

.video-box iframe {
display:block;
width:100%;
height:100%;
aspect-ratio:16 / 9;
border:0;
border-radius:inherit;
}

@media screen and (min-width: 320px) {
.video-box {width:100%;}
}

@media screen and (min-width: 768px) {
.video-box {width:90%;}
}

@media screen and (min-width: 1200px) {
.video-box {width:80%;}
}

/* EXERCISE ANSWERS STYLES */

#results {
box-sizing:border-box;
margin:12px auto;
background-color:#efefef;
border:1px solid silver;
border-radius:.6em;
padding:15px;
display:none; /* Hidden by default */
}

.results-header {
font-size:1.3em;
font-weight:bold;
margin-bottom:10px;
margin-top:0;
}

.question-label {
font-weight:bold;
}

.correct-answer {
color:green;
}

.incorrect-answer {
color:red;
}

.grade-letter {
font-size:1.7em;
font-weight:bold;
color:#6699cc;
}

.go-to-top a{
font-size:0.9em;
}

.student-sub-results-div {
background-color:#f8f9fa;
border:1px solid #dee2e6;
border-radius:0.25rem;
padding:1rem;
margin:12px auto;
text-align:center;
box-sizing:border-box;
}

/* EXERCISE ANSWERS SCREEN SIZES */

@media screen and (min-width: 10px) {
#results, .student-sub-results-div {width:99%;}
}

@media screen and (min-width: 480px) {
#results, .student-sub-results-div {width:95%;}
}

@media screen and (min-width: 768px) {
#results, .student-sub-results-div {width:90%;}
}

@media screen and (min-width: 900px) {
#results, .student-sub-results-div {width:85%;}
}

@media screen and (min-width: 1200px) {
#results, .student-sub-results-div {width:80%;}
}

/*LINK ROTATOR*/

#link-rotator {
border: 1px solid #efefef;
background-color: #F0F8FF;
color: #333;
border-radius:3px;
padding: 5px;
margin: 5px;
}

#link-rotator h3 {
margin-top: 0;
margin-bottom: 10px;
}

#link-rotator-content {
padding: 5px;
}