#cleardiv  {
clear:both;
height: 0;   /* I think I needed this because the sticky was fickle and I believe the issue */
width: 100%; /* was the clear I put on the nav. By taking off the clears on nav and using this div */
}            /* to clear, it seems to be working ok. Some of the prob was on page refresh. now ok */
             /* I since added sticky.js and erased other sticky stuff, but i decided to keep this. May not need it */
body  {
font-family: "Open Sans", sans-serif;
background: rgb(24, 86, 128);
}



#toparea  {
background-color: rgba(250, 250, 250, 1);
}


#toparea #mainlogo  {
float: left;
display: block;
width: 230px;
padding: 10px 0 0 10px;
}

#toparea #mainlogo img {
position: relative;
z-index: 5;
width: 100%;
}

#homeabout {
float: left;
margin: 58px 0 0 0;
}

#homeabout li  {
float: left;
margin: 0 20px;
list-style: none;
}

#homeabout li a  {
text-decoration: none;
}

/*************

Top mini "Navigation" Bar

*************/


#topnav ul li {
display: block;
padding: 10px 0;
}

#topnav ul #gsa img {
width: 45px;
}

#topnav #gsa  {
padding: 0;
margin: 0 0 0 34px;
}

#topnav ul	{
float: right;
padding: 0;
margin: 30px 6.6716% 18px 0;
}

#topnav li  {
font-weight: 600;
font-size: 0.875rem;
float: left;
margin: 0 8px;
list-style: none;
}

#topnav #phone  {
margin: 0 15px 0 8px;
}

/*************

Main Navigation Bar

*************/

nav {
text-align: center;
position: relative;
background: rgb(155, 184, 212);
background: -webkit-linear-gradient(top, rgba(150, 169, 187, 1) 10%,
rgba(150, 169, 187, 1) 30%, rgba(104, 122, 139, 1) 90%,
rgba(97, 113, 129, 1) 100%);
background: linear-gradient(to bottom, rgba(150, 169, 187, 1) 10%,
rgba(150, 169, 187, 1) 30%, rgba(104, 122, 139, 1) 90%,
rgba(97, 113, 129, 1) 100%);
width: 100%;
height: 58px;
box-shadow: 0 2px 4px 1px rgba(0,0,0,0.5);
z-index: 4;
}

nav > ul {
margin: 0;
padding: 0 0 0 220px;
}

nav ul li {
float: left;
position: relative;
display: block;
margin: 0 5px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
text-align: center;
}

nav li a  {
text-decoration: none;
padding: 5px;
margin: 15px 5px 14px;
display: block;
color: black;
}

nav ul li a:hover {
background: rgb(155, 184, 230);
background: -webkit-linear-gradient(bottom, rgba(182, 201, 219, 1),
rgba(150, 169, 187, 1) 62%, rgba(119, 141, 162, 1) 100%);
background: linear-gradient(to top, rgba(182, 201, 219, 1),
rgba(150, 169, 187, 1) 62%, rgba(119, 141, 162, 1) 100%);
box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2);
}

#prodevlink, #indeslink	{
padding: 5px;
margin: 5px;
}

nav ul li:nth-child(6) a:first-letter {
text-transform: none;
}

nav ul li:nth-child(4) li:first-child a:first-letter {
text-transform: none;
}

/*************

Submenu Area

*************/



nav ul li ul {
position: absolute;
top: 58px;
left: -5px;
background: rgb(150, 169, 187);
box-shadow: inset 5px 0 6px -2px rgba(0,0,0,0.4), 2px 3px 3px 1px rgba(0,0,0,0.4);
border-radius: 0 0 10px 10px;
opacity: 0;
padding: 0;
margin: 0;
-webkit-transition: opacity 0.3s linear 0.1s;
-moz-transition: opacity 0.3s linear 0.1s;
-o-transition: opacity 0.3s linear 0.1s;
transition: opacity 0.3s linear 0.1s;
}

nav ul li:hover ul  {opacity: 1;}


nav ul li ul li {
max-height: 0;
overflow: hidden;
width: 230px;
margin:0;
box-shadow: inset 2px -3px 6px -4px rgba(0,0,0,0.4);
-webkit-transition: all 0.4s 0.1s;
-moz-transition: all 0.4s 0.1s;
-o-transition: all 0.4s 0.1s;
transition: all 0.4s 0.1s;
}


