/* Built by Aaron Klabunde, http://www.jimpstudio.com April 2009 */

body {
  max-width: 980px;
  margin: 0 auto;
  background-color: white;
  font-family: arial, helvetica, verdana, sans-serif;
  font-size: 12px;
  color: #000000;
}
div.container {
  border: 0px;
  margin: 0 auto;
  width: 100%;
  max-width: 980px;
  min-height: 640px;
}
div.header {
  margin: 8px 0 0 0;
  padding: 0;
  max-width: 980px;
  min-height: 146px;
  font-size: 32px;
  line-height: 120%;
  color: #ffefcc;
  text-align: center;
  font-weight: bold;
  font-family: arial, helvetica, verdana, sans-serif;
  background-color: #c6c6c6;
  border-left: 8px solid #e6e6e6;
  border-top: 8px solid #e6e6e6;
  position: relative;
  z-index: 500;
}
#title {
  margin: 0;
  padding: 46px 10px 10px 0;
  font-size: 42px;
  color: #007;
  line-height: 120%;
  text-align: center;
  font-weight: 300;
  font-family: arial, helvetica, verdana, sans-serif;
}
#title a:link {
  color: #007;
  text-decoration: none;
}
#title a:hover {
  color: #00009a;
  text-decoration: none;
}
#title a:visited {
  color: #007;
  text-decoration: none;
}
#title a:active {
  color: #007;
  text-decoration: none;
}
#author {
  margin: 0px;
  padding: 0px 40px;
  font-size: 20px;
  color: #066;
  line-height: 120%;
  text-align: right;
  font-weight: 600;
  font-family: arial, helvetica, verdana, sans-serif;
}
#author a:link {
  color: #066;
  text-decoration: none;
}
#author a:hover {
  color: #008a8a;
  text-decoration: none;
}
#author a:visited {
  color: #066;
  text-decoration: none;
}
#author a:active {
  color: #066;
  text-decoration: none;
}
div.gadtop {
  margin: 0;
  padding: 0px;
  max-width: 968px;
  font-size: 10px;
  line-height: 120%;
  color: #ffefcc;
  text-align: right;
  font-weight: bold;
  font-family: arial, helvetica, verdana, sans-serif;
  position: relative;
  z-index: 4;
  display: inline-block;
}

/* Main Content Area */
div.content {
  margin: 0px 8px 0px 214px;
  padding: 0px;
  font-size: 14px;
  line-height: 130%;
  color: #000;
  font-weight: normal;
  font-family: arial, helvetica, verdana, sans-serif;
  position: relative;
  text-align: left;
}
/* In-Content Text Box */
div.tboxr {
  padding: 0px;
  margin: 10px 0px 10px 14px;
  border: 6px solid #f1f7f7;
  background-color: #f1f7f7;
  min-width: 20px;
  min-height: 20px;
  font-family: arial, helvetica, verdana, sans-serif;
  color: #002;
  line-height: 120%;
  font-size: 14px;
  text-align: left;
  float: right;
}
div.tboxr img {
  border: 6px solid white;
}
div.tboxr h2 {
  text-align: center; 
}
div.gadright, div#div-gpt-ad-300x250-rec1, div#div-gpt-ad-300x250-rec2 {
  margin: 10px 0px 10px 14px;
  border: 6px solid #f1f7f7;
  float: right;
}
div#div-gpt-ad-728x90-top, div#div-gpt-ad-728x90-bottom {
  position: relative;
  z-index: 200;
  text-align: center;
  margin: 1em 0;
  border: 0 solid #f1f7f7;
}
span.equation {
  margin: 6px 0;
  padding: 6px;
  line-height: 200%;
  background-color: #e6e6e6;
  font-family: courier, serif;
  color: #650000;
  font-size: 16px;
  font-weight: 600;
}  
  
