body {
  font-family: "Calibri", sans-serif;
  background-color:#ABD3B4;
  margin:0;
  background-image:url('http://s16.postimg.org/drlghdqtx/light_wool.png');
  background-attachment:fixed;
}

a {
  text-decoration:none;
}

/* Headerbar */
#header {
  width:1100px;
  position:relative;
  left:50%;
  padding-top:30px;
  margin-left:-550px;
  padding-bottom:10px;
}

#header img {
  width:100%;
}

#lessoncont {
  width:100%;
  height:830px;
  border-top:20px solid #ef7b45;
  border-bottom:20px solid #ef7b45;
  background-color:rgba(205,237,246,.2);

}

/* Definition */
#definition {
  background-color:#CDEDF6;
  padding:10px;
  font-size:14px;
  font-style:italic;
  padding:24px;
}

.source {
  font-size:10px;
  text-align:right;
  padding-top:3px;
}

#preview {
  width:400px;
  height:228px;
  background-color:grey;
  border:1px solid #eee;
  position:relative;
  left:50%;
  margin-left:-200px;
  margin-top:15px;
}

#preview img {
  width:400px;
  height:auto;
  overflow:hidden;
}

#logo {
  width:200px;
  height:210px;
  position:absolute;
  z-index:1000;
  left:340px;
  top:179px;
}

#logo img {
  width:100%;
  height:auto;
}

/* Lesson Select */

#choicescont {
  width:1040px;
  height:500px;
  margin-top:50px;
  text-align:center;
  position:relative;
  left:50%;
  margin-left:-520px;
}

.choice {
  width:420px;
  height:550px;
  float:left;
  margin:10px;
  background-color:#ffffff;
  padding:40px;
  text-align:left;
  color:#60919B;
}

.desc {
  padding:10px;
  color:#60919B;
  font-weight:500;
  font-size:19px;
  line-height:20px;
}

.title {
  font-size:32px;
  color:#5eb1bf;
  font-weight:bold;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  -ms-transition: all .3s;    
  transition: all .3s;
}

.titlea {
  font-size:32px;
  color:#5eb1bf;
  font-weight:bold;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  -ms-transition: all .3s;    
  transition: all .3s;
}

.titlea:hover {
  margin-left:20px;
  font-style:italic;
}

/* About Tab */

#abouttab {
  height:60px;
  width:160px;
  background-color:#f4f4f4;
  background-image:url('http://s16.postimg.org/drlghdqtx/light_wool.png');
  position:relative;
  left:50%;
  margin-left:-100px;
  margin-top:-100px;
  border-top-left-radius:100px;
  border-top-right-radius:100px;
  border-left:20px solid #ef7b45;
  border-right:20px solid #ef7b45;
  border-top:20px solid #ef7b45;
  padding-top:20px;
  text-align:center;
  font-size:24px;
  font-weight:bold;
}

a #abouttab {
  color:#d84727;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  -ms-transition: all .3s;    
  transition: all .3s;
}

a #abouttab:hover {
  letter-spacing:1px;
}

/* About */

#about {
  width:100%;
  border-top:20px solid #ef7b45;
  border-bottom:20px solid #ef7b45;
  background-color:rgba(205,237,246,.2);
  margin-top:30px;
}

#boxes {
  width:1160px;
  height:430px;
  padding-top:60px;
  padding-bottom:30px;
  position:relative;
  left:50%;
  margin-left:-520px;
}

#aboutbox {
  width:420px;
  height:320px;
  padding:40px;
  background-color:#ffffff;
  margin-left:10px;
  margin-right:10px;
  /* cont 
  position:relative;
  left:50%;
  margin-left:-520px;*/
  float:left;
}

/* Us Tab */

#meettheteam {
  padding-top:50px;
  width:100%;
  border-top:20px solid #ef7b45;
  border-bottom:20px solid #ef7b45;
  background-color:rgba(205,237,246,.2);
  margin-top:30px;
}

#persons {
  width:1040px;
  height:890px;
  position:relative;
  margin-left:-520px;
  left:50%;
}

#personsbox {
  float:left;
  height:360px;
  width:285px;
  padding:20px;
  background-color:#fff;
  margin:10px;
  text-align:center;
}

#personsbox .desca {
  padding:10px;
  color:#60919B;
  font-weight:500;
  font-size:14px;
  line-height:20px;
}

/* Person box formatting */

#icon {
  height:150px;
  width:150px;
  border-radius:75px;
  overflow:hidden;
  background-color:grey;
  position:relative;
  left:50%;
  margin-left:-75px;
  margin-bottom:10px;
}

#icon img {
  height:150px;
  width:150px;
}

#personsbox b {
  font-size:20px;
  color:#d84727;
  font-weight:bold;
}

/* Sponsors Tab */

