body {
    max-width: 1200px;
    margin:auto;
    padding-top: 2em;
	font-family: 'SegoePro', wf_segoe-ui,"Segoe UI","Segoe WP","Segoe UI","Segoe WP","Helvetica Neue","Helvetica",Tahoma,Arial,sans-serif;
	background-color: #1c1e20;
}

h1 {
	font-family: 'SegoePro-Light', wf_segoe-ui_light,"Segoe UI Light","Segoe WP Light","Segoe UI","Segoe WP","Helvetica Neue Light",Tahoma,Arial,sans-serif;
	font-size: 3em;
	margin: 0;
	color: #0078d7;
    padding-bottom: 15px;
}

#warning {
    padding: 8px;
    background-color: yellow;
}

/* classes used for querying but not styling */
.grayNoVideo, .browseForVideoFile, .browseForCaptionFile {
}

table.outerLayout {
    width: 100%;
}

table.outerLayout td {
    vertical-align: top;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-top: 12px;
    white-space: nowrap;
}

table.innerLayout {
    width: auto;
    height: 70px;
}

table.innerLayout td {
    padding: 0 0 6px 0;
    vertical-align: baseline;
}

/* a lot of crazy to leave the table row so it affects the layout of the overall table but hide it */
tr.hidden td, tr.hidden td * {
    visibility: hidden;
    height: 0px;
    max-height: 0px;
    line-height: 0;
    padding: 0;
    overflow: hidden;
}

button {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 76px;
}

input[type=radio], input[type=checkbox] {
    position: relative;
    top: 1px;
}

label {
    margin-right: 0.5em;
    white-space: nowrap;
}

span#videoLength, span#elapsedTime {
    margin-right: 0.5em;
}

#videoElm {
    display: block;
    border: solid 1px #999;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    min-height: 297px;
}

.videoError {
    display: block;
    background-color: #999;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    min-height: 297px;
    color: white;
    text-align: center;
    padding: 12px;
}

#videoError {
	display: none;
}

#captionTitle {
    padding-top: 4px;
    padding-bottom: 4px;
}

#textCaptionEntry {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    line-height: 19px;
    border: 1px solid #999;
    padding: 3px 8px 5px;
    text-align: center;
    min-height: 50px;
    overflow: hidden;
	background-color: #D2DFEA;
	border: 0;

}

#textCaptionEntry.playing {
    border-color: #1e5f94;
    background-color: #1e5f94;
    color: white;
}


.ie9 input[type=file], .ie10 input[type=file] {
    width: 87px;
    padding: 2px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    font-family: 'Segoe UI' , Verdana, sans-serif;
    font-size: 14px;
}

.ie10 input[type=file] {
    width: 85px;
}

textarea, input[type=text] {
    font-family: 'Segoe UI' , Verdana, sans-serif;
    font-size: 14px;
}

textarea {
    line-height: 16px;
}

input[type=text] {
    line-height: 14px;
}

#videoURL, #ttURL {
    width: 225px;
}

#captionFileAndMarkup {
    display: none;
}

#captionFile {
    font-family: Consolas, monospace;
}

/* the list of captions */

#display {
    border: solid 1px #999;
    height: 374px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto;


}

#display div {
    cursor: pointer;
    padding: 2px 0 3px 0;
    white-space: nowrap;
    overflow: hidden;
}

#display div:nth-child(odd) {
    background-color: #5BC2EC;
	background-color: #CCE4F7;
}

#display div:nth-child(even) {
    background-color: #bef;
	background-color: #E6F2FB;
	
}

#display div:hover {
    background-color: #FFBF70;
    -webkit-transition : background-color 100ms ease-in-out;
	-moz-transition : background-color 100ms ease-in-out;
	-o-transition : background-color 100ms ease-in-out;
	transition : background-color 100ms ease-in-out;
}

#display div span {
    margin-left: 1em;
	display: inline-block;
	vertical-align: top;
}

#display div span:nth-child(3) {
    font-style: italic;
}

/* custom */

#description{
	font-size: 1.2em;
	padding-top: 1.5em;
    width:800px;
}

    #description img{
        float:left;
        height: 150px;
        padding-right: 30px;
    }

