/*
BREAKPOINTS
100	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: 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;}
}

/* custom size! */
@media screen and (min-width: 280px) {
}

@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: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-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: 670px) {
}

@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:130%;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.8em;}
#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.8em;}
}

@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.4em;}
}

@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;}
}

/* video-link div */

.video-link{
padding:6px;
box-shadow:4px 4px 8px #aaa;
background-color:#efefef;
border-radius:0.2em;
}

/* VIDEO-LINK SCREEN SIZES */

/* TOP LEVEL SCREEN SIZES */

@media screen and (min-width: 200px) {
.video-link{width:95%;}
}

@media screen and (min-width: 340px) {
.video-link{background-image: url(graphics/video-icon.png);background-size:50px 50px;background-repeat:no-repeat;background-position:99% 50%;}
}

@media screen and (min-width: 768px) {
.video-link{width:85%;}
.video-link{background-image: url(graphics/video-icon.png);background-size:60px 60px;background-repeat:no-repeat;background-position:99% 50%;}
}

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



/* contact forms */

.email-share{box-sizing:border-box;overflow:auto;border:1px solid silver;border-radius:.5em;}
.email-share p{margin-top:8px;}
.email-share-image{display:block;float:left;margin-right:12px;}

.where-now{box-sizing:border-box;overflow:auto;text-align:center;border:1px solid silver;}
.where-now ul{list-style-type:none;}
.where-now ul li{display:inline;background-color:#eee;}
.where-now ul li:hover{text-decoration:none;background-color:#ddd;}
.where-now-image{display:block;float:left;}

.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:#ff9000;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:#6699cc;}
.contact .text-field{border:1px inset #000;border-radius:.3em;width:90%;}
.contact .checkbox{margin-left:3em;}
.contact .checkbox2{margin-left:3.5em;}
.contact .checkbox3{margin-left:4em;}

#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%;border:none;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;}
.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;}

.image-strip img{float:left;max-width:230px;padding:8px;max-height:230px;}

.image-strip{box-sizing:border-box;padding:0;margin:0 auto;width:auto;text-align:center;}

.allposters{box-sizing:border-box;background-color:#FFF;text-align:center;width:95%;border:none;margin-right:auto;margin-left:auto;border-radius:.8em;border:1px solid silver;padding:5px 0;}

.ios-sniffer-promo{box-sizing:border-box;border-left:16px solid #c8e0f9;border-radius:.5em 0 0 .5em;background-color:#efefef;padding:8px;margin:15px auto;line-height:2em;font-size:1em;color:#777;position:relative;}
.sniffer-image{position:absolute;top:3%;right:0.5%;}

/* 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;}

/* newsletter signup form */
.newsletter-midpage-signup {border-radius:5px;  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);position:relative;background:#C4DDF4;margin:20px auto;width:45%;padding:20px 25px;border-bottom:1px solid #c4c4c4;border-top:10px solid #6699cc;}
.newsletter-midpage-signup .newsletter-title {color:#29649D !important;font-size:1.1em;font-weight:300;line-height:0;margin:5px 0 20px;padding:8px;text-align:center;text-shadow:0 1px rgba(255, 255, 255, .75);}
.newsletter-midpage-signup p.newsletter-description{text-align:center;font-style:oblique;}
.newsletter-midpage-signup input {font-family:inherit;color:inherit;box-sizing:border-box;}
.newsletter-midpage-signup .newsletter-input {width:100%;height:40px;margin-bottom:20px;padding:0 15px 2px;font-size:1.1em;background:white;border:1px solid #d1d1d1;border-radius:4px;box-shadow:inset 0 -2px #ebebeb;}
.newsletter-midpage-signup .newsletter-input:focus {color:#ccc;border-color:#c4c4c4;box-shadow:inset 0 -2px #c4c4c4;}
.newsletter-midpage-signup .newsletter-button {-webkit-appearance:none;position:relative;vertical-align:top;width:100%;height:34px;padding:0;font-size:1.2em;color:#C4DDF4;text-align:center;text-shadow:0 1px 2px rgba(0, 0, 0, 0.25);background:#6699cc;border:0;border-bottom:2px solid #447CB2;border-radius:5px;cursor:pointer;box-shadow:inset 0 -2px #447CB2;}
.newsletter-midpage-signup .newsletter-button:active {top:1px;outline:none;box-shadow:none;}

/* TOP LEVEL SCREEN SIZES */

@media screen and (min-width: 10px) {
.sniffer-image{display:none;}
.bookworm {display:none;}
.breadcrumb {display:none;}
.contact{width:98%;}
.image-strip{display:none;}
.allposters{display:none;}
#audio-download td.image-td img{width:32px;height:32px;}
.newsletter-midpage-signup {display:none;}
.links-to-grammar.feedback{display:none;}
.email-share{width:98%;padding:8px;margin:2px;}
.email-share-image img{width:60px;height:auto;}
.where-now{display:none;}
.where-now-image{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;}
.ios-sniffer-promo{width:99%;}
}

@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;}
.image-strip{display:block;}
.image-strip img{max-width:75px;max-height:75px;}
.newsletter-midpage-signup {display:block;width:80%;}
.newsletter-midpage-signup .newsletter-title {font-size:1.0em;}
.where-now{display:block;border-radius:.5em;padding:2px;margin:3px auto;width:98%;}
.where-now h3{margin-top:0;}
.where-now ul{margin:0;padding:0;}
.where-now ul li{border-left:2px solid #ccc;border-bottom:1px solid #ccc;padding:8px;border-radius:0.5em;border-bottom:1px solid #ddd;margin:3px;line-height:2.6em !important;}
.where-now ul li a{display:inline;color:#222;text-decoration:none;padding:1px;}
.where-now ul li:hover a{background-color:#ddd;color:#000077;text-decoration:none;}
}

@media screen and (min-width: 375px) {
.email-share-image img{width:80px;}
}

@media screen and (min-width: 410px) {
.where-now-image{display:block;margin-right:0px;margin-top:0px;}
.where-now-image img{width:80px;height:auto;}
}

@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;}
.image-strip img{max-width:120px;max-height:120px;}
.ios-sniffer-promo{width:90%;}
.newsletter-midpage-signup {width:85%;}
.newsletter-midpage-signup .newsletter-title {font-size:1.05em;}
.email-share{width:80%;}
.where-now-image img{width:90px;}
}

@media screen and (min-width: 600px) {
#content .links{min-width:80%;}
.image-strip img{max-width:100px;max-height:100px;}
.email-share{width:75%;}
.where-now-image img{width:110px;}
}

@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:.85em;}
.tipbox{width:90%;}
.tipbox ul, .tipbox ol{line-height:1.8em !important;}
.image-strip img{max-width:150px;max-height:150px;}
.ios-sniffer-promo{width:85%;}
#audio-download td.image-td{width:20%;}
#audio-download td.image-td img{width:64px;height:64px;}
.newsletter-midpage-signup {width:55%;}
.newsletter-midpage-signup .newsletter-title {font-size:1.1em;}
}

@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%;}
.contact{width:85%;}
.tipbox{width:85%;}
.image-strip img{max-width:200px;max-height:200px;}
.allposters {display:table;font-size:.8em;}
.allposters ul{margin-left:-20px;}
.ios-sniffer-promo{width:88%;}
.sniffer-image{display:block;}
.email-share{padding:12px;margin:3px;width:450px;}
.where-now{width:85%;}
.where-now ul li a{color:#0000ff;text-decoration:underline;}
}

@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%;}
.contact{width:60%;}
.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;}
.image-strip img{max-width:240px;max-height:240px;}
.allposters img{transform:scale(1.0,1.0);}
.allposters {font-size:1em;}
.ios-sniffer-promo{width:68%;}
.newsletter-midpage-signup {width:35%;}
.newsletter-midpage-signup .newsletter-title {font-size:1.2em;}
.where-now{width:80%;}
}

/* custom size */
@media screen and (min-width: 1520px) {

}

/* LISTENING DIV */

div.listening-container{background-color:ghostwhite;border:1px silver solid;border-radius:0.4em;padding:8px;margin:12px 8px;}
.listening-container .title{font-size:1.2em;font-weight:bold;color:#FF9000}

/* listening div screen sizes */

@media screen and (min-width: 200px) {
}

@media screen and (min-width: 320px) {
.listening-container{background-image: url(graphics/mp3-icon-faded.png);background-size:45px 45px;background-repeat:no-repeat;background-position:99% 2%;}
}

@media screen and (min-width: 600px) {
.listening-container{background-position:99% 90%;}
}

@media screen and (min-width: 768px) {
.listening-container{background-size:60px 60px;}
}

@media screen and (min-width: 900px) {
.listening-container{background-size:80px 80px;}
}

@media screen and (min-width: 1200px) {
.listening-container{background-size:110px 110px;background-position:99% 55%;}
}

/* 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 */

.storyboard-input-field{box-sizing:border-box;border:2px inset #000;padding:5px;}

.crossword-container{border:1px solid silver;width:auto;box-shadow: 5px 5px 5px #ccc;}

@media screen and (min-width: 200px) {
.crossword-container .box{height:8px;min-height:8px;max-height:8px;width:8px;min-width:8px;max-width:8px;font-size:.7em;}
.storyboard-input-field{width:98%;font-size:1em;height:400px;}
}

@media screen and (min-width: 320px) {
.crossword-container .box{height:9px;min-height:9px;max-height:9px;width:9px;min-width:9px;max-width:9px;font-size:.75em;}
.storyboard-input-field{height:400px;}
}

@media screen and (min-width: 480px) {
.crossword-container .box{height:15px;min-height:15px;max-height:15px;width:15px;min-width:15px;max-width:15px;font-size:.8em;}
.storyboard-input-field{height:300px;}
}

@media screen and (min-width: 600px) {
.crossword-container .box{height:12px;min-height:12px;max-height:12px;width:12px;min-width:12px;max-width:12px;font-size:.85em;}
}

@media screen and (min-width: 768px) {
.crossword-container .box{height:21px;min-height:21px;max-height:21px;width:21px;min-width:21px;max-width:21px;font-size:.9em;}
}

@media screen and (min-width: 900px) {
.crossword-container .box{height:28px;min-height:28px;max-height:28px;width:28px;min-width:28px;max-width:28px;font-size:1em;}
.storyboard-input-field{font-size:1.2em;}
}

@media screen and (min-width: 1200px) {
.crossword-container .box{height:36px;min-height:36px;max-height:36px;width:36px;min-width:36px;max-width:36px;font-size:1.3em;}
.storyboard-input-field{width:85%;font-size:1.4em;height:400px;}
}

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

.phonetic-chart img{width:98%;height:auto;}

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.short-reading P:first-letter{font-size:170%;font-weight:bold;border:0;margin:0;}

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.4em !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%;}

.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]{font-size:1.2em;background-color:#6699cc;color:white;border-radius:0.3em;-webkit-appearance:none;-moz-appearance:none;appearance:none;}

/* CONTENT LEVEL SCREEN SIZES */

@media screen and (min-width: 10px) {
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%;font-size:.9em;}
.matching{width:99%;font-size:.8em;line-height:3em;}
.card{width:98%;}
table.one{width:99%;font-size:.85em;}
table.two{width:99%;font-size:.85em;}
table.three{width:99%;font-size:.85em;}
form.standard{width:99%;font-size:.95em;padding:4px;}
}

@media screen and (min-width: 320px) {
div.short-reading{font-size:1.15em;}
div.reading{font-size:1.05em;}
table.two{font-size:.9em;}
}

@media screen and (min-width: 480px) {
.wordlist{width:85%;}
table.two{width:90%;font-size:.85em;}
table.three{width:99%;font-size:.85em;}
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%;font-size:1em;}
.card{width:80%;}
table.one{width:95%;font-size:.9em;}
table.two{width:70%;font-size:1em;}
form.standard{width:90%;font-size:1em;padding:8px;}
}

@media screen and (min-width: 900px) {
div.short-reading{font-size:1.2em;width:90%;}
div.long-reading{width:85%;}
.wordlist{width:75%;font-size:1.1em;}
.matching{font-size:.9em;line-height:3em;}
table.two{width:65%;}
table.three{width:90%;font-size:.95em;}
form.standard{width:85%;}
}

@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%;font-size:.95em;}
table.two{width:60%;font-size:1.1em;}
table.three{width:85%;font-size:1em;}
form.standard{width:80%;font-size:1em;}
}

