@font-face {
    font-family: 'Bravura';
    src: url('../Fonts/Bravura.eot');
    src: url('../Fonts/Bravura.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Bravura.woff') format('woff'),
         url('../Fonts/Bravura.otf') format('opentype'),
         url('../Fonts/Bravura.svg#Bravura') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Puritan20Normal';
    src: url('../Fonts/Puritan_Regular-webfont.eot');
    src: url('../Fonts/Puritan_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Puritan_Regular-webfont.woff') format('woff'),
         url('../Fonts/Puritan_Regular-webfont.ttf') format('truetype'),
         url('../Fonts/Puritan_Regular-webfont.svg#Puritan20Normal') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Puritan20Italic';
    src: url('../Fonts/Puritan_Italic-webfont.eot');
    src: url('../Fonts/Puritan_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Puritan_Italic-webfont.woff') format('woff'),
         url('../Fonts/Puritan_Italic-webfont.ttf') format('truetype'),
         url('../Fonts/Puritan_Italic-webfont.svg#Puritan20Italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Puritan20Bold';
    src: url('../Fonts/Puritan_Bold-webfont.eot');
    src: url('../Fonts/Puritan_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Puritan_Bold-webfont.woff') format('woff'),
         url('../Fonts/Puritan_Bold-webfont.ttf') format('truetype'),
         url('../Fonts/Puritan_Bold-webfont.svg#Puritan20Bold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Puritan20BoldItalic';
    src: url('../Fonts/Puritan_Bold_Italic-webfont.eot');
    src: url('../Fonts/Puritan_Bold_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Puritan_Bold_Italic-webfont.woff') format('woff'),
         url('../Fonts/Puritan_Bold_Italic-webfont.ttf') format('truetype'),
         url('../Fonts/Puritan_Bold_Italic-webfont.svg#Puritan20BoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'MolotRegular';
    src: url('../Fonts/Molot-webfont.eot');
    src: url('../Fonts/Molot-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Molot-webfont.woff') format('woff'),
         url('../Fonts/Molot-webfont.ttf') format('truetype'),
         url('../Fonts/Molot-webfont.svg#MolotRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
 
@font-face {
    font-family: 'OswaldLight';
    src: url('../Fonts/Oswald-Light-webfont.eot');
    src: url('../Fonts/Oswald-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Oswald-Light-webfont.woff') format('woff'),
         url('../Fonts/Oswald-Light-webfont.ttf') format('truetype'),
         url('../Fonts/Oswald-Light-webfont.svg#OswaldLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OswaldBook';
    src: url('../Fonts/Oswald-Regular-webfont.eot');
    src: url('../Fonts/Oswald-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Oswald-Regular-webfont.woff') format('woff'),
         url('../Fonts/Oswald-Regular-webfont.ttf') format('truetype'),
         url('../Fonts/Oswald-Regular-webfont.svg#OswaldBook') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OswaldBold';
    src: url('../Fonts/Oswald-Bold-webfont.eot');
    src: url('../Fonts/Oswald-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Oswald-Bold-webfont.woff') format('woff'),
         url('../Fonts/Oswald-Bold-webfont.ttf') format('truetype'),
         url('../Fonts/Oswald-Bold-webfont.svg#OswaldBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OswaldStencilRegular';
    src: url('../Fonts/Oswald-Stencil-webfont.eot');
    src: url('../Fonts/Oswald-Stencil-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Oswald-Stencil-webfont.woff') format('woff'),
         url('../Fonts/Oswald-Stencil-webfont.ttf') format('truetype'),
         url('../Fonts/Oswald-Stencil-webfont.svg#OswaldStencilRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'code_pro_demoregular';
    src: url('code_pro_demo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@media screen and (max-width: 768px) {
	* {margin: 0px auto 0px auto; padding: 0px; padding-right: 0px;}
	#container {
		min-width: 200px;
		width: 100%;
	}
	p {	padding: 10px 10px; width: 95%; font-size: 26px;}
	a {width: auto; overflow: auto;}
	table {
		margin: 0px 0px 0p 0px;
		width: 100%;
	}
	#titletext {font-size: 50px; margin-left: 20px;}
	#header {
		width: 100%;
	}
	#path{padding: 15px;}
	img.imgcontent { margin: 0px auto 0px auto; }
	.picLink{ display: none; margin: 0px 0px 0px 0px; padding: 0px 0px;}
}

* {margin: 0px 0px 0px 0px; padding 0px 0px;}

 body {
  background-color: black;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px;
 /* background-image: url('../images/FRNDS_headshot2.jpg'); */
 /*   background-image: url('http://msikora.com/galleries/General/ART/ART_GAMI_100-ripple-6.JPG');  */
/* background-image: url('../../../images/MarkovChainScreenshot2crop.png'); 
  background-image: url('../../../images/test1.png'); 
  background-image: url('../../../images/test2woverlay.png');
  background-image: url('../../../images/DSC00611.JPG'); */
  background-image: url('../../../images/snakeChains/wallpaper4.png');
  background-size: cover;
  background-attachment: fixed;
  height: 95%;
}
  
 #corner1 {
  display: block;
  position: fixed;
  width: 190px;
  height: 60px;
  background-color: #4fff6f;
  margin: -10px 0px 0px -10px;
  padding: 0px 0px;
  z-index: 1;

}
 
 #corner2 {
  display: block;
  position: fixed;
  width: 170px;
  height: 70px;
  background-color: #3fcf5f;
  margin: -10px 0px 0px -10px;
  padding: 0px 0px;
  z-index: 1;
}

 #corner3 {
  display: block;
  position: fixed;
  width: 150px;
  height: 80px;
  background-color: #2f9f4f;
  margin: -10px 0px 0px -10px;
  padding: 0px 0px;
  z-index: 1;
}

 #title {
  display: block;
  position: fixed;
  width: 100px;
  height: 100px;
  margin: 0px 0px 0px 0px;
  border: 5px solid #2f4f9f;
  border: none;
  padding: 10px 20px;
  text-align: center;
  left: -10px;
  top: 0px;
  z-index: 1;
}

 #contentHeader {
  display: block;
  position: relative;
  width: 740px;
  height: 30px;
  background-color: #000;
  margin: 0px 0px 0px 0px;
  border: 2px solid #fff;
  padding: 10px 20px;
  text-align: center;
  overflow: hidden;
}

 #Links {
  display: block;
  position: absolute;
  width: 100%;
  height: 30px;
  background-color: #aaa;
  top: 0px;
  border: none;
  border-bottom: 1px solid #fff;
  padding: 0px 0px;
  text-align: center;
  padding: 0px 0px;
  margin: 0px 0px 0px 0px;
  z-index: 0;
 }
 
 .sideLinks {
   display: block;
   position: absolute;
   height: 30px;
   width: 129px;
   text-align: center;
   font-size: 15px;
   border: none;
   border-left: 1px solid white;
   border-right: 1px solid white;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px;
 }
 
.topRight {
   display: block;
   position: relative;
   float: right;
   background-color: black;
   opacity: 0.80;
   height: 100%;
   width: 180px;
   text-align: center;
   font-size: 10px;
   margin: 0px;
   padding: 15px 5px;
   z-index: -1;
 }
 
 .sideLinks:hover {
   display: block;
   position: absolute;
   color: black;
   background-color: #ffffff;
   font-size: 15px;
   width: 129px;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px;
 }
 
.subSideLinks {
   display: none;
   position: relative;
   font-size: 20px;
   background-color: #222;
   height: 30px;
   width: 150px;
   text-align: right;
   margin: 0px 0px 0px 10px;
   padding: 0px 0px;
   text-align: left;
 }

 #footer {
  display: block;
  position: fixed;
  float: bottom;
  width: 100%;
  height: 30px;
  background-color: #222;
  bottom: 0px;
  border: none;
  border-top: 1px solid #fff;
  padding: 5px 10px;
  text-align: center;
  margin: 30px 0px 0px 0px;
  z-index: 2;
}
 
 .sideLinks a{
   display: block;
   position: relative;
   color: #afa;
   text-shadow: none;
   margin: 0px 0px 0px 0px;
   padding: 10px 10px;
   letter-spacing: 2px;
   font-family: Lucida Console;
   text-decoration: none;
   
 }
  
 .sideLinks a:hover {
   display: block;
   position: relative;
   color: black;
   text-shadow: 0px 0px 10px #afa;
 }
 
  a {
   color: #8fff83;
   margin: 0px 0px 0px 0px;
   text-shadow: none;
   text-decoration: none;
   letter-spacing: 1px;
   font-family: code_pro_demoregular, Puritan20Bold, Lucida Console;
   overflow: auto;
   font-size: 14px;
   letter-spacing: 1px;
 }
  
 a:hover {
   position: relative;
   color: #fff;
 }
 
 
  #title a:hover {
   text-align: center;
 }

  h1 {
    display: block;
    font-size: 20px;
    letter-spacing: 5px;
    font-family: code_pro_demoregular, Puritan20Bold, Lucida Console;
    color: #ffffff;
    margin: 0px 0px 0px 0px;
    padding: 20px 20px;
    text-align: center;
  }
  
  h2 {
    display: block;
    font-size: 25px;
    letter-spacing: 5px;
    font-family: code_pro_demoregular, OswaldLight, OswaldStencilRegular, Puritan20Bold, Lucida Console;
    color: #2fa;
    text-shadow: none;
    margin: 0px auto 0px auto;
    padding: 0px 0px;
    text-align: center;
  }
  
