/* ######################### Main Styles ######################### */

body, body.second {/*background: url('/images/main_bg.png');*/ background-repeat: repeat-x; padding-bottom: 20px; /* background-color: #E6E6E6/* #1686ee */; margin: 0; padding: 0; font-size: 16px; height: 100%; position: relative;}
body.second {/*background: url('/images/second_bg.png'); */ background-repeat: repeat-x;}

#wrapper {width: 100%;}

#header {width: 100%; margin-top: 5px; background-repeat: no-repeat; border-bottom: 3px solid #BCC9D4; padding-bottom: .8em;}

.logo {}
#header img {width: 100%; max-width: 296px; display: inline-block;}

.menu {display: inline-block; text-align:center; width: 61%}

.menubutton {width: 100%; text-align: center; background: #000; padding: .8em 0; display: none;}
.menubutton a {color: #fff;}
#main {background: linear-gradient(#020c4A, #1465C4); position: relative; padding: 2em 12.5%; border-bottom: 3px solid #ccc; box-shadow: 0px 1px 10px 1px #000; z-index: 1;}

#special {display: inline-block; background-image: url('images/speaking.png'); background-size: contain; width: 68%; background-repeat: no-repeat; max-height: 100%;}

#content {position: relative; padding: 2em 12.5%; background: linear-gradient(#FEE982, #ffffff, #ffffff); display: block; width: 75%;}

/*#content {position: relative; padding: 0 12.5%; background: linear-gradient(#FEE982, #ffffff); display: block; border-radius: 12px; box-shadow: 0 -2px 15px 2px #000; width: 75%;} */

#content.page p{margin-left: 15px; width: 95%;}

#sidebar {background: #333; width: 20%; height: 500px; display: none; position: relative; margin: 20px 0 20px 4.425%;}

#content, #sidebar {vertical-align: top;}
.dib {display: inline-block; text-align: center; width: 38%;}
.menu, .dib {vertical-align: middle;}

.dib p {font-size: .75em; margin: 0;}

#newsletter_signup {color: #fff; text-align: center; width: 31.25%; max-height: 280px; display: inline-block; font-size: 1.25em; vertical-align: top; padding: 50px 0;}

.textbox {width:37%; color: #fff; font-size: 1.7em; border: 0; padding: 50px;}
.textbox p{margin-left: -30px;}

@media screen and (max-width: 400px) {
	#main, #content  {padding: 0 2% 2em;}
	//#content, #newsletter_signup { display: block;}
	.textbox {padding: 0; clear: both; margin: 0; padding-top: 60%;}
	.textbox p{margin:0;}
	#special, .textbox, #newsletter_signup, #content {display: block; width: 100%;}
	#content {width: 96%;}
	#header {padding: 0;}
	#newsletter_signup {padding: 1em 0;}
}


/* ######################### Background Colors ######################### */

.ltred {background-color: #ff9999;}
.ltorange {background-color: #ffcc99;}
.white {background-color: #fff;}
.yellow {background-color: #ffff99;}
.green {background-color: #99ff99;}
.blue {background-color: #99ffff;}
.bluegray {background-color: #99ccff;}
.bluepurple {background-color: #9999ff;}


/* ######################### CLASS ALIGNMENTS ######################### */
.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}
.fl {float: left;}
.fr {float: right;}
.clearfeed {clear: both; margin-bottom: 15px;}

.ml10 {margin-left: 10px;}
.mr10 {margin-right: 10px;}
.mt10 {margin-top: 10px;}
.blockheader {width: 100%; background-color: #D1D1D1; border:solid 1px #000; text-align: center; padding: 5px 0 10px 0; font-family: helvetica; font-size: .75em;}


.bold {font-weight: bold;}
.helvetica, p {font-family: helvetica;}
.b1 {border: solid 1px #000;}
.bord2 {border: solid 2px #000;}
#content a {font-weight: bold; font-size: 1.1em; text-decoration: none; color: #3b72d5;}
#content a:hover{text-decoration: underline; color: #000;}
p {font-size: .9em; width: 100%;}
h2 {font-family: helvetica; font-size:1.3em; width: 95%; background-color: #ccc; border: solid 5px #ccc;}

.off {display: none;}



a.menua1 {font-family: helvetica; font-size: .9em; margin-right: 2px; padding: 5px; position:relative; top: 10px; text-decoration: none; line-height: 150%; text-transform: uppercase; color: #006498; font-weight: bold;}

a.menua1:hover {color: #ff0000; background: #ffec93; padding: 5px;}
a.menua1: active {font-size: 2em; color: #000;}
div.floaters {display: inline-block; vertical-align: top; width: 260px; height: 110px; background: url('/images/floater_box.png'); padding: 20px; font-family: helvetica; font-size: .75em;}
.floaters img {border-right: 2px solid #a3a3a3; border-bottom: 2px solid #a3a3a3;}
img.borderclear {border: 0px;}

.linkboxes{width: 30%; display: inline-block; text-align: center; background-color: #fff; height: 160px; margin: 0 auto; margin-right: 3%; vertical-align: top; border-radius: 10px; box-shadow: 0 5px 10px 2px #888;}
.linkboxes a {display: inline-block; margin-top: 10px;}

#socialmedia {position: fixed; top: 70px; left: 0px; background: url('/images/socialmediabox.png'); width: 100px; height: 140px; z-index: 2;}
#socialmedia p{margin-left: 5px;}

@media screen and (max-width: 400px){
	.menubutton {display:block;}
	a.menua1, .menu {display: block; width: 100%;}
	.menu, .menu br {display: none;}
	.menubutton {font-size: 1.25em;}
	.dib {width: 100%;}
	#socialmedia {position: fixed; bottom: 0; top:initial; background: initial; width: 100%; height: initial; background: #FFE587; vertical-align: middle; text-align: middle; box-shadow: 0 -2px 10px 1px #000; padding: 5px 0 5px 0;}
	#socialmedia p, #socialmedia a, #socialmedia a img {display: inline-block; vertical-align: middle;}
	#socialmedia a img {margin-left: .45em;}
	#socialmedia p {width: initial; margin: 0 0 0 10px; font-size: 1.25em; font-weight: bold;}
	//#content {width: 95%; margin:10px; padding: 5px 0;}
	.linkboxes {width: 90%; margin-right: initial; margin: .5em 5%;}
}