/*
Project: 15-16_30
Author: Richy Thomas
Palette: Color:
*/

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900,900italic,700italic,700,600italic,600,400italic,300italic,200italic,200,300);


/* Structure */

  body {
    background: #F5F5F5;
    font-family: 'Source Sans Pro', sans-serif;
    overflow-x: hidden;
    position: relative;
  }


/* Typography */

  h1 {
    color: #FFF;
    font-size: 5em;
    font-weight: 100;
    margin: 0;
    text-transform: uppercase;
  }

  h2 {
    font-size: 3em;
    font-weight: 600;
    margin: 0 0 1em 0;
  }

  h3 {
    font-size: 1.8em;
    font-weight: 600;
  }

  h4 {
    font-size: 1.6em;
    font-weight: 600;
    margin: 1em 0 .5em 0;
	text-decoration:underline;
  }

  h5 {
    font-size: 1.4em;
    font-weight: 600;
     margin: 1em 0 .5em 0;
  }

  p, ul, ol {
    font-size: 1.4em;
    line-height: 1.6em;
    font-weight: 400;
  }

  ul ul, ol ol, ul ol, ol ul {
    font-size:1em;
  }

  strong {
    font-weight: 600;
  }

/* Navigation Mobile */

.navbar-brand {
  padding: 9px 15px;
}

img#logo-wjec-thumb {
    margin-top: -13px;
}
/* Header */

  header {
    background-color: #3f95ea;
    background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #52d3aa));
    background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
    background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #52d3aa 100%);
    background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
    font-family: 'Source Sans Pro', sans-serif;
  }

  #page-info {
    padding: 14em 0 12em;
  }
  
#intro{
	  margin-top:3em;
	  background: rgba(0,0,0,0.10);
	  padding:1.5em;
	  border-radius: 7px;
	  color:white;
	  text-align:left
  }
  
#content{
	margin-top: 1em;
    background: rgba(0,0,0,0.10);
    padding: 1.5em;
    border-radius: 7px;
    color: white;
    text-align: left;
    width: 70%;
    margin-left: auto;
    margin-right: auto
  }
  
  #content{
	  list-style-type: none;
	    text-align:center;

  }
  
    #content ul{
		padding: 0;

		list-style-type:none;
  }
  
  .quote{
	  text-align:center;
	  padding: 2em 2em;
	  font-style:italic;  
  }
.author{
	  float:right;
	  font-weight: bolder;
	  padding-right:15%;
  }
  
  img{
	  padding:10px
	  }
	  

.diagram{
	display: block;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 2em;
	width: 90%;
	max-width:800px;
 }	  

.highlight{
	margin: 10px 15%;
    width: 75%;
    background: #ddd;
    padding: 20px;
    border-radius: 5px;
	color: black;
}

/* Footer */

  footer {
    color: #333;
    padding: 1em 0;
	min-height:10em;
  }

  footer p {
    margin: 0;
    letter-spacing: .1em;
  }
  
  .scroll-top {
   position:fixed;
   bottom:0;
   right:0.75%;
   z-index:100;
   background: #888;
   font-size:15px;
   border-top-left-radius:3px;
   border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
   color:#222;
   border-top-left-radius:3px;
   border-top-right-radius:3px;
   background: #337ab7;
} 

.to-home {
   position:fixed;
   top:10%;
   left:0%;
   z-index:100;
   background: #888;
   font-size:15px;
   border-top-right-radius:3px;
   border-bottom-right-radius:3px;
}

.to-home a:link, .to-home a:visited {
   color:#222;
   border-top-right-radius:3px;
   border-bottom-right-radius:3px;
   background: #52d3aa;
} 

.to-home a:hover, .to-home a:active, .scroll-top a:hover, .scroll-top a:active{
	background-color:#555!important;
}

.glyphicon {
    color: white;
}

/*.glyphicon:hover {
    color: black;
}*/