nav ul li:hover ul li {
max-height: 88px;
height: auto;
overflow: visible;
} 

nav ul li ul li:nth-child(9) {
box-shadow: none;
}

nav ul li ul a	{
font-size: 0.75rem;
padding: 6px;
margin: 10px 20px;
display: block;
}



nav li ul li a:hover	{
box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.2);
background: rgb(155, 184, 230);
background: -webkit-linear-gradient(bottom, rgba(182, 201, 219, 1),
rgba(150, 169, 187, 1) 62%, rgba(119, 141, 162, 1) 100%);
background: linear-gradient(to top, rgba(182, 201, 219, 1),
rgba(150, 169, 187, 1) 62%, rgba(119, 141, 162, 1) 100%);
}

#prodevli ul  {
width: 460px;
}

#prodevli ul li {
width: 50%
}

/*******

Moving inSITE I

*******/

nav ul {
position: relative;
}

nav #eye  {
position: absolute;
top: 10px;
left: 206px;
background: url("../img/lettereye.png") no-repeat;
background-size: 35px;
width: 35px;
height: 35px;
-webkit-transition: left 0.6s ease-in;
-moz-transition: left 0.6s ease-in;
-o-transition: left 0.6s ease-in;
transition: left 0.6s ease-in;
}






nav ul li:nth-child(2):hover ~ #eye  {
left: 272px;
}

nav ul li:nth-child(3):hover ~ #eye  {
left: 406px;
}

nav ul li:nth-child(4):hover ~ #eye  {
left: 521px;
}

nav ul li:nth-child(5):hover ~ #eye  {
left: 648px;
}

nav ul li:nth-child(6):hover ~ #eye  {
left: 755px;
}

nav ul li:nth-child(7):hover ~ #eye {
left: 859px;
}

nav ul li:nth-child(9):hover ~ #eye  {
left: 1001px;
}






/*******

Setting up main content area

*******/

#basecontentcon  {
width: 90%;
margin: auto;
background-color: white;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.76);
}

#innercon  {
width: 90%;
margin: auto;
padding-bottom: 40px;
}

#innercon  h1 {
text-transform: uppercase;
padding: 40px 0 10px 1%;
margin: 0 0 40px 0;
background: rgba(24, 86, 128, 0.43);
background: -webkit-linear-gradient(white 20%, rgb(182, 120, 26) 20%, rgb(183, 120, 26) 30%,
rgba(24, 86, 128, 0.25) 30%, rgb(24, 86, 128) 100%);
background: linear-gradient(white 20%, rgb(182, 120, 26) 20%, rgb(183, 120, 26) 30%,
rgba(24, 86, 128, 0.25) 30%, rgb(24, 86, 128) 100%);
text-shadow: 1px 1px 1px white;
}


h2 {
margin: 40px 0;
}


/*********
classroom based section
*********/

#classroom  {
width: 90%;
margin: 0 auto 20px;
padding: 30px 4% 30px;
border: 3px solid rgba(0, 0, 0, 0.2);
background: white;
}

#classroom img  {
width: 50%;
float: right;
padding: 0 0 1.8% 1.8%;
}

#classroom:after {
content: "";
display: table;   /* like the clearfix hack  */
clear: both;
}

/*********
elearning section
*********/

#elearning  {
width: 90%;
margin: 0 auto 20px;
padding: 30px 4% 30px;
border: 4px solid rgba(0, 0, 0, 0.2);
background: white;
}

#elearning img  {
width: 50%;
float: left;
padding: 0 1.8% 1.8% 0;
}

#elearning:after {
content: "";
display: table;   /* like the clearfix hack  */
clear: both;
}



/*********
question section
*********/


#questionsec  {
width: 90%;
clear: both;
margin: 0 auto 20px;
padding: 30px 4% 30px;
border: 4px solid rgba(0, 0, 0, 0.2);
background: white;
}



#questionsec img {
padding: 5px;
border: 1px solid black;
width: 20%;
min-width: 110px;
}

/*********
The science section
*********/


#thescience  {
width: 90%;
margin: 0 auto 20px;
padding: 30px 4% 30px;
border: 4px solid rgba(0, 0, 0, 0.2);
background: white;
}