/* Navigation Bar at top of content  */
div.navbar {
  margin: 0px auto;
  padding: 0px 0px;
  text-align: center;
  line-height: 120%;
}
div.menutab {
  display: inline;
}
div.menutab a {
  display: inline-block;
  margin: 0 0 4px 0;
  padding: 4px 0px 0px 0px;
  border-left: 4px solid white;
  border-right: 4px solid white;
  width: 120px;
  height: 22px;
  line-height: 120%;
  background-color: #e6e6e6;
  font-size: 14px;
  color: #003a3a;
  text-align: center;
  font-weight: 500;
  font-family: arial, helvetica, verdana, sans-serif;
  display: inline-block;
}
div.menutab a:link {
  text-decoration: none;
  color: #003a3a;
}
div.menutab a:visited {
  text-decoration: none;
  color: #3a3a3a;
}
div.menutab a:hover {
  text-decoration: none;
  color: #008a8a;
  background-color: #c6c6c6;
}
div.menutab a:active {
  text-decoration: none;
  color: #008a8a;
}
/* Left Column, including Menu buttons */
div.leftcol {
  margin: 0 14px 0 0;
  padding: 0;
  width: 200px;
  background-color: #e6e6e6;
  font-size: 14px;
  color: #003a3a;
  text-align: center;
  font-weight: 700;
  font-family: arial, helvetica, verdana, sans-serif;
  float: left;
  line-height: 100%
}
.float-left {
  float: left;
}
div.leftcol p {
  padding: 0px;
  margin: 6px 0px;
}
div.button a {
  display: block;
  margin: 2px 8px;
  padding: 1px 0px 1px 0px;
  width: 184px;
  background-color: #c6c6c6;
  font-size: 14px;
  color: #003a3a;
  text-align: center;
  font-weight: 500;
  font-family: arial, helvetica, verdana, sans-serif;
}
div.button a:link {
  text-decoration: none;
  color: #003a3a;
}
div.button a:visited {
  text-decoration: none;
  color: #3a3a3a;
}
div.button a:hover {
  text-decoration: none;
  color: #008a8a;
  background-color: #d6d6d6;
}
div.button a:active {
  text-decoration: none;
  color: #008a8a;
}
/* Bullet Point Navigation for Multi-Page Articles */
div.ulbold {
  padding: 2px 0px;
  margin: 0px 60px;
  font-weight: 600;
  line-height: 120%;
  background-color: #f1f7f7;
}
  
/* Headings, general links, footer, etc. */
h1 {
  margin: 8px 0px 0px 0px;
  padding: 6px 30px;
  text-align: center;
  font-size: 24px;
  color: #cc2200;
  line-height: 125%;
}
h2 {
  margin: 8px 0px 0px 0px;
  padding: 0px;
  text-align: left;
  font-size: 18px;
  color: #223a3a;
  line-height: 125%;
}
h3 {
  margin: 4px 0px -8px 0px;
  padding: 0px 20px 0px 0px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: #225a5a;
  line-height: 115%;
}
a:link {
  text-decoration: underline;
  color: #003a3a;
}
a:hover {
  text-decoration: underline;
  color: #008a8a;
}
a:visited {
  text-decoration: underline;
  color: #3a3a3a;
}
a:active {
  text-decoration: underline;
  color: #008a8a;
}
div.disclaim {
  padding: 1.5em 3em;
  background-color: #e6e6e6;
  color: #dd3f11;
  clear: left;
  font-family: arial, helvetica, verdana, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
  text-align: center;
}
div.footer {
  min-height: 90px; 
  padding: 1.5em 3em;
  background-color: #c6c6c6;
  color: black;
  clear: left;
  line-height: 150%;
  font-family: arial, helvetica, verdana, sans-serif;
  font-size: 13px;
  text-align: center;
}
li {
  text-align: left;
  padding: 0px 0px;
  margin: 0px 10px 0px 30px;
  font-weight: 500;
}
ul {
  padding: 0px 0px;
  line-height: 130%;
}
td {
  padding: 4px;
}
tr {
  background-color: #f1f7f7;
}

/*  MOBILE STYLES */

div.leftcol .navbutton {
     background: transparent none;
}

/* replaces viewport meata tag in IE10 and all future browsers... */
@media screen and (max-width:400px) {
     @-ms-viewport { width: device-width; }
     @-o-viewport { width: device-width; }
     @viewport { width: device-width; }
}

