/* Foundation v2.2.1 http://foundation.zurb.com */
/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Name 1
:: Page Name 2
*/

/* -----------------------------------------
   Fonts
----------------------------------------- */

/* Foundation Icons General Enclosed */
@font-face {
    font-family: 'FoundationIconsGeneralEnclosed';
    src: url('../fonts/foundation-icons-general-enclosed.eot');
    src: url('../fonts/foundation-icons-general-enclosed.eot?#iefix') format('embedded-opentype'),
         url('../fonts/foundation-icons-general-enclosed.woff') format('woff'),
         url('../fonts/foundation-icons-general-enclosed.ttf') format('truetype'),
         url('../fonts/foundation-icons-general-enclosed.svg#FoundationIconsGeneralEnclosed') format('svg');
    font-weight: normal;
    font-style: normal;

}

.glyph { cursor: default; font-size: 16px; line-height: 1; }
.glyph.general-enclosed { font-family: 'FoundationIconsGeneralEnclosed'; }
a.glyph, a .glyph { cursor: pointer;}

@media screen and (max-width: 800px) and (min-width: 0px){
	h4{ font-size: 18px;}
  h5{ font-size: 14px;}
  p{font-size: 12px; line-height: 1.6; margin-bottom: 12px;}
  h1, h2, h3, h4, h5, h6{margin-top: 12px; margin-bottom: 12px;}
}

/* -----------------------------------------
   Shared Styles
----------------------------------------- */


legend, button{ font-size: 1.3em;}
form fieldset {margin: 9px auto;}
.small.button{
		padding: 4px 20px 6px;
		font-size: 1.1em;
}
h5.label{ font-size: 1.1em; display: inline-block;}

body{ height: 100%;}

#main-nav{ position: relative; z-index: 1000;}

article a, aside a{ color: #3e81ac;}
article a:hover, aside a:hover{ color: black;}

ul.pagination {width: 24px; height: auto; }
ul.pagination.vertical li{ float: none !important;}

/* -----------------------------------------
   Mobile
----------------------------------------- */
@media only screen and (max-width: 767px) {	

}

/* -----------------------------------------
   Scene Nav
---------------------------------------- */

.royalSlider { height: 100%; width: 100%;}

header{ position: relative; z-index: 0;}

header nav{ height: 68px; overflow: hidden;}

@media screen and (max-width: 800px) and (min-width: 0px){
	header nav{ height: 52px;}
}

header nav .rsNav {
	padding: 4px 0 4px 80px !important;
	width: 100% !important;
	height: 60px;
}

header nav .scene-01, header nav .scene-28{
  padding-left: 20px;
  background-origin: content-box;
  background-clip: content-box;
}

header nav .scene-01:before, header nav .scene-28:before{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
color: white;
content: 'Side 2';
display: inline-block;
width: 68pxe
text-align: center;
height: 22px;
margin-left: -44px;
background: black;
margin-top: 20px
}

header nav .scene-01:before{
  content: 'Side 1';
}

/* Thumbnails arrow icons */

.sceneArrow {
	height: 44px;
  text-align: center;
  padding-top: 24px;
	width: 20px;
	position: absolute;
  left: 0;	
	cursor: pointer;	
	z-index: 23;	
	background: #000;
  color: white;
}
.sceneArrow:hover {
	background: #ddd;
  color: black;
}

#prevSceneArrow {left: 0;}
.rsDefaultInv .rsThumbsArrowLeft {left: 20px;}
.rsDefaultInv .rsThumbsArrowRight {left: 40px;}
#nextSceneArrow {left: 60px;}

/* -----------------------------------------
   Scene
--------------------------------------- */

#scene-container a{display: none;} /* Hide the captions while loading */

#scene-image{ float: left;}

#scene-caption .rsGCaption{ text-align: left; position: relative;}
#scene-caption .rsGCaption h4{margin-top: 0;}

#content{ z-index: 0;}
#content .rsSlide{ overflow: visible;}

#scene-image .rsSlide, 
#scene-image .rsOverflow{
  background: transparent !important;
  height: 100% !important;
}

#script-container, #script-container > .tab-content, #page-container, #resources-container {height: 100%;}

#scene-by-script{ padding: 0 1em;}

#view-changer{float: left; margin: 0 42%; position: relative; z-index: 10000;}

/*#scene-caption{
  padding: 2em;
}*/