/* APP PAGE */

.app-buy{box-sizing:border-box;box-shadow: 5px 5px 5px #ccc;height:auto;padding:8px;border:1px solid silver;border-radius:.6em;margin:6px auto 12px auto;overflow:hidden;}
.app-buy h2{text-align:center;}
.app-buy p{padding-right:5%;font-size:1.08em;margin:0;}

.app-page-table{
box-sizing:border-box;box-shadow:5px 5px 5px #ccc;color:#555;padding:0;border:1px solid silver;border-radius:.6em;
}

.app-page-table td.odd{border-bottom:1px solid silver;border-right:1px solid silver;}
.app-page-table td.even{background-color:#ffffbb;border-bottom:1px solid silver;border-right:1px solid silver;}
.app-page-table td .clicktosee{font-size:.8em;font-weight:bold;color:#FF9000;}
.app-page-table td.image-col{width:356px;padding:2px 0;vertical-align:top;}

/* APP PAGE SCREEN SIZES */

@media screen and (min-width: 10px) {
.app-buy{width:99%;}
.app-buy img{max-width:65px;max-height:65px;}
.app-page-table{font-size:.85em;width:99%;}
.app-page-table img{display:none;}
.app-page-table td.image-col{display:none;}
.app-page-table td .clicktosee{display:none;}
.app-page-table a{color:#ff9000;text-decoration:none;}
}

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

@media screen and (min-width: 768px) {
.app-buy{width:80%;}
.app-page-table{font-size:.95em;}
}

@media screen and (min-width: 900px) {
.app-buy img{max-width:128px;max-height:128px;}
.app-page-table a{color:blue;text-decoration:underline;}
.app-page-table td .clicktosee{display:inline;}
.app-page-table td.image-col{display:table-cell;width:auto;}
.app-page-table img{display:block;max-width:330px;height:auto;}
}

@media screen and (min-width: 1200px) {
.app-buy{width:70%;}
.app-page-table img{max-width:353px;}
}

/* HOME STYLES */

/*
top-left: div only for holding adsense ad
app-video: top right for youtube embed
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: orange bar on all three div types (left, right & bar)
NEW div-links: lower div with links inside left, right & bar
*/

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

.top-left{text-align:center;}

.app-video{vertical-align:top;}

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

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

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

.app-image{float:right;margin:5px;}

/* HOME PAGE SCREEN SIZES */

@media screen and (min-width: 10px) {
.top-left{margin:5px .5%;padding:6px;width:98%;}
.app-video{display:none;padding:6px;}
.home-div-left, .home-div-right{height:auto;}
.home-div-left, .home-div-right{width:98%;}
.home-div-left,.home-div-right,.app-video, .bar{margin:5px .5%;font-size:1em;}
.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;}
.div-links{font-size:1em;text-align:center;border-top:1px solid silver;line-height:2em;}
.div-links ul{list-style-type:none;margin:0;padding:0;}
.div-links ul li{background-color:#eee;border-bottom:1px solid #ddd;border-radius:.3em;margin:3px;}
.div-links ul li a{display:block;color:#222;text-decoration:none;padding:4px;}
.div-links ul li:hover{text-decoration:none;}
.div-links ul li:hover a{background-color:#ddd;color:#555;}
.embedded-div{width:100%;height:30px;border-top-right-radius:.15em;border-top-left-radius:.15em;padding:2px 8px;font-size:1.2em;letter-spacing:1px;}
.bar{width:98%;margin:5px .5%;border:1px solid silver;border-radius:0.25em;}
.bar h2{margin:2px 5px;}
.bar img.app-image {display:none;}
.bar img.test-prep-image{display:inline;width:100%;height:auto;}
.wide-list-content, .wide-paragraph-content, .wide-span-content{display:none;}
}

@media screen and (min-width: 320px) {
.bar img.app-image{display:block;max-width:90px;height:auto;}
}

@media screen and (min-width: 480px) {
.bar img.app-image{max-width:140px;}
}

/* bottom of div links change from block display <li> to in-line 'bubbles' */
@media screen and (min-width: 900px) {
.div-links ul{line-height:2.6em !important;}
.div-links ul li{display:inline;background-color:#eee;border-left:2px solid #ccc;border-bottom:1px solid #ccc;padding:8px;border-radius:0.5em;}
.div-links ul li a{display:inline;padding:1px;}
.div-links ul li:hover a{background-color:#ddd;color:#000;}
.div-links ul li:hover{background-color:#ddd;}
.narrow-span-content{display:none;}
}

/* divs go from full width to half width */
@media screen and (min-width: 1000px) {
.top-left{width:97%;}
.home-div-left p,.home-div-right p,.bar p{line-height:1.2em;}
.home-div-left, .home-div-right{}
.home-div-left,.home-div-right,.app-video, .bar{font-size:1em;}
.home-div-left{width:48%;float:left;}
.home-div-right{width:48%;float:left;}
.bar{width:97%;}
}

@media screen and (min-width: 1200px) {
.top-left{width:48%;float:left;}
.app-video{display:block;width:48%;float:left;}
.home-div-left,.home-div-right,.app-video{font-size:1.03em;}
.home-div-left, .home-div-right{}
.wide-list-content{display:list-item;}
.wide-paragraph-content{display:block;}
.wide-span-content{display:inline;}
}