h3 {
    display: block;
    font-size: 20px;
    letter-spacing: 5px;
    font-family: code_pro_demoregular, OswaldLight, Arial;
    color: #8fff83;
    margin: 0px 0px 0px 0px;
    padding: 10px 10px;
    text-align: center;
  }
  
  hr {
  width: 50px;
  height: 1px;
  background-color: white;
  margin: 0px auto 0px 10px;
  padding: 0px;
  clear: both;
  }
  
 #container {
  display: block;
  position: relative;
/*  background-color: black; */
  margin: 0px auto 0px auto;
  padding: 50px 0px;
  border: none;
  min-height: 800px;
  height: 100%;
  min-width: 750px;
  width: 50%;
  }

 #transparentContainer {
  opacity: 0.8;
  background-color: black;
  z-index: -2;
  display: block;
  position: fixed;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px;
  border: none;
  height: 100%;
  width: 100%;
}

 .transparentStripe {
  opacity: 0.7;
  background-color: #000;
  z-index: -2;
  display: block;
  position: absolute;
  margin: 0px 240px 0px 210px;
  padding: 0px 0px;
  border: none;
  padding: 0px 0px;
  height: 200px;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

 .rightSide {
  display: block;
  position: absolute;
  margin: -40px 240px 120px 970px;
  padding: 50px 0px;
  border: none;
  width: 200px;
}

 .transparentRightSide {
  opacity: 0.7;
  background-color: black;
  z-index: -2;
  display: block;
  position: fixed;
  margin: 0px 240px 0px 960px;
  padding: 0px 0px;
  border: none;
  padding: 0px 0px;
  height: 99%;
  min-width: 200px;
  border-left: 1px solid white;
  border-right: 1px solid white;
}
  
  
 #content {

   opacity: 0.80;
   display: block;
   position: fixed;
   margin: 0px 0px 0px 20px;
   min-height: 500px;
   width: 100%;
   border: 1px solid white;
   border-top: none;
   padding: 20px;
 }
 
  p, ul {
    display: inline-block;
    font-size: 15px;
    letter-spacing: 1px;
    font-family: Puritan20Normal; /* code_pro_demoregular, OswaldLight, Arial, 'OswaldLight'; */
    color: #dff3ff;
    margin: 0px auto 0px auto;
    padding: 15px 25px;
    text-align: justify;
    line-height: 150%;
	height: 100%;
	width: 90%;
  }

 .button {
  margin: 0px 0px 0px 0px;
  background-color: #29c27f;
  font-family: OswaldLight;
  letter-spacing: 2px;
  display: inline;
  position: relative;
  text-align: center;
  color: white;
  padding: 5px 10px 5px 10px;
  font-weight: bold;
  border: 1px solid white;
}

 .button:hover {
  background-color: #ff4f6f;
  display: inline;
  position: relative;
  text-align: center;
  color: white;
  padding: 5px 10px 5px 10px;
  font-weight: bold;
  border: 1px solid white;
}

