/* 
 * jsti.css
 */

/* box model sizing */
* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
/* ID's */

#root { max-width: 1200px; margin: 0 auto; }

/* header and footer */
#header { 
   width: 100%; 
   float: left;
}

#headerlogo { 
   width: 50%; 
   float: left;
   text-align: center; 
}

#headertext { 
   width: 50%;
   margin: 0 auto; 
   float: left;
   padding-top: 4em;
   text-align: center; 
}

#headerlogo img {
   width: 100%;
   height: 100%;
}


/* Classes */
.bold { font-weight: bold; }
.normal { font-weight: normal; }
.italic { font-style: italic; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.underline { text-decoration: underline; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

.black { color: #000000; background-color: transparent; }
.red { color: #FF0000; background-color: transparent; }
.green { color: #008000; background-color: transparent; }

/* background colors used to paint div boxes */
.ltgreen_box { background-color: #E5FFB0; }
.ltblue_box { background-color: #E6E6FA; }
.ltpurple_box { background-color: #F2E8DC; }

.error { color: red; }

.halfheighttext { font-size: 50%; }
.threeqtrheighttext { font-size: 75%; }

.articlefooter {
   font-family: 'Oswald', sans-serif;
   font-size: 90%; 
   margin-left: 2em;
}


/* Elements */
footer { 
   width: 100%; 
   padding-top: 3em;
   margin: 0 auto; 
   font-family: 'Oswald', sans-serif; 
   font-size: 10px; 
   clear: both;
}

main {
   width: 100%; 
   float: left;
}

/* 
   The following Google font families are supported by the GSR website
   Lato, Oswald, Montserrat )(as defined in the header file)
   
   Use the following in CSS files
   font-family: 'Oswald', sans-serif;
   font-family: 'Montserrat', sans-serif;
   font-family: 'Lato', sans-serif;
   font-family: 'Vollkorn', serif
*/

/* nav bar */
nav {
   background-color: #33CC33;
   border: 1px solid #dedede;
   border-radius: 4px;
   box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
   color: #AAA;
   display: block;
   overflow: hidden;
   width: 100%;
   float: left;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
   display: inline-block;
   list-style-type: none;
      
   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   -ms-transition: all 0.2s;
   -o-transition: all 0.2s;
   transition: all 0.2s;    
}
      
nav > ul > li > a > .caret, 
nav > ul > li > div ul > li > a > .caret {
   border-top: 4px solid #000;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   content: "";
   display: inline-block;
   height: 0;
   width: 0;
   vertical-align: middle;
  
   -webkit-transition: color 0.1s linear;
   -moz-transition: color 0.1s linear;
   -o-transition: color 0.1s linear;
   transition: color 0.1s linear;    
}
	  
nav > ul > li > div ul > li > a > .caret {
	border-bottom: 4px solid transparent;
	border-top: 4px solid transparent;
	border-right: 4px solid transparent;
	border-left: 4px solid #f2f2f2;
	margin: 0 0 0 8px;
}

nav > ul > li > a {
     color: #000;
     display: block;
     line-height: 56px;
     padding: 0 24px;
     text-decoration: none;
   }

nav > ul > li:hover {
   background-color: rgb( 40, 44, 47 );
}

nav > ul > li:hover > a {
   color: rgb( 255, 255, 255 );
}

nav > ul > li:hover > a > .caret {
   border-top-color: rgb( 255, 255, 255 );
}
	
nav > ul > li > div ul > li:hover > a > .caret {
	border-left-color: rgb(255,255,255);
}
   
 nav > ul > li > div,
 nav > ul > li > div ul > li > div {
   background-color: rgb( 40, 44, 47 );
   border-top: 0;
   border-radius: 0 0 4px 4px;
   box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
   display: none;
   margin: 0;
   opacity: 0;
   position: absolute;
   width: 165px;
   visibility: hidden;
 
   -webkit-transiton: opacity 0.2s;
   -moz-transition: opacity 0.2s;
   -ms-transition: opacity 0.2s;
   -o-transition: opacity 0.2s;
   -transition: opacity 0.2s;
}
 
nav > ul > li > div ul > li > div {
	background-color: rgb( 40, 44, 47 );
	border-radius: 0 4px 4px 4px;
	box-shadow: inset 2px 0 5px rgba(0,0,0,.15);
	margin-top: -42px;
	right: -165px;
}

nav > ul > li:hover > div,
nav > ul > li > div ul > li:hover > div {
   display: block;
   opacity: 1;
   visibility: visible;
   z-index: 1;
}

nav > ul > li > div ul > li,
nav > ul > li > div ul > li > div ul > li {
   display: block;
	position: relative;
}

nav > ul > li > div ul > li > a,
nav > ul > li > div ul > li > div ul > li > a {
   color: #fff;
   display: block;
   padding: 12px 24px;
   text-decoration: none;
}

nav > ul > li > div ul > li:hover > a {
   background-color: rgba( 255, 255, 255, 0.1);
}

/* use this font style for all body text unless overridden, i.e. header & footer */
body {
    font-family: 'Lato', sans-serif;
}

/* Here are some common classes used on the site. */
/* We are using the font-family defined above for the bulk of the site. */
h1 {
   font-family: 'Montserrat', sans-serif; 
   font-size: 26pt;
   font-weight: bold;
   color: #009933;
   background-color: transparent;
}

h2 {
   font-family: 'Lato', sans-serif;
   font-size: 24px;
   font-weight: bold;
   color: #009933;
   background-color: transparent;
}

h3 {
   font-family: 'Lato', sans-serif;
   font-size: 20px;
   font-weight: bold;
   color: #009933;
   background-color: transparent;
}

h4 { font-family: 'Lato', sans-serif;
   font-size: 16px;
   font-weight: bold;
   color: #009933;
   background-color: transparent;   
}


/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
   #content { width: 100%; }
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
   #content { width: 100%; }
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
   #content { width: 100%; }
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
   #content { width: 100%; }
}