#thescience h2 {
display: inline-block;
}

#thescience img {
vertical-align: bottom;
padding-left: 20px;
}


/*********
table
*********/

th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}


table thead tr th:first-child {
border: none;
}

#tablevert th, #tablevert td {
padding: 2%;
}




/*******

Footer Area

*******/

footer {
color: #e4f7ff;
height: 280px;
width: 85%;
margin: auto;
}

#leftfoot  {
width: 220px;
float: left;
margin: 30px 0 0 0;
text-align: center;
}

footer #footerlogo  {
width: 220px;
}

footer #leftfoot a  {
color: #e4f7ff;
font-size: 1rem;
}

footer #middlefoot  {
float: left;
font-size: 1.2rem;
margin: 30px 0 0 13%;
}

#rightfoot {
float: right;
margin: 60px 0 0 0;
}

#rightfoot #footergsa {
width: 200px;
}

#rightfoot #footerastd  {
width: 60px;
padding: 0 0 22px 65px;
}

#rightfoot li {
list-style: none;
float: left;
margin: 0 8px;
}
#rightfoot ul  {
margin-top: 35px;
}

#copyright  {
clear: both;
text-align: center;
font-size: 0.7rem;
padding-top: 50px;
}

/*******

Phone navigation Area

*******/

#phonenav {
  height: 40px;
  width: 100%;
  background: rgb(24, 86, 128);
  font-size: 1.0rem;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  z-index: 3;
}

#phonenav ul  {
  padding: 0;
  margin: 0 auto;
  width: 100%;
  height: 40px;
}

#phonenav li  {
  display: inline;
  float: left;
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

#phonenav a {
  color: #fff;
  display: inline-block;
  width: 80%;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  margin: 5px 10%;
}

#phonenav #pnprodev  {
  line-height: 20px;
  margin: 5px 10% 10px;
}

#phonenav a:hover, #phonenav a:active {
  background-color: #8c99a4;
}

#phonenav a#pull {
  display: none;
  margin: 0;
}

#phonenav .pnphone, #phonenav .pnmail {
  position: absolute;
  line-height: 0;
  height: 30px;
  display: block;
  width: 30px;
  bottom: 0;
  margin: 0;
  padding: 5px 10px;
}

#phonenav .pnphone {
  right: 0;
}

#phonenav .pnmail {
  right: 50px;
}



#phonenav img {
  width: 100%;
}




/**********************

Media queries

**********************/

@media screen and (min-width: 300px)  {


  .disappear1 {
    display: none;  /*home and about us are gone from main nav */
  }

  #topnav #phone, #topnav #twitter, #topnav #linkedin {
    display: none;	/*phone number, twitter, and linked in are gone from top*/
  }

  .disappearli  {
    display: none;  /* menu and submenu of Instructional Design is gone */
  }

  

  .isd  {
    display: block;   /* menu of ISD appears  */
  }

  nav ul  {
    padding: 0;  /* nav ul is not next to logo so have no padding  */
  }


 

  #toparea #mainlogo  {
    float: none;   /* put main logo in center of page  */
    margin: auto;
    padding: 9px 0 0 0;
  }

  #homeabout, #topnav, #toparea nav  {
    display: none;  /*disappear homeabout, topnav, and main nav */
  }

#undefined-sticky-wrapper {
display: none; /*get rid of wrapper created by sticky plugin*/
}


  /******************* phonenav stuff ***************/

  #phonenav {
    height: auto;
  }
  #phonenav ul  {
    display: block;
    height: auto;
    display: none;
  }
  #phonenav li  {
    width: 50%;
    float: left;
    position: relative;
  }
  
  #phonenav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
    background-image: url("../img/nav-icon.png");
    background-repeat: no-repeat;
    background-position: 21% 50%;
    text-align: left;
    text-indent: 5%;
  }




  /***************** end of phonenav stuff **********/






  /*************** table area  *******************/

#tablehori {
display: none;
}



/*************** footer area  *******************/


footer  {
    width: 94%;
margin: auto;
height: auto;
  }

footer #leftfoot {
width: 100%;
float: none;
}

 footer #middlefoot  {
    margin: 30px 0 0 6%;  /* make middle col of footer have smaller right margin  */
    float: none;
    width: auto;
  }


  
  #rightfoot  {
    clear: both;
    float: none;
    padding: 0px 0 0 0;
    text-align: center;
  }

  #rightfoot ul  {
    padding: 0;
  }

  

  
}