.clear {
	clear: both;
}

img {
  display: block;
  border: 3px solid white;
  width: 100px;
  height: 100px;
  padding: 3px;
  border-radius: 0px;
}

 a.fancybox{
    display: block;
    clear: both;
    margin: 10px 10px 10px 10px;
    padding: 0px 0px;
    width: 100px;
    text-align: center;
}


  table#gameScreen {
   table-layout: fixed;
   opacity: 1;
   border-collapse: collapse;
   border: none;
   color: black;
   padding: 0px 0px;
   margin: 10px auto 10px auto;
   width: 320px;
   height: 320px;
 }
 
  table#gameScreen td {
   background-color: #7fffdf;
   border: 2px solid #fff;
   margin: 0px;
   padding: 0px 0px;
   width: 10px;
   height: 10px;
   box-shadow: 1px 1px 7px #ffffff;

 }
 
 div#controls {
	 
 }
 
#buttonUp {}

#buttonRight {}
 
#buttonLeft {}
 
#buttonDown {}
 
 
 table {
   margin: 0px auto 0px auto;
   width: 650px;
 }
 
 textarea {
   padding: 5px;
   margin: 10px auto 0px 15px;
   background-color: #adf;
    font-size: 13px;
    letter-spacing: 2px;
    font-family: OswaldLight;
    color: black;
    resize: none;
 }
 
 .musicPlayer {
  display: block;
  position: static;
  margin: 0px 0px 0px 0px;
  padding: 5px;
  width: 500px;
  height: 30px;
  color: white;
  background-color: black;
  border: 1px solid white;
 }
 
 table.musicProcess {
   position: static;
   table-layout: fixed;
   margin: 0px 0px 0px 0px;
   padding: 5px;
   float: left;
   width: 300px;
 }
 
  table.musicProcess td{
   margin: 0px 0px 0px 0px;
   padding: 0px;
   background-color: white;
   float: left;
   height: 10px;
 }

 .musicButton {
   display: inline-block;
   position: static;
   float: right;
   margin: 0px 0px 0px 0px;
   padding: 5px;
   height: 15px;
   border: 1px solid white;
   background-color: black;
   color: white;
 }
 
 .coverInfo:hover {
 	visibility: visible;
 }

