/*grammar monster*/

* {
margin: 0;
padding: 0;
}

body {
font-family: sans-serif;
}

h1, h5 {
font-size: 30px;
margin: 10px 0px;
text-align: center;
color: #991111;
}

h2 {
font-size: 30px;
margin-top: 30px;
}

.mainButtons {margin: 30px 0px;}

.mainButtons a {
width: 160px;
height: 130px;
display: inline-flex;
text-align: center;
align-items: center;
justify-content: center;
border: 2px solid #444;
border-radius: 4px;
box-shadow: 5px 5px 4px #444;
margin: 10px 5px;
}
	

.offOn {
display: block;
margin-top: -40px;}


#searchBox {
background: #e0e0e0;	
display: block;
padding: 5px 0px 5px 50px;
border-radius: 4px;
cursor: pointer;
margin: 10px;
width: 160px;
background-image: url("https://www.grammar-monster.com/images/search_icon.png");
background-repeat: no-repeat;
}

.authorBox {
display: block;
padding: 10px;
margin-bottom: 20px;
font-size: 13px;
}

.authorBox a {
color: black;
}

.authorBox img {
width: 40px;
height: 40px;
margin-right: 10px;
margin-top: -9px;
box-shadow: 3px 3px 3px #888888;
}

.nextLesson {
padding: 10px;
text-align: right;
color: #fff;
background-image: linear-gradient(#330000, #991111);
cursor: pointer;
font-size: 31px;
margin: 20px 0px;
}

.level {
border-radius: 4px;
background: #000;
padding: 5px;
margin: 0 10px 5px 0;
text-align: center;
width: 60px;
display: inline-block;
color: #fff;
}


ul {
list-style: disc;
margin: 0px 30px 20px;
}

ul li {
padding: 20px 0 0;
}

a {
color: #991111;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

img {
max-width: 720px;
}

table {
border-collapse: collapse;
margin: 20px 0;
}

td {
vertical-align: top;
border: 1px solid black;
padding: 10px;
text-align: left;
}

th {
text-align: center;
}

th {background-color: #000; color: white; font-weight: bold; text-align: center; border-left: 1px solid white; padding: 10px;}
th:first-of-type {border-left: 1px solid black;}
th:last-of-type {border-right: 1px solid black;}

th a {
color: #fff;
text-decoration: underline;
}

.centerfirst td:nth-child(1){
text-align: center;
}

.noborder {
border: none;
vertical-align: top;
}


/*Navigation CSS*/
.nav {
border: 1px solid #fff;
display: flex;
flex-wrap: wrap;
width: 100%;
}
.hide-nav {
display: none;
}
.drop-down {
position: relative;
width: calc(100% / 5);
}
.drop-down ul {
margin: 0em;
}
.drop-down-button {
background: #991111;
color: #fff;
padding: 0.5em;
width: 100%;
}
.drop-down-content {
background: #808080;
display: none;
list-style-type: none;
margin-left: 0;
position: absolute;
text-align: center;
width: 100%;
}
.drop-down:hover .drop-down-content {
display: block;
z-index: 1;
}
// .drop-down-list:hover {background: #303030;}

.drop-down-link {color: #fff;}


.buttonOff {
background: #e0e0e0;
color: #c0c0c0;
border: #c0c0c0 1px solid;
border-radius: 3px;
}

input[type=button], select {
font-weight: bold;
padding: 10px;
margin: 10px;
}


#calcButtons input[type=text] {
padding: 5px;
width: 188px;
font-size: 23px;
background: #c0c0c0;
margin-bottom: 5px;
}

#calcButtons input[type=button] {
margin: 2px;
width: 60px;
}

.highlight {
background: #e0e0e0;
}

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
border: 2px solid black;
margin: 30px 0px 40px 0px;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*Container*/
.container {
background: #c0c0c0;
display: flex;
justify-content: center;
}

/*header*/
header {
display: flex;
justify-content: space-between;
width: 100%;
color: #fff;
background-image: linear-gradient(#330000, #991111);
}

header div {
padding: 10px;
}

header p {
display: inline-block;
}

header p {
font-size: 45px;
margin-top: 40px;
}

header span {
font-size: 17px;
color: #ffaaaa;
}

header a {color: white; text-decoration: none;}




/*Content (cols 1, 2, and 3)*/
.content {
width: 1390px;
display: flex;
align-items: stretch;
padding-bottom: 40px;
//margin-bottom: 100px;
}

/*Curriculum (left bar) */
.curriculum {
background: white;
width: 260px; 
margin: 20px 5px 0px 0px;
position: relative;
padding: 10px;
}



/*Main Content (col 2)*/
.main-content {
background-color: white;
width: 758px;
margin: 20px 5px 0px 5px;
padding: 10px 20px;
font-size: 19px;
line-height: 1.7;
}

/*Sidebar Content Col 3)*/
.sidebar-content {
background: white;
width: 350px;
margin: 20px 0px 0px 5px;
padding: 10px;
position: relative;
line-height: 1.7;
}

.footerDiv {
margin-top: -30px;
width: 100%;
text-align: center;
}

.footerDiv a {
color: #444;
}


/*expand mini-curriculums*/
.expandSpan {
// height: 0;
margin: 0; 
overflow: hidden;
-webkit-transition: height 1s; /* Transitions not working */
transition: height 1s;
}

.expandDiv {
border: 2px dotted #777;
padding: 5px;
margin: 5px 0px;
}

.openButton {
border: 1px solid black;
background: #55ff55;
width: 80%;
margin: 20px 0 10px 0;
border-radius: 4px;
text-align: center;
display: block;
font-size: 19px;
color: black;
}

.openButton:hover {
text-decoration: none;
background: #22ff22;
}

/*.help {margin-bottom: 30px;text-align: center;}*/

.curriculum .help {
margin-bottom: 30px;
}

.stickyAd {
position: relative;
display: block;
margin: 30px 0;
}

.ad250 {
height: 250px;
margin: 30px 0;
}

/*Test Content CSS*/
.scorer {
background: #ece9e6;
border-radius: 50%;
display: inline-block;
height: 30px;
margin: 10px 10px 0 0;
width: 30px;
}
.correct {
background: #00ff00; color
}
.wrong {
background: #ff0000;
}
.small {
font-size: 0.8em;
}
.big {
font-size: 1.4em;
}
.vbig {
font-size: 3.4em;
}

.clearer {
clear: both;
}

/*test answers*/

.turnerQuestion, .shortTurnerQuestion {
background: black;
border-radius: 4px;
margin: 5px;
padding: 5px 20px;
color: white;
}

.shortTurnerQuestion {
width: 180px;
height: 100px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.option {
color: yellow;
}

.curs {cursor: pointer;}

.ILB {
display: inline-block;
padding: 0 3px 0 3px;
}

.ILBBorder {
display: inline-block;
padding: 0 3px 0 3px;
border: 1px solid black;
border-radius: 4px;
}

.blockBorder {
display: block;
padding: 0 3px 0 3px;
border: 1px solid black;
margin: 15px;
padding: 10px; 
border-radius: 4px;
}

.wrongAns {background: red; color: white;}
.rightAns {background: green;}
.selectedAns  {background: yellow;}
.questionBox  {background: #c0c0c0;}


#testBox, #turnerBox {
// width: 100%;
border: 1px black solid;
padding: 10px;}

#turnerBox {
text-align: center;
}

.scoreBox, #turnerScore {
background: #e0e0e0;
border-radius: 3px;
padding: 5px;
display: inline-block;
margin-bottom: 10px;
}

.scoreBox p, #turnerScore p {
font-size: 31px;
padding: 5px;
border-radius: 3px;
display: inline-block;
}

.questionHolder {
border-style: dotted none none none;
padding: 10px;
}

.questionNo {
background: black;
border-radius: 3px;
color: white;
padding: 5px;
width: 30px;
text-align: center;
margin: 10px;
}

.questionNo, .resultHolder {
display: inline-block;
}

.ansBox {
margin: 10px;
padding: 10px;
border: 1px black solid;
border-radius: 3px;
background: #e0e0e0;
}

.ansBoxILB {
display: inline-block;
margin: 10px 0px;
padding: 0px;
background: #e0e0e0;
}

.ansBoxRight {
background: green;
color: white;
}

.ansBoxWrong {
background: red;
color: white;
}

#messageWindow {
position: fixed;
width: 340px;
height: 420px;
top: 40%;
left: 50%;
margin: -200px 0 0 -170px;
border: 2px solid #444;
border-radius: 4px;
box-shadow: 10px 10px 6px #444;
background: white;
display: none;
padding: 10px;
z-index: 10;
text-align: center;
}

