@font-face {
    font-family: 'Montserrat';
    src: url(../fonts/Montserrat-Regular.ttf);
}

@font-face {
    font-family: "Open Sans Regular";
    src: url(../fonts/OpenSans-Regular.ttf);
}



.extraslistcontainer {
    font-family: "Open Sans Regular";
	list-style: none;
}

.extraslist::before {
 content: "\2022";
 color: white;
 display: inline-block; width: 1em;
 margin-left: -1em
 }

body {
-webkit-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-out;
background-size: cover;
background-position: center;
background-color: #282828;
margin: 0;
background-attachment:fixed;
min-height:100%;

}

html{
 height:100%;
 min-height:100%;
 }

 .paddedcontainer {

font-family:'Open Sans Regular',Arial, Helvetica, sans-serif;
color:white;
padding-top:8px;
padding-left:288px;
padding-bottom:8px;
padding-right:32px;

}

#livecode {
border-style:none;
margin-left:248px;
width:calc(100% - 248px);
height:100%;
}

.heroimage {
background-color:black;
width:100%;
height:382px;
position:relative;
background-image: url('../screenshots/heroimage-01.png');
background-position:center;
background-size:cover;

}


p a.medialink {
text-decoration:none;
}

p a {
text-decoration:underline;
}

.mycode a {
color:white;
text-decoration:underline;
}

.mycode a:hover {
color:#DDDDDD;

}

.heroselectbar{
bottom:0px;
height:64px;
width:100%;
position:absolute;
text-align:center;
display: table-cell; 
vertical-align: middle; 
background-color:rgba(0,0,0,0.25);
-webkit-transition: opacity 0.1s; /* Safari */
transition: opacity 0.1s;
}