@media screen and (min-width: 450px)  {




}

@media screen and (min-width: 600px)  {

/*********** putting insiteful games to right etc  **********/










}

@media screen and (min-width: 675px) {

#homeabout, #toparea nav  {
    display: block;  /*bring back homeabout and main nav */
  }

  #toparea #mainlogo  {
    float: left;   /* put main logo at left of page  */
    margin: auto;
    padding: 10px 0 0 10px;
  }


  #phonenav  {
    display: none;
  }

#undefined-sticky-wrapper {
display: block; /*get rid of wrapper created by sticky plugin*/
}


nav > ul {
margin: auto;
width: 650px;
}

nav #eye {
top: 10px;
left: -22px;
}

nav ul li:nth-child(2):hover ~ #eye  {
left: -22px;
}

nav ul li:nth-child(3):hover ~ #eye  {
left: 114px;
}

nav ul li:nth-child(4):hover ~ #eye  {
left: 231px;
}

nav ul li:nth-child(5):hover ~ #eye  {
left: 357px;
}

nav ul li:nth-child(6):hover ~ #eye  {
left: 464px;
}

nav ul li:nth-child(8):hover ~ #eye {
left: 561px;
}


#tablehori  {
display: table;
}

#tablevert {
display: none;
}





}



@media screen and (min-width: 720px)  {

  nav > ul  {
    margin: auto;
    width: 650px;
  }  
  

  #topnav {
    display: block;  /* bring back top right nav area  */
  }









}

@media screen and (min-width: 835px)  {



}

@media screen and (min-width: 990px)  {


  #topnav #phone, #topnav #twitter, #topnav #linkedin {
    display: block;   /*phone number, twitter, and linked in come back on top*/
  }

 

  nav ul  {
   padding: 0 0 0 220px;  /* add padding to nav ul when it moves up*/
  }

  .isd  {
    display: none;   /* menu of ISD disappears  */
  }
  .disappearli {
    display: block;   /* menu of Instructional Design appears  */
  }
  .disappearli ul  {
    display: none;
  }

  nav > ul  {
    margin: 0;
    width: auto;
  } 

nav #eye {
top: 10px;
left: 192px;
}

nav ul li:nth-child(2):hover ~ #eye  {
left: 197px;
}

nav ul li:nth-child(3):hover ~ #eye  {
left: 333px;
}

nav ul li:nth-child(4):hover ~ #eye  {
left: 450px;
}

nav ul li:nth-child(5):hover ~ #eye  {
left: 578px;
}

nav ul li:nth-child(6):hover ~ #eye  {
left: 681px;
}

nav ul li:nth-child(7):hover ~ #eye {
left: 785px;
}




/****************footer***************/

footer {
height: 280px;
width: 85%;
}

footer #leftfoot  {
float: left;
width: 220px;  /*keep or maybe use auto  *******/
}

footer #middlefoot  {
float: left;
margin: 30px 0 0 8%;
}

#rightfoot {
float: right;
clear: none;
}


}


@media screen and (min-width: 1100px) {


  .disappearli ul {
    display: block;   /* submenu of Instructional Design appears  */
  }


 









}


@media screen and (min-width: 1170px) {


  #homeabout  {
    display: none;     /*small home and about us links at top disappear */
  }

  .disappear1 {
    display: block;   /*  Home and About Us on main nav bar appear  */
  }

nav ul li:nth-child(2):hover ~ #eye  {
left: 272px;
}

nav ul li:nth-child(3):hover ~ #eye  {
left: 406px;
}

nav ul li:nth-child(4):hover ~ #eye  {
left: 521px;
}

nav ul li:nth-child(5):hover ~ #eye  {
left: 648px;
}

nav ul li:nth-child(6):hover ~ #eye  {
left: 755px;
}

nav ul li:nth-child(7):hover ~ #eye {
left: 859px;
}

nav ul li:nth-child(9):hover ~ #eye  {
left: 1001px;
}

  footer #middlefoot  {
    margin: 30px 0 0 13%;  /* make middle col of footer have smaller right margin  */
  }

}