.testButtonOn {
padding: 10px;
background: green;
color: white;
display: inline-block;
margin: 10px 10px 0 0;
}

.topright {
float: right;
}

.toprightIn {
position: absolute;
top: 8px;
right: 96px;
}

/*Formatting*/
.text-centred {
text-align: center;
margin: 0 0 30px 0;
color: #991111;
}

/*Toggle switch*/
.toggle-button {
display: flex;
}
.switch {
display: inline-block;
  /*margin: 0.1em;*/
}
.switch input {
display: none;
}
.toggle {
background: #991111;
border-radius: 20px;
cursor: pointer;
height: 24px;
position: relative;
width: 50px;
}
.toggle:before {
background: white;
border-radius: 10px;
content: "";
height: 20px;
left: 2px;
position: absolute;
top: 2px;
width: 20px;
}

input[type="checkbox"]:checked + .toggle:before {
left: 28px;
}
.toggle-label {
display: inline;
text-align: center;
}

/*callout - used for search results */
.callout {
padding: 10px;
border: 2px solid #444;
border-radius: 2px;
margin: 10px;
}


/*quick answer*/
.quickmid {
padding: 10px;
border: 2px solid #444;
border-radius: 2px;
margin: 50px 0px;
}

.testbox {
padding: 10px;
border: 2px solid #444;
border-radius: 2px;
margin: 30px 10px;
color: #000;
}

