.hero-unit {
  background:none;
  padding: 0;
  margin: 0;
  text-align:left;  /*I liked center with the large logo*/
}

#headerimage{
	min-width:250px; 
	margin:0;
	padding:0;	
}

.responsivevideo{	  
 /*this centers the video within its surrounding div*/ 
 display:block;
 margin: 0 auto;*/
 
 /*outline:none; /*removes the dotted border when its selected*/
}	



.nav-list > .active > a:hover {
  background-color: gray;
}

.nav-list > .inactive {
  background-color: green;
}

.footer{
  position:absolute;
  bottom:0px;	
}

.padtextleft{
  margin-left:10px; /*prevents some of the text from span12 being offscreen for one odd size*/	
}  
.padtextleft{
  padding-top:30px; /*used for the copyright text*/	
} 

.navbar-inner {
  background-color: #2c2c2c; /* fallback color, place your own */
  color:white;
  /* Gradients for modern browsers, replace as you see fit */


  /* IE8-9 gradient filter */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
}






ul.nav li.dropdown:hover ul.dropdown-menu{
  /*shows the dropdown menu items when hovering (and not just clicking as is the default) but the problem is that when you click a dropdown item, it doesn't then go away!*/
  /*display: block;    */
  
}

.navbar .dropdown-menu {
 /*removes the space between the parent and children so the children don't vanish if you cursor too slow */
 margin-top: 0px;
}

.orphiccopyright{
  position:relative;
  top: 80px;	
}

.centercontent{
  text-align:center;	
}
.largetopspace{
  margin-top:15px;	
}
.row{
  padding-top:20px;
 }

.logosubtitle{
 text-align:center;	
}

/* Landscape phones and down */  
@media (max-width: 480px) {
  .responsivevideo{
     width: 336px;
     height: 224px;
  }	
/*  .hero-unit{
	padding-bottom:10px;
  } */ 
  .logosubtitle{
	 font-size:80%;  
  }
/*  .tempbod{
	  color:red;
  }*/
} 

/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 767px) {
  .responsivevideo{
     width: 441px;
/*     height: 294px;*/
  }	
/*  .hero-unit{
	padding-bottom:20px;
  } */ 
  .logosubtitle{
	 font-size:85%;  
  }
  
/*    .tempbod{
	  color:green;
  }*/
}
.whitepage{
	background-color:rgb(255,255,255); 
	color:black;
 border-radius:5px;
 -moz-border-radius:5px; /* Old Firefox */	
	padding-bottom:15px;
	margin-top:15px;
}
.whitepage p, .whitepage h3, .whitepage h4 {
  margin-right:15px;
  margin-left:15px;
}


.videorow{
  margin-bottom:50px; 	
}


/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
  .responsivevideo{
     width: 744px;
    /* height: 496px;	*/ 
  }	
  .hero-unit{
	padding-bottom:10px;
  }  

  
/*  .tempbod{
	  color:teal;
  } */ 
}
/* desktop */
@media (min-width: 980px){
  .responsivevideo{
     width: 960px;
     /*height: 640px;*/
  }
  .hero-unit{
	padding-bottom:20px;
  }
/* .tempbod{
	  color:pink;
  }	*/
}

/* Large desktop */
@media (min-width: 1200px){
  .row, .span12, .navbar, .whitepage, .hero-unit{
	width:960px;
	margin-left:auto;
	margin-right:auto; 
  }  

  /* I don't know what the fuck is going on here  Maximizing the viewport causes the 960 limit to get forgotten. So force it here*/
  .span1{width:80px;margin:0;}
  .span2{width:160px;margin:0;}
  .span3{width:240px;margin:0;}
  .span4{width:320px;margin:0;}
  .span5{width:400px;margin:0;}
  .span6{width:480px;margin:0;}
  .span7{width:560px;margin:0;}
  .span8{width:640px;margin:0;}
  .span9{width:720px;margin:0;}
  .span10{width:800px;margin:0;}
  .span11{width:880px;margin:0;}



/* .tempbod{
	  color:blue;
  }	*/	
}




body {
  color: white; /*#333333;*/
  /*background-color: tan; /*background-color: #ffffff;*/
 /* background-image:url(../mashksbg.png)*/
  /*background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;*/
  padding-top:0; /*without this the hero-unit drops too much on large size screens, wasting space*/
  background: url(../orphic_bg_1920pz.png) no-repeat center top;
  
  background-color:rgb(31,30,36); /*have to put this AFTER the background image to work(!)*/
}

img.teampic{
  margin-right:15px;
  margin-left:15px
}


.navbar .nav > li > a {
  /*makes the menu bar items darker and easier to read*/
		color:#666666;
		font-weight:bold;
		outline: 0;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  /*changes the selected and hover color (above)*/
		color:rgb(153,1,52);
		outline: 0;
}

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  /*makes the selected color same as the hover color */
		color: rgb(153,1,52);
		outline: 0;
}	

.nav-list > li > a{
		color:#666666;
		font-weight:bold;
		outline: 0;
}		

.nav-list > li > a:hover,
.nav-list > li > a:focus {
   color:rgb(153,1,52);
			outline: 0;
}

.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
  color:rgb(153,1,52);
		outline: 0;
}

.carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;}
.carousel .active.left {left:0;opacity:0;z-index:2;}
.carousel .next {left:0;opacity:1;z-index:1;}

.hero-unit{
  background-color:rgb(153,1,52); /*same as .navbar border-color and as is js*/
		text-align:center;'
}
.navbar{
  margin-bottom:0px;
		border-bottom-style:solid;
		border-width:8px;
		border-color:rgb(153,1,52); /*same as .hero-unit background-color and in js*/
}