@media screen and (max-width: 960px) {
     
     div#div-gpt-ad-728x90-top, div#div-gpt-ad-728x90-bottom {
          max-width: 100%;
          overflow-x: scroll;
     }
     #title {
          font-size: 29px;
     }
     #author { font-size: 18px; }
     .header img {
          width: 160px; 
     }
     div.header {
          /*min-height: auto;*/
     }
}

@media screen and (max-width: 780px) {
     div.content {
          margin: 0px 8px 0px 42px;
     }
     #title {
          padding: 16px 20px 10px 0;
          text-align: right;
          font-size: 20px;
     }
     #author { font-size: 14px; }
     .header img {
          width: 84px; 
     }
     div.header {
          min-height: 90px;
     }
     div.header {
          min-height: auto;
     }
     div.leftcol {
          margin: 0 0 0 0;
          padding-top: 1em;
          border-radius: 0 10px 0 0;
          cursor: pointer;
          width: 30px;
          text-align: center;
          overflow: hidden;
          position: absolute;
          top: 80px;
          left: 0;
          z-index: 400;
          box-shadow: #bbb 0.4em 0 0.4em 0;
          -moz-transition: width 0.4s, box-shadow 0.4s, z-index 0.8s;
          -webkit-transition: width 0.4s, box-shadow 0.4s, z-index 0.8s;
          -o-transition: width 0.4s, box-shadow 0.4s, z-index 0.8s;
          -ms-transition: width 0.4s, box-shadow 0.4s, z-index 0.8s;
          transition: width 0.4s, box-shadow 0.4s, z-index 0.8s;
     }
     div.leftcol p, div.leftcol div#div-gpt-ad-160x600-sky1 {
          padding: 0px;
          margin: 6px 0 6px 40px;
          width: 188px;
          -moz-transition: margin 1.0s;
          -webkit-transition: margin 1.0s;
          -o-transition: margin 1.0s;
          -ms-transition: margin 1.0s;
          transition: margin 1.0s;
     }
     div.button a {
          display: block;
          margin: 2px 8px 2px 40px;
          padding: 1.25em 0;
          width: 184px;
          border-bottom: 2px solid #e6e6e6; 
          text-align: center;
          font-weight: 500;
          -moz-transition: margin 1.0s;
          -webkit-transition: margin 1.0s;
          -o-transition: margin 1.0s;
          -ms-transition: margin 1.0s;
          transition: margin 1.0s;
     }
     div.leftcol-hover {
          background-image: none;
          width: 200px;
          text-align: center;
          z-index: 600;
          box-shadow: #000 1em 0 9em 0;
          -moz-transition: width 0.8s, box-shadow 1.0s;
          -webkit-transition: width 0.8s, box-shadow 1.0s;
          -o-transition: width 0.8s, box-shadow 1.0s;
          -ms-transition: width 0.8s, box-shadow 1.0s;
          transition: width 0.8s, box-shadow 1.0s;
     }
     div.leftcol-hover p, div.leftcol-hover div#div-gpt-ad-160x600-sky1 {
          margin: 6px 0 6px 6px;
          -moz-transition: margin 1.0s;
          -webkit-transition: margin 1.0s;
          -o-transition: margin 1.0s;
          -ms-transition: margin 1.0s;
          transition: margin 1.0s;
     }
     div.leftcol-hover div.button a {
          margin: 2px 8px;
          -moz-transition: margin 1.0s;
          -webkit-transition: margin 1.0s;
          -o-transition: margin 1.0s;
          -ms-transition: margin 1.0s;
          transition: margin 1.0s;
     }
     div.leftcol .navbutton {
          display: block;
          background: transparent url('/themes/cvphys2015/images/nav-bars.png') center center no-repeat;
          cursor: pointer;
          width: 30px;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 800;
     }
     div.leftcol-hover .navbutton {
          display: block;
          background: transparent url('/themes/cvphys2015/images/nav-close.png') 14px center no-repeat;
          width: 100%;
          left: 200px;
          height: 100%;
          position: fixed;
          top: 0;
          z-index: 800;
     }
     img {
          max-width: 100%;
     }
}