.scene-id{
font-size: 12px;
position: relative;
top: -2px;
margin-right: 1em;
}

#view-changer .rsNavItem {float: left; cursor: pointer;}

#view-changer .rsNavSelected{ /* basically btn-primary */
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006DCC;
background-image: -moz-linear-gradient(top, #08C, #04C);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08C), to(#04C));
background-image: -webkit-linear-gradient(top, #08C, #04C);
background-image: -o-linear-gradient(top, #08C, #04C);
background-image: linear-gradient(to bottom, #08C, #04C);
background-repeat: repeat-x;
border-color: #04C #04C #002A80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

#view-changer .rsNavSelected:hover, #view-changer .rsNavSelected:active {
color: white;
background-color: #04C;
}

.tooltip-inner {
font-weight: bold;
line-height: 1.2;
font-size: 105%;
max-width: 400px;
}


/**** Nav thumb sprites ****/

.nav-thumb {display:inline-block ; overflow:hidden; background-repeat: no-repeat;background: black url(../images/navthumbs.jpg);}

.scene-01 {width:103px; height:60px; background-position: -2080px -0px}
.scene-02 {width:93px; height:60px; background-position: -195px -60px}
.scene-03 {width:103px; height:60px; background-position: -1977px -0px}
.scene-04 {width:193px; height:60px; background-position: -263px -0px}
.scene-05 {width:99px; height:60px; background-position: -0px -60px}
.scene-06 {width:59px; height:60px; background-position: -2686px -0px}
.scene-07 {width:52px; height:60px; background-position: -2699px -60px}
.scene-08 {width:74px; height:60px; background-position: -2625px -60px}
.scene-09 {width:106px; height:60px; background-position: -1664px -0px}
.scene-10 {width:96px; height:60px; background-position: -99px -60px}
.scene-11 {width:104px; height:60px; background-position: -1770px -0px}
.scene-12 {width:110px; height:60px; background-position: -1338px -0px}
.scene-13 {width:101px; height:60px; background-position: -2386px -0px}
.scene-14 {width:90px; height:60px; background-position: -288px -60px}
.scene-15 {width:107px; height:60px; background-position: -1557px -0px}
.scene-16 {width:99px; height:60px; background-position: -2587px -0px}
.scene-17 {width:74px; height:60px; background-position: -2551px -60px}
.scene-18 {width:101px; height:60px; background-position: -2285px -0px}
.scene-19 {width:85px; height:60px; background-position: -2466px -60px}
.scene-20 {width:130px; height:60px; background-position: -750px -0px}
.scene-21 {width:114px; height:60px; background-position: -1002px -0px}
.scene-22 {width:112px; height:60px; background-position: -1116px -0px}
.scene-23 {width:141px; height:60px; background-position: -609px -0px}
.scene-24 {width:100px; height:60px; background-position: -2487px -0px}
.scene-25 {width:122px; height:60px; background-position: -880px -0px}
.scene-26 {width:109px; height:60px; background-position: -1448px -0px}
.scene-27 {width:110px; height:60px; background-position: -1228px -0px}
.scene-28 {width:87px; height:60px; background-position: -2293px -60px}
.scene-29 {width:87px; height:60px; background-position: -2206px -60px}
.scene-30 {width:87px; height:60px; background-position: -2119px -60px}
.scene-31 {width:87px; height:60px; background-position: -2032px -60px}
.scene-32 {width:87px; height:60px; background-position: -1945px -60px}
.scene-33 {width:87px; height:60px; background-position: -1858px -60px}
.scene-34 {width:87px; height:60px; background-position: -1771px -60px}
.scene-35 {width:87px; height:60px; background-position: -1684px -60px}
.scene-36 {width:87px; height:60px; background-position: -1597px -60px}
.scene-37 {width:87px; height:60px; background-position: -1510px -60px}
.scene-38 {width:87px; height:60px; background-position: -1423px -60px}
.scene-39 {width:87px; height:60px; background-position: -1336px -60px}
.scene-40 {width:87px; height:60px; background-position: -1249px -60px}
.scene-41 {width:87px; height:60px; background-position: -1162px -60px}
.scene-42 {width:87px; height:60px; background-position: -1075px -60px}
.scene-43 {width:87px; height:60px; background-position: -988px -60px}
.scene-44 {width:87px; height:60px; background-position: -901px -60px}
.scene-45 {width:87px; height:60px; background-position: -814px -60px}
.scene-46 {width:87px; height:60px; background-position: -727px -60px}
.scene-47 {width:87px; height:60px; background-position: -640px -60px}
.scene-48 {width:87px; height:60px; background-position: -553px -60px}
.scene-49 {width:87px; height:60px; background-position: -466px -60px}
.scene-50 {width:153px; height:60px; background-position: -456px -0px}
.scene-51 {width:263px; height:60px; background-position: -0px -0px}
.scene-52 {width:103px; height:60px; background-position: -1874px -0px}
.scene-53 {width:86px; height:60px; background-position: -2380px -60px}
.scene-54 {width:88px; height:60px; background-position: -378px -60px}
.scene-55 {width:102px; height:60px; background-position: -2183px -0px}


/**** Manuscript Text ****/

#script-container { left: -43%; position: relative; padding:0;}

.audio{
  margin-top: -5px;
}

#line-breaker{ cursor: pointer; position: relative;}

#script-text{
   clear: both;
   text-align: left;
   padding: 1em 0;
}

/* Height of these are reset using javascript on resize in app.js*/
#script-text, #pages, #resources{
  height: 100%;
  overflow: scroll;
}

#script-container .nav{
  margin-left: 0;
}
/**** End Manuscrupt Text ****/