.heroitem {
width:64px;
height:100%;
display: inline-block; 
cursor:pointer;
background-color:white;
background-position:center;
background-size:cover;
opacity:0.75;
border-style:solid;
border-color:white;
border-radius:0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.heroitem:hover {
opacity:1;
}

.docubar {
width:247px;
height:1104px;
z-index:1;
position:absolute;
background-image:url(../backgrounds/docustripe.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
}



.docutitle {
font-family:'Montserrat',Arial, Helvetica, sans-serif;
color:white;
text-align:center;
padding-top:8px;
padding-bottom:8px;
cursor:default;
background-image:url(../backgrounds/docutitlestripe.jpg);
}

.docuchapter {
font-family: 'Open Sans Regular',Arial, Helvetica, sans-serif;
text-align:center;
padding-top:8px;
padding-bottom:8px;
color: #4CB76F;
cursor:pointer;
}

.docuchapter:hover {
color: #6CD78F;
} 

.docuchapterselected {
font-family: 'Open Sans Regular',Arial, Helvetica, sans-serif;
text-align:center;
padding-top:8px;
padding-bottom:8px;
color: white;
font-weight:bold;
cursor:pointer;
}

.docuchapterselected:hover {
color: #BBBBBB;
} 

 
.keyboardkey {


padding:16px 16px;

text-align:left;

color:white;
font-family: 'Open Sans Regular',Arial, Helvetica, sans-serif;

}

.keyboardkey span {
display:inline-block;
width:32px;
text-align:center;
border-style:solid;
border-width:2px;
border-radius:10px;
border-color:#4CB76F;
padding:16px 16px;
color:#4CB76F;
font-family:'Montserrat',Arial, Helvetica, sans-serif;
font-size:24px;
margin-right:16px;
}


 .mycode {
  white-space: pre; 
 font-size:14px;border-color:#4CB76F;border-style:solid;border-width:1px;padding: 4px 4px 4px;color:#4CB76F;
 
 }
 
 
 

p{
color:white;
font-family: 'Open Sans Regular',Arial, Helvetica, sans-serif;
margin-top:4px;
margin-bottom:4px;
}

p b {

}



.mainbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	border-bottom-color: #4CB76F;
	border-bottom-style:solid;
	border-bottom-width:2px;

}



.footer {
background-color: #191919;
padding:5px;
color:#3F3F3F;
font-family: 'Open Sans Regular',Arial, Helvetica, sans-serif;
bottom:0px;
z-index:2;
width:100%;
font-size:12px;
position:fixed;
}

h1 {
font-family: 'Montserrat',Arial, Helvetica, sans-serif;
color:white;

}

h2 {
font-family: 'Montserrat',Arial, Helvetica, sans-serif;
color:#4CB76F;
text-align:center;
margin-top:0px;
margin-bottom:4px;

}

h3 {
font-family: 'Montserrat',Arial, Helvetica, sans-serif;
color:#4CB76F;
text-align:center;
font-size:1.25em;
margin-top:4px;
margin-bottom:4px;
}



.contentcontainer {
padding-left:20%;
padding-right:20%;
padding-bottom:32px;
}

.footer a {
color: 5B5B5B;
text-decoration: none;
font-weight: bold;
}

.footer a:hover {
color: 7B7B7B;
text-decoration: none;
font-weight: bold;
}

.coolbutton {
color: #4CB76F;white-space: nowrap;
border-style:solid;
border-color:#4CB76F;
font-family: 'Montserrat',Arial, Helvetica, sans-serif;
text-decoration:none;
border-radius:5px;
border-width:2px;
padding:10px 32px;
line-height:48px;

}

.graphicbutton {
width:96px;

}



.coolbutton:hover {
background-color: #4CB76F;
color: #282828;
cursor:pointer;

}


.screenshot {
width:45%; 
padding-top:8px;
padding-bottom:8px;
cursor:pointer;
padding-left:1%;
padding-right:1%;
}

.genericcontainer {
padding: 18px 18px;
}

.platformname {
font-family: 'Open Sans Regular';
color: white;
font-size:18px;
visibility: hidden;

}

.downloadtext {
font-family:'Open Sans Regular',Arial, Helvetica, sans-serif;
color: white;
font-size:18px;

}

a {
    text-decoration:none;
	color:#4CB76F;
	
}

/* visited link */
a:visited {
    text-decoration:none;
}

/* mouse over link */
a:hover {
    text-decoration:none;
}

/* selected link */
a:active {
    text-decoration:none;
}


.commonlink{
display:block;
margin-left:15%;
margin-right:15%;
}

.commonbutton {

text-align:center;
border-style:solid;
border-color:#4CB76F;
border-radius:20px;
padding-top:32px;
padding-bottom:32px;

font-family:'Montserrat',Arial, Helvetica, sans-serif;
color:#4CB76F;
font-size:32px;
cursor:pointer;
display:block;
position:relative;
}

.commonbutton:hover {
background-color:#4CB76F;
color: #282e2e;

}


.socialmediabutton {

border-style:solid;
border-color:#4CB76F;
border-radius:20px;
padding-top:32px;
padding-bottom:32px;
padding-left:32px;
font-family:'Montserrat',Arial, Helvetica, sans-serif;
color:#4CB76F;
font-size:32px;
cursor:pointer;
}

.medialink b:hover {
color:#6CD78F;
}

.medialink {
cursor:pointer;
color: #4CB76F ;
}

.socialmediabutton:hover {
background-color:#4CB76F;
color: #282e2e;

}

.staffpic {

width:70%;

padding-left: 2%;
padding-right: 2%;
padding-top: 8px;
padding-bottom: 8px;

}
.staffpicrow {
text-align:center;
   display: table;
   padding-bottom:16px;
   padding-top:16px;
   width:100%;

}

.staffpicframe {

  display: table-cell;

}

.staffpictext {
color:white;
display:block;
font-family:'Open Sans Regular',Arial, Helvetica, sans-serif;
}

.staffpicframe span b {
color:#4CB76F;
}

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

@media (min-width: 868px) {

								
								
										.socialmediaimagecontainer {
										float:right;
										position:relative;
										right:32px;
										bottom:16px;
										vertical-align:middle;
										}



										.mainbar li {
											float: left;
											height:96px;	
										}
										
										.leftalignfullcenteralignsmall {
										text-align:left;
										}
										
										
										.genericadpativecontainer {
										padding-left:18%;
										padding-right: 18%;
										}
										
										.downloadtext {
										vertical-align:middle;
										}
										
										.mainbarbutton{
											display: block;
											color: white;
											text-align: center;
											padding: 39px;
											text-decoration: none;
											font-family: "Montserrat",Arial, Helvetica, sans-serif;
											font-size:12px;

											border-style: none;
											cursor:pointer;
											height:18px;
											padding-left:12px;
											padding-right:12px;
										}

										.mainbarbutton.selected {
											display: block;
											color: #282828;
											text-align: center;
											padding: 39px;
											text-decoration: none;
											font-family: "Montserrat",Arial, Helvetica, sans-serif;
											padding-left:12px;
											height:18px;
											
											padding-right:12px;
											background-color: #4CB76F;
										}

										.mainbarbutton:hover {
										   background-color:rgba(128, 128, 128, 0.5);
										}	
										.mainbartoggler {
										display:none;
										}
										
										.mobiledrawer {
										display: block !important;
										}
										
										
										#frontlogo {
										width:750px;
										text-align:center;

										}

										.frontlogocontainer {
										text-align:center;
										vertical-align: middle;
										padding-top:196px;
										padding-bottom:196px;
										}
										
										.foyertext {
										display:none;

										}
										
										.mainpagebutton .coolbutton {
										left:286px;
										position:relative;
										}
										
										.blocksmallinlinebig {
										display:inline;
										}
										
										
}