#sponsors {
  width:100%;
  border-top:20px solid #ef7b45;
  border-bottom:20px solid #ef7b45;
  background-color:rgba(205,237,246,.2);
  margin-top:30px;
  height:790px;
}

#sponsers {
  margin-top:60px;
  margin-bottom:30px;
  width:980px;
  height:440px;
  padding:20px;
  background-color:#fff;
  position:relative;
  left:50%;
  margin-left:-510px;
}

#sponsorinfo {
  margin-top:0px;
  margin-bottom:70px;
  width:980px;
  height:120px;
  padding:20px;
  background-color:#fff;
  position:relative;
  left:50%;
  margin-left:-510px;
}

#sponsers img {
  width:200px;
}

#water {
  float:left;
  width:200px;
  margin:30px;
  margin-left:50px;
}

#kiva {
  float:left;
  width:200px;
  margin:30px;
}

#dream {
  float:left;
  width:200px;
  margin:30px;
}

#emerge {
  float:left;
  width:200px;
  margin:30px;
  margin-left:190px;
}

#gwc {
  float:left;
  width:200px;
  margin:30px;
}

/* Bottom Bar */

#bar {
  width:100%;
  background-color:#d84727;
  padding-top:60px;
  padding-bottom:60px;
  text-align:center;
  color:#042a2b;
}

#bottom {
  background-color:#fff;
  height:200px;
  width:200px;
  border-radius:100px;
  position:relative;
  left:50%;
  margin-left:-100px;
  margin-bottom:30px;
  overflow:hidden;
}

#bottom img {
  height:200px;
  width:200px;
  margin-bottom:-15px;
}

/* Ads */
#adbar {
  width:1040px;
  height:120px;
  padding-top:30px;

  position:relative;
  left:50%;
  margin-left:-520px;
}

#ad {
  width:500px;
  height:120px;
  background-color:grey;
  float:left;
  margin-left:10px;
  margin-right:10px;
}

.quote {
  margin-bottom:30px;
  color:#AB1F1F;
  font-weight:bold;
}

/* Code Page */

#codecont {
  width:100%;
  padding-top:120px;
  border-top:20px solid #ef7b45;
  border-bottom:20px solid #ef7b45;
  background-color:rgba(205,237,246,.2);

}

#abouttabrev {
  height:60px;
  width:160px;
  background-color:#f4f4f4;
  background-image:url('http://s16.postimg.org/drlghdqtx/light_wool.png');
  background-attachment:fixed;
  position:absolute;
  left:50%;
  margin-left:-100px;
  margin-bottom:-100px;
  border-bottom-left-radius:100px;
  border-bottom-right-radius:100px;
  border-left:20px solid #ef7b45;
  border-right:20px solid #ef7b45;
  border-bottom:20px solid #ef7b45;
  padding-bottom:20px;
  text-align:center;
  font-size:24px;
  font-weight:bold;
}

a #abouttabrev {
  color:#d84727;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  -ms-transition: all .3s;    
  transition: all .3s;
}

a #abouttabrev:hover {
  letter-spacing:1px;
}

/* Notebook */
#notebook {
  width:700px;
  padding:50px;
  padding-left:130px;
  position:relative;
  left:50%;
  height:505px;
  margin-left:-450px;
  background-color:#fff;
  box-shadow:20px 0px rgba(3,3,3,.2);
}

#spirals {
  position:absolute;
  border-right:1px solid #eee;
  margin-left:-170px;
  padding-right:10px;
  margin-top:-50px;
  width:100px;
  height:100%;
  background-image:url('http://s17.postimg.org/6wh9b1kjz/Spiral.png');
  background-size: 100px 50px;  
}

#content {
  position:relative;
  text-align: left;
  width: 340px;
  height: 535px;
  overflow: hidden;
  color:#60919B;
}

.page {
  overflow: auto;
  height: 535px;
  padding-top:30px;
}

input {
  padding:10px 5px 10px 5px;
  border:2px solid #ef7b45;
  font-size:14px;
  color:#60919B;
  font-weight:bold;
}

.page a {
  font-size:25px;
  color:#d84727;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  -ms-transition: all .3s;    
  transition: all .3s;
}

.page a:hover {
  margin-left:20px;
}

.page a::before {
  content:"-> ";
}

select {
  padding:10px 5px 10px 5px;
  border:2px solid #ef7b45;
  font-size:14px;
  color:#60919B;
  font-weight:bold;
  margin-top:6px;
}

option {
  padding:10px 5px 10px 5px;
  border:2px solid #ef7b45;
  font-size:14px;
  color:#60919B;
  font-weight:bold;
}

#navig {
  font-size:30px;
  height:40px;
  color:#d84727;
  font-weight:bold;
}

.counter {
  height:0px;
  position:absolute;
  font-weight:bold;
  font-style:italic;
}