.quickmid h5, .testbox h5 {
color: #000;
margin-top: 0em;
}

/*sidebox*/
.sidebox {
padding: 1.5em;
border: 2px solid #ddd;
border-radius: 2px;
margin: 2em 0em;
background: #e0e0e0;
}

.sidebox h5 {
margin-top: 0em;
}

.sidelink {
background: #e0e0e0;
padding: 5px;
border: 2px solid #ddd;
border-radius: 2px;
margin: 0.5em 0em;
color: #000;
font-size: 16px;
}

.sidelink img {
vertical-align: middle;
margin-right: 10px;
}

.sidelink p {
padding-left: 50px;
vertical-align: middle;
min-height: 45px;
}

.messageBox {
border: 2px solid #ddd;
border-radius: 2px;
text-align: left;
margin: 2em 0em;
padding: 10px;
}

.warning {
background-image: url("../images/warning.png");
background-repeat: no-repeat;
}

/*See Also CSS*/
.see-also {
margin-bottom: 20px;
text-align: center;
}

.see-also h2 {
margin-bottom: 10px;}

.see-also a, .siteNav a, .rightBox {
padding: 1em;
border: 2px dotted #ddd;
border-radius: 2px;
display: block;
color: black;
margin: 5px 0px;
text-align: center;
}

.see-also a:hover, .siteNav a:hover, .mainButtons a:hover {
text-decoration: none;
background: #e0e0e0;
}


/*animations*/
.shakethediv {animation: shake 0.3s; animation-iteration-count: 4;}
.nodthediv {animation: nod 0.3s; animation-iteration-count: 4;}
.growthediv {animation: grow 3s 1;}

@keyframes shake {
0% {transform: translate(1px)}
10% {transform: translate(5px)}
20% {transform: translate(15px)}
30% {transform: translate(30px)}
40% {transform: translate(40px)}
50% {transform: translate(45px)}
}

@keyframes nod {
0% {transform: translate(0,1px)}
10% {transform: translate(0,5px)}
20% {transform: translate(0,15px)}
30% {transform: translate(0,30px)}
40% {transform: translate(0,40px)}
50% {transform: translate(0,45px)}
}
@keyframes grow{
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


.jello-horizontal{-webkit-animation:jello-horizontal .9s both;animation:jello-horizontal .9s both}

@-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

.bounce-in-top{-webkit-animation:bounce-in-top 1.1s both;animation:bounce-in-top 1.1s both}

@-webkit-keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}


.nomobile{display: block;}
.mobileonly{display: none;}



/* small screen */
@media screen and (min-width: 1200px) and (max-width: 1405px) {

/*Curriculum (left bar)*/
.curriculum {display: none;}

/*Content (cols 1, 2, and 3)*/
.content {width: 1190px;}
.main-content {width: 820px;}


}

/* mobile */

@media screen and (max-width: 1199px) {

/*control ad size*/
.nomobile {display: none;}
.mobileonly {display: inline-block;}
.stickyAd {display: none;}

img {max-width: 330px;}

header p {
display: inline-block;
font-size: 19px;
margin-top: 20px;}

header span {
display: none;
}

header div:first-of-type img {
width: 105px;
height: 83px;}

header div:nth-of-type(2) img {
width: 33px;
height: 36px;}

/*Navigation CSS*/
.nav {position: absolute; z-index: 1; display: none;}
.hide-nav {display: flex; flex-wrap: wrap;}
.drop-down {width: 100%;}
.drop-down-content {background: #808080; color: white;}
.drop-down-list {border-bottom: 1px solid #c8c8c8;}
.drop-down-list:last-of-type {border-bottom: none;}
.drop-down-link {color: white;}


/*Curriculum CSS*/
.curriculum {display: none;}

/*Main Content CSS*/

.container {
width: 100%;
display: block;
padding: 0px;
}

.content { 
margin: 0px;
padding: 0px;
display: block;
width: auto;
}

.main-content, .sidebar-content {
width: auto;
padding: 30px;
margin: 0px;

}

#messageWindow {
width: 330px;
margin: -200px 0 0 -165px;
}

.footerDiv {display: none;}

.videoWrapper iframe {width: 100%; height: 100%;}

.shortTurnerQuestion {
width: 60px;
height: 80px;
font-size: 12px;
}



}