@media (max-width: 867px) {

#livecode {
margin-left:0px;
width: 100%;
}

.contentcontainer {
padding-left:5%;
padding-right:5%;
padding-bottom:32px;
}

.footer {
font-size:8px;
}

										.commonlink {
									
										margin-left:0;
										margin-right:0;
										}

									.heroitem {
									width:11%;
									min-width:28px;
									
									}
									
									.paddedcontainer {
									padding-left:32px;
									}
									
									.docubar {
									left:-232px;
									-webkit-transition: left 0.3s; /* Safari */
									transition: left 0.3s;
									}
									
									.docubar:hover {
									left:0px;
									}


									.staffpicframe {

										  display: block;

										}

										
										.socialmediaimagecontainer {
										text-align:center;

										}
										
										.socialmediabutton {
										padding-left:0px;
										}


										.platformname{
										display:none;
										}
										
										.logocontainer { 
										text-align:center;
										width:100%;
										}
										
										
										.leftalignfullcenteralignsmall {
										text-align:center;
										}										
										
										
										.genericadpativecontainer {
										padding-left:8px;
										padding-right: 8px;
										}
											

	
										.foyertext {
										font-size:18px;
										text-align: center;
										padding-bottom:24px;
										padding-left:8px;
										padding-right:8px;
										}											
										
										.mainbarbutton{
											display: block;
											color: white;
											text-align: center;
											padding: 11px 8px;
											text-decoration: none;
											font-family: "Montserrat",Arial, Helvetica, sans-serif;
											font-size:14px;

											border-style: none;
											cursor:pointer;
											height:18px;
											min-width:96px;
							
										}
										
										

										.mainbarbutton.selected {
											display: block;
											color: white;
											text-align: center;
											padding: 11px 8px;
											text-decoration: none;
											font-family: "Montserrat",Arial, Helvetica, sans-serif;

						
										}

										.mainbarbutton:hover {
										   background-color:rgba(128, 128, 128, 0.5);
										}	
										
										.mobiledrawer {
										display: none;
										}										
										.mainbartoggler {
										text-align:center;
										}
										.mainbartoggler button{
										width:100%;
										height:30px;
										background-color:#4CB76F;
										border-style:none;
										font-family: "Montserrat",Arial, Helvetica, sans-serif;
										font-size:14px;
										color:#282828;										
										}
										.mainbartoggler button:focus {
										outline:0;
										}	
										.mainbartoggler button:active {
										background-color:#2C974F;
										}										

									
										.frontlogocontainer {
										text-align:center;
										}	

										#frontlogo {
										display:none;
										
										}
										
										
										.blocksmallinlinebig {
										display:block;
										}	


										.disappearonsmall {
										display:none;
										}
										
}


@media (max-width: 1200px) {
										.screenshot {
										width:100%;
										
										}
}

li  img {
height:96px;
padding-left:8px;
padding-right:8px;

}

.logocontainer:hover {
   background-color:rgba(128, 128, 128, 0.5);
   cursor:pointer;
}