body 
{ 
  background-image:url('../images/background.png'); 
  background-repeat:no-repeat;
  background-position:center top;
  background-color:rgb(7,8,17);
  text-align:center; 
  font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10.83px;
  margin: 0px;
  color: #FFF;
}

body.map{background-image:url('../images/map.jpg');}
body.stones{background-image:url('../images/cobblestones.jpg');}
body.beach{background-image:url('../images/beach.jpg');}
body.city{background-image:url('../images/cityscape.jpg');}
.endless {
  color: #000;
  background-image: url('../images/clouds.jpg');
  background-repeat: repeat-y;
}
.endless-bottom {
  background-image: url('../images/city-bottom.png');
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 220px;
  position: relative; 
}

.txtbox p {color:white;}

.endless a { color:#333 !important;}
.endless a:hover { color:#777 !important; text-decoration: underline !important;}

a {color:#b7ebed; text-decoration:none;}
a:hover {color:#71b6cc; text-decoration:underline;}
a:active {color:#3b7477;}

.rnd { border-radius:2px; }

div.main {
  max-width:980px;
  min-height: 650px;
  margin-left: auto;
  margin-right: auto;
}

.mc {
  padding: 10px 50px;
  text-align: left;
}

.header {
  height:226px;
  background: url("../images/header.png") no-repeat left top;
}

.header nav {
  padding-top: 6em;
  padding-left: 5em;
}

nav ul {
  list-style-type: none;
  margin: 0px;
}

nav ul li {
  display: inline;
  margin: 0px 1.5em;
}

div.txtbox
{
  max-width: 380px;
  float: left;
  padding: 0.5em;
  border-radius: 4px;
  margin: 0px 3em;
  background-color: rgba(0, 0, 0, 0.6);
}

div.fulltxtbox
{
  padding: 0.5em 2em;;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.6);
}

#largetxt { width:530; height:250; }

p.main 
{
  text-align:left;
}

#olaytext
{
  /*float:left; */
  width:365px; 
  /*height:239px; */
  text-align:left;
  /*position:relative; */
  /*z-index:1;*/
  /*right:340;*/
  color:#fff;
}

.grey-border {
  border: 1px solid #999;
}

.grey-background {
  background:#ccc;
}

.three-qtrs-width {
  max-width: 75%;
}

.full-width{
  max-width: 100%;
}

.text-center {
  text-align: center;
}

.col {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;
}

.align-center {
  margin-left: auto;
  margin-right: auto;
}

.align-contents-center {
  text-align: center;
}

.row {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
}

.media-container {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}

.mediaItem {
  width: 32%;
  margin: 10px 10px 10px 0px;
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}

.mediaImage {
  flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
}

.mediaDesc {
  flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
}

.stillImage {
  height: 400px;
}

.mediaDesc-below{
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.mediaDesc a {
  color: black;
  font-style: italic;
}

.mediaItem .tn {
  border:0px;
  height:120px;
  width:80px;
  float:left;
  margin-right:10px;
}

.subHdr {
  font-weight:bold;
  margin-top:15px;
  margin-bottom:15px;
  border-bottom:1px solid #FFF;
  color: white;
  width: 100%;
}

.awardLogo {
  float:left;
  width:130px;
  margin-top:10px;
}

.awardText {
  margin-top:15px;
  color:#fff;
}

hr {
  border:1px solid #ccc;
  height:1px;
}

div.boxes {
  clear: both;
  padding: 1em 0px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  display: -webkit-flex;
  -webkit-justify-content: space-around;
  -webkit-flex-wrap: wrap;
}

.boxes .box {
  height: 12.9em;
  width: 22.4em;
  position: relative;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,.75);
}

.box-form {
  position: absolute;
  bottom: 0px;
  width: 100%;
  margin: 0.7em 0px;
}

.social {
  float: right;
  position: absolute;
  top: 3.5em;
  right: 1em;
}

img.icons {
  display: block;
  margin: 0.5em 0px;
}

.see-it {
  background: url("../images/whaling-city-see-the-film-new.jpg") no-repeat;
}

.stay-in-touch {
  background: url("../images/whaling-city-stay-in-touch-new.jpg") no-repeat;
}

.support {
  background: url("../images/whaling-city-support-the-film-new.jpg") no-repeat;
}

#footer {
  margin-right: auto;
  margin-left: auto;
  font-size: 12.5px;
  color:#fff;
  max-width:960px;
  margin-bottom:50px;
}

#footer a {
  color: #aaa;
}

#footer a:active {
  color: #777;
}


#twicon {padding-top:10px;}


/* VIDEO PLAY */
#vidtoggle {text-decoration:underline;}
#vidtoggle:hover {color:#8CB1C4; text-decoration:underline; cursor:pointer;}
#vidbox
{
  display:none;
  position:fixed;
  z-index:2;
  background-color: rgba(0, 0, 0, 0.5);
  width:100%;
  height:100%;
}

#vid 
{
  display:none;
  position:fixed;
  z-index:3;
  top: 50%;
  left: 50%;
  margin-top: -182.5px;
  margin-left: -300px;
}


.box-form input, .box-form select
{
  width:80%;
  box-shadow: 5px 4px 3px #000;
  border:none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  opacity: 0.8;
}


/* styles from jay till we figure this out */
.content { text-align:left; margin:0px 40px; }
.txt { font-size:11px; color:#fff; }