#links {
    width:300px;
    float:right;
    background-color: rgba(255,255,255,.8);
    padding: 10px;
    padding-bottom: 30px;
    border: 1px rgba(0,171,236,0.3) solid;
    webkit-transition : border 300ms ease-in-out;
	-moz-transition : border 300ms ease-in-out;
	-o-transition : border 300ms ease-in-out;
	transition : border 300ms ease-in-out;



}
  #links:hover {
    border: 1px rgba(0,171,236,0.8) solid;
    -webkit-transition : border 300ms ease-in-out;
	-moz-transition : border 300ms ease-in-out;
	-o-transition : border 300ms ease-in-out;
	transition : border 300ms ease-in-out;
  }


#container {
	background-color: rgba(255,255,255,.90);
	padding: 1em 2em 2em 2em;

	-webkit-box-shadow: 0px 0px 0px 1px rgba(148,210,255,1);
	-moz-box-shadow: 0px 0px 0px 1px rgba(148,210,255,1);
	box-shadow: 0px 0px 0px 1px rgba(148,210,255,1);
	
	position:relative;
	z-index:2;
	margin-bottom: 1em;
}

#bg {

	position: fixed;
	/*right:440px;
	top:40px;
	width:900px;*/
	

	left:50%;
	margin-top: -50px;
	margin-left: -400px;
	width:800px;

	overflow-x:hidden;
	z-index: 1;
	
}



#DemoContent button {
	background-color:#00abec;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:14px;
	padding:3px 10px;
	text-decoration:none;
	font-family: 'SegoePro', wf_segoe-ui,"Segoe UI","Segoe WP","Segoe UI","Segoe WP","Helvetica Neue","Helvetica",Tahoma,Arial,sans-serif;
	border: 0;

}

  #DemoContent button:hover{
      	background-color:#1e5f94;
    -webkit-transition : background-color 100ms ease-in-out;
	-moz-transition : background-color 100ms ease-in-out;
	-o-transition : background-color 100ms ease-in-out;
	transition : background-color 100ms ease-in-out;
  }


#foot {
	color: white;
}


#buttons {
    width:500px;
    margin:auto;
}

#buttons button:hover {
	background-color:#1e5f94;
    -webkit-transition : background-color 300ms ease-in-out;
	-moz-transition : background-color 300ms ease-in-out;
	-o-transition : background-color 300ms ease-in-out;
	transition : background-color 300ms ease-in-out;
}
#buttons button:active {
	position:relative;
	top:1px;
}

#buttons button{
    height:50px;
    width:80%;
    margin:auto;
    background-color: #00abec;
    color:white;
    font-family: 'SegoePro', wf_segoe-ui,"Segoe UI","Segoe WP","Segoe UI","Segoe WP","Helvetica Neue","Helvetica",Tahoma,Arial,sans-serif;
    font-size: 1.2em;
    border:0;
    padding: 15px;
    margin-top: 10px;
    
}
#buttons div{
    height:50px;
    width:80%;
    margin:auto;
    background-color: #00abec;
    color:white;
    font-family: 'SegoePro', wf_segoe-ui,"Segoe UI","Segoe WP","Segoe UI","Segoe WP","Helvetica Neue","Helvetica",Tahoma,Arial,sans-serif;
    font-size: 1.4em;
    border:0;
    padding: 15px;
    margin-top: 10px;
    
}


#buttons a {
    text-decoration:none;
}

#buttons div:hover {
	background-color:#1e5f94;
    -webkit-transition : background-color 300ms ease-in-out;
	-moz-transition : background-color 300ms ease-in-out;
	-o-transition : background-color 300ms ease-in-out;
	transition : background-color 300ms ease-in-out;
}
#buttons div:active {
	position:relative;
	top:1px;
}

#faceInfo {
    background: white;
    width: 640px;
    min-height: 100px;

}

pre {
    white-space: pre-wrap;       /* CSS 3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    min-height: 100px;
}

#ocrInfo {
    background:white;
    width:640px;
    min-height: 100px;
}