.picLink:hover {
	border-color: #afa;
  border-radius: 50px;

}

#path {
	display: block;
	position: absolute;
	margin: 0px 0px 0px -15px;
	float: left;
	z-index: 3;
	top: 0px;
	padding: 5px;
}

.inText {
	display: inline-block;
}

a.inText:hover {
	display: inline-block;
}

div.columns3 {
	float: left;
	width: 360px;
	height: 350px;
	border: 2px solid white;
	border-radius: 5px;
	padding: 0px;
	margin: 5px 5px 20px auto;
	overflow-x: hidden;
	background-color: #222;
}

div.columns2 {
	display: block;
	border: 2px solid white;
	border-radius: 5px;
	padding: 0px;
	margin: 5px 5px 20px auto;
	overflow-x: hidden;
	background-color: #222;
}

div.header {
	display: block;
	height: 40px;
//	background: linear-gradient(to bottom, #1f2f1f, #0f0f0f);
	background: #1F1F1F;
	border: 2px solid white;
}

div.date, div.date2 {
	display: none;
	color: black;
	font-size: 0.7em;
	background-color: #FFFFFF;
	opacity: 1;
	text-align: center;
}

div.header:hover div.date {
	display: block;
	position: absolute;
	margin: -10px 0px 0px 0px;
}

div.header:hover div.date2 {
	display: block;
	position: absolute;
	margin: -30px 0px 0px -40px;
	padding: 5px;
	vertical-align: text-top;
}

div.clear {
	clear: both;
}

li:hover {
	color: black;
	cursor: pointer;
}

object { height: 10px; }

#titletext {font-size: 60px;}
.picLink { display: inline-block; height: 100%;}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
	background:#F9F9F9;
	padding:25px;
	margin:50px 0;
}

#contact h3 {
	color: #F96;
	display: block;
	font-size: 30px;
	font-weight: 400;
}

#contact h4 {
	margin:5px 0 15px;
	display:block;
	font-size:13px;
}

fieldset {
	border: medium none !important;
	margin: 0 0px 0 0px;
	min-width: 100%;
	padding: 0;
	width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
	width:570px;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}

#contact textarea {
	height:100px;
	max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background:#0CF;
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	font-size:15px;
}

#contact button[type="submit"]:hover {
	background:#09C;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}

.tiles {
  width: 100%;
  height: 100%;
  padding: 2em;
  background-color: #ddd;
}