/* Section Angled Dividers */

.divider-top {
  background-color: #F5F5F5;
  content: "";
  height: 70px;
  margin-bottom: -30px;
  padding: 0;
  width: 101%;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
}

.divider-bottom {
  background-color: #F5F5F5;
  content: "";
  height: 70px;
  margin-top: -30px;
  padding: 0;
  width: 101%;
  transform: rotate(-1.7deg);
  -ms-transform: rotate(-1.7deg);
  -webkit-transform: rotate(-1.7deg);
  -o-transform: rotate(-1.7deg);
  -moz-transform: rotate(-1.7deg);
}

.divider-top.white, .divider-bottom.white {
  background-color: #FFF;
}

/* Section Styles */

.odd {
  background: #F5F5F5;
  color: #333;
  padding: 0 0 2em;
}

.even {
  background-color: #52d3aa;
  background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #52d3aa));
  background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
  background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #52d3aa 100%);
  color: #FFF;
  padding: 8em 0 6em;
}

.video {
  background: #F5F5F5;;
  padding-bottom: 7em;
}


/* Wells */

.well {
  border-radius: 7px;
  border: none;
}

.well h3 {
  margin: .5em 0 1em;
}

.well h4 {
  margin: .5em 0 1em;
}

.odd .well {
  background: #FFF;
  border: 2px solid #EEE;
}

.well.quick-check {
  background: rgba(63, 149, 234, 0.2);
  border: 2px solid rgba(63, 149, 234, 1);
  color: #000;
}

.well.exam-style-questions {
  background: rgba(82 ,211, 170, 0.2);
  border: 2px solid rgba(82 ,211, 170, 1);
  color: #000;
}

.well.practical-examples {
  background: rgba(254, 193, 7, 0.2);
  border: 2px solid rgba(254, 193, 7, 1);
  color: #000;
}

.well.top-tip {
  background: rgba(190, 30, 45, 0.2);
  border: 2px solid rgba(190, 30, 45, 1);
  color: #000;
}

.even .well {
  background: rgba(255,255,255, 0.8);
  color: #333;
}

.well.white {
  background: #FFF;
}

/* Tables */

.table {
  font-size: .9em;
  margin: 1em 0;
}

.table-bordered {
  border: 1px solid #777;
}

.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
  border: 1px solid #777;
}

/* Images & Video */

.img-thumbnail {
  margin: 1em 0;
}

.img-center {
  margin: 0 auto;
}

.spacing-container {
  margin: 1.5em 0;
}

#video-container {
  margin: 1em 0 2em;
}

/* Modal */

.modal-title {
  color: #333!important;
  margin: 0!important;
}

.modal-body {
  color: #333!important;
  font-size: .9em!important;
}

.letter-list{
	list-style-type:lower-alpha;
}

.modal-body table {
    width: 80%;
    margin: auto;
	margin-bottom: 1.5em;
}

.modal-body th, .modal-body td  {
    border: 1px solid #000;
    padding: 10px;
	
}


/* Tablet */
@media(min-width: 768px){

  .navbar-default .navbar-nav {
    text-align: center;
  }

  .navbar-default .navbar-nav>li>a {
    border-right: 1px solid #E7E7E7;
    color: #7e7e7e;
    font-size: .9em;
    font-weight: 500;
    line-height: 1.3em;
    border-top: 4px solid #FFF;
  }

  .navbar-default {
    background: #FFF;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
  }

  .navbar-default .navbar-nav>li>a:hover {
    background-color: transparent;
    color: #000;
  }

  .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    background-color: transparent;
    color: #3f95ea;
    border-top: 4px solid #52d3aa;
  }

#logo-wjec {
    margin: 3px 0;
  }

.modal-dialog {
    width: 749px;
    margin: 30px auto;
}
}

/* Desktop */
@media(min-width:992px){

}

/* Large Desktop */
@media(min-width:1200px){

}