/*

Theme Name: Strobey

Theme URI: Your Theme's URI

Description: 

Version: 1.0

Author: Michael Stormbom

Author URI: graphics.sturmbaum.net

*/



@font-face {

    font-family: 'spin_cycle_otregular';

    src: url('/wp-content/themes/strobey/fonts/spincycle_ot-webfont.woff2') format('woff2'),

         url('/wp-content/themes/strobey/spincycle_ot-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}



html{

 height:100%;

 min-height:100%;

 }



 

 h1 {

	 font-size: 32pt;

 }

  h2 {

	 font-size: 24pt;

 }

   h3 {

	 font-size: 20pt;

 }

    h4 {

	 font-size: 18pt;

 }

 p {

	 font-size: 16pt;

 }



html, body {

	margin: 0;

	padding: 0;



    background: url('/wp-content/themes/strobey/img/bg3.png') no-repeat center center fixed;

	    -webkit-background-size: cover; /* For WebKit*/

    -moz-background-size: cover;    /* Mozilla*/

    -o-background-size: cover;      /* Opera*/

    background-size: cover;         /* Generic*/

	overflow:hidden;

}



body: {

		font-size: 16pt;

	height: 100%;

}



a {

	color: #caa

	text-decoration: none;

			text-shadow: 2px 2px 5px black;

	

}



a:link,

a:visited {

	color: #dbb;

	text-decoration: none;

			text-shadow: 4px 4px 7px black;

}



a:hover,

a:focus,

a:active {

	color: #fff;

			text-shadow: 4px 4px 7px black;

}





#footer {

	width: 100%;

	height: 60px;

    background: rgb(0, 0, 0);

    background: rgba(0, 0, 0, .75);

-moz-box-shadow:0px 0px 24px #000000;
-webkit-box-shadow:0px 0px 24px #000000;
box-shadow:0px 0px 24px #000000;

	position: fixed;

	bottom: 0;

	padding-top: 15px;

	padding-left: 15px;

	padding-right: 15px;

	text-align: right;

}



#header {

  width: 100%;

  position: fixed;

  top: 0;

  font-family: 'spin_cycle_otregular', Fallback, Verdana;

  color: white;  

  font-size: 46pt;

}



#menu {

	margin-right: 20pt;

	margin-top: 50pt;

	float: right;

		position: fixed;

		right: 0;

		top: 0;

		text-shadow: 2px 2px 5px black;

}



img#logo {

max-width: 100%;

    max-height: 100%;

	min-height: 100px;

	z-index: 1;

}

#playlist {
	position: fixed;
	padding-top: 50px;
	left: 20px;
	top: 148px;
	width: 27%;
        height: calc(100vh - 148px - 60px - 10px - 60px);
        float: left;
}

#main {

	clear: both;
    background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, .75);

	margin-left: 30%;

	padding-left: 20px;

	padding-right: 50pt;

	padding-top: 20px;

	margin-top: 148px;

	font-size: 18px;

	font-family: calibri, verdana;

-moz-box-shadow:0px 0px 24px #000000;
-webkit-box-shadow:0px 0px 24px #000000;
box-shadow:0px 0px 24px #000000;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px; 

	color: white;

    height: calc(100vh - 148px - 60px - 30px - 60px);

	overflow-y: scroll;

	overflow-x: none;

}



#main::-webkit-scrollbar {

    width: 14px;

    background-color: rgba(0,0,0,0.75);

} 

#main::-webkit-scrollbar-thumb {

    background-color: #f00;

}



#main::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

    background-color: rgba(0,0,0,0.75);

}





.socmedicon {

	margin-right: 20px;

}



@media only screen and (max-width: 1100px) {

		#header {

			font-size: 36pt;	

	}

	
#playlist {
	display: none
	}



	    #main {

        padding-left: 10px;

		padding-right: 10px;

		margin-left: 10px;

	   margin-top: 130px;

		background: rgba(0,0,0,0);

				    height: calc(100vh - 188px - 60px - 10px);

    }

	

	#menu {

		right: 10px;

	position: fixed;

	top: 0;

	margin-top: 100px;

	}

}



@media only screen and (max-width: 800px) {

    /* For mobile phones: */

#playlist {
	display: none
	}

    #main {

        padding-left: 10px;

		padding-right: 10px;

		margin-top: 160px;

		margin-left: 0;

		background: rgba(0,0,0,0.75);

		    height: calc(100vh - 188px - 25px - 82px);

    }

	#header {

			text-align: center;

			font-size: 36pt;	

	}

	#menu {

		font-size: 36pt;

		right: 10px;

		clear: both;

		float: none;

	position: fixed;

		min-width: 600px;

	}

	

	#footer {

		overflow: none;

				text-align: center;

	}

}