/**** Manuscrupt Page Images ****/
#pages{
  background: #4D4D4D;
  padding: 1em;
}

.nav-bar.vertical > li:last-child {
	border-bottom: 1px solid #333;
  border-right: none;
}

#pages img{
  width: 100%;
}

#pages img.preloader{
  width:auto;
}

#pages .preloader img{
    margin: 0 auto;
	width: auto;
  vertical-align: middle;
}

#pages h5{
  color: white;
}

.nav-tabs{
	margin-right: 0 !important;
	border-right: none;
}

.nav-tabs > li{
  width: 3.5em;
}

.nav-tabs > li > a{
	background-color: #999;
	color: white;
  min-width: 0 !important;
}

.nav-tabs > li > a:hover {
	border-right: none;
	background-color: #E6E6E6;
	color: #4d4d4d;
}

.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
  color: white;
  cursor: default;
  background-color: #4d4d4d !important;
  border: 1px solid #4d4d4d !important;
  border-bottom-color: transparent;
}

/**** End  Manuscript Page Images ****/

#resources .gloss a{
	display: block;
}
#resources-only {
    overflow:scroll;
}

.row {
    margin-left:0;
}

/*These two need to be wide enough for the resources explorer iframe*/
#resources {
    width:100%;
}

#resources-container {
    width:100%;
}

#resources-row {
    width:93%;
    margin:0 auto;
}

#wrapper {
    width:100%;
    margin:0px;
}

#charts {
    padding-right:50px;
    float:left;
}

#results-list {
    float:left;
}
#resources img.media-object{
  width: 86px; /* This is kind of a fix. bootstrap should fix the sizes based on the data-src attribute, but it doesn't always */
}

.media, .media .media{
margin-top: 0;
}

/* Styling for the Garibaldi Resources Explorer */
h3 {
    font-family:sans-serif;
    font-size:2em;
}
#resources-container {
    padding:20px;
}
br {
    display:block;
    margin:0px 0;
    line-height:5px;
}
h3, small {
    line-height:20px;
    
}
.col-md-6 {
    width:45%;
}
a {
    cursor:pointer;
}
@media screen and (max-width: 1200px) {
    .col-md-6 {
        width:100%;
    }
}
.ps {
    margin-right:5px;
}
#results-list {
    background-color:#F5F5F5;
    border:1px solid #a5a4a4;
    border-radius:5px;
    margin-bottom:10px;
    padding:0px;
}
#bookBox-container {

}
.panel-heading {
    border-bottom:1px solid #a5a4a4;

    background-color:#d8d8d8;
    top:-10px;
    padding:10px;
}
.panel-body {
    padding:10px;
}
/* -----------------------------------------
   Transcript styles
----------------------------------------- */
.add .supplied .gap {color:#555;}
mark{ background: none;}
.underline { text-decoration: underline; }
.supralinear{ position: relative; bottom: .25em;}
.infralinear{ position: relative; bottom: -.25em;}
.interlinear{ position: relative; bottom: .25em;}
.inline{ color:#555 }
.margin-left{ } 
.person{}
.place{}
.damage.high{}
.damage.medium{}
.damage.low{}
.list-ordered{}
.list-simple{}