/* webfonts 
 		font-family: 'Oswald', sans-serif;
 		font-family: 'Montserrat', sans-serif;
 		font-family: 'Raleway', sans-serif;
 		font-family: 'Fjalla One', sans-serif;
 		font-family: 'Inconsolata', ;
 		*/
@import url(https://fonts.googleapis.com/css?family=Oswald|Montserrat|Raleway|Fjalla+One|Inconsolata);
	/* import url is google code referencing the google font families*/
 /* this is a comment */ 

/* css syntax:  
selector{
	property: value;
	property: value;
}
*/

/*//// FIXES   /////*/
* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}


.clearfix:after {
	content:".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	line-height: 0;
}

a:link,  a:visited  { /* selcts links during their default state*/
	font: bold 113%/2em 'Inconsolata', sans-serif;
	text-decoration: none;
	color: #0022FF;
	text-align: left;
}

a:hover { /* selects links while mouse is located over the link*/
	color: #FF2200;
}

header {
	background: url(../images/outerspace.jpg);
	}
	
body {
	background: url(../images/outerspace.jpg);

}


	


p {
	font-size: 100%;
	line-height: 1.5em;
}



figcaption {
	/*
	font-weight: bold;
	font-size: 110%;
	line-height: 1.5em;
	font-family: Georgia, "Times New Roman", serif;  
	*/
	font: bold 113%/2em 'Inconsolata', ;
	color: #0022FF;
	text-align: left;
}
/* ////Positioning CLASSES //// */

.col1_left {
	float: left;
	width: 32.6%;
	margin: 0 0 20px;
}

.col1_mid {
	float: left;
	width: 32.6%;
	margin: 0 1% 20px 1%; /* start at top of box numbers go around clockwise */

}

.col1_right {
	float: right;
	width: 32.6%;
	margin: 0 0 20px;
}

.col2_left {
	float: left;
	width: 66.4%;
	margin: 0 1% 20px 0;
}

.col2_right {
	float: right;
	width: 66.4%;
	margin: 0 1% 20px 1;
}

.col3 {
	width:100%;
	margin: 0 20px 20px;
}

.comiccol1 {
	width: 100%;
	margin:0 0 20px;
	position: relative;
	left: 100px;
	top: -100px;
}

.play-wrap {
	width: 32.6%;
	margin: 0 0 30px;
	position: relative;
	top: 100px;
}


/*class selectors - can apply to as many elements on a single page as you want*/

.pusher {
	position: fixed;
	top: 50px;
	margin: 1px;

}

.blk {
	background: #000;
}

.adtext {
	
	font: bold 108%/2em  'Inconsolata', sans-serif;
	color: #FFFFFF;
}

.adtext2 {
	
	font: bold 105%/2em  'Inconsolata', sans-serif;
	color: #00FF00;
}


.container {
	width:100%;
	padding: 0px;
	margin: 5px;
}

.article1 {
	width: 31.333%;
	height: 800px;
	padding: 10px;
	margin: 1px;

}

.video {
	padding: 5px;
	background-color: black;
	width: 100%;
	
}

.blue{ 
	padding: 10px;
	background-color: rgba( 0, 125, 255, 0.8);
	width: 80%;
	border: 3px dotted #FFF;
	margin:0 0 20px;
	position: relative;
	left: 100px;
	top: -100px;
}
.fossil { 
	padding: 10px;
	background-color: rgba( 0, 125, 255, 0.8);
	width: 100%;
	border: 3px dotted #FFF;
	margin:0 0 20px;
	position: relative;
	left: 100px;
	top: -100px;
}

.fossil2 { 
	padding: 10px;
	background-color: rgba( 0, 0, 0, 0);
	width: 100%;
	border: 0px dotted #FFF;
	margin:0 0 20px;
	position: relative;
	left: 100px;
	top: -100px;
}

.wrapper_store {
	position: relative;
	top: 100px;

}




.wrapper {
	width: 70%; 
	margin: 0 auto;
}

.wrapper_two { 
	width: 66.6%;
	margin: 0 auto;
	position: relative;
	top: 200px;

}

.wrapper_rightside {
	width: 32.4%;
	margin: 0 auto;
	position: relative;
	top: 200px;
	
}

.wrapper_pagename { 
	width: 36.9%;
	margin: 0 auto;
	
	
}


.wrapper_logo { 
	background: #000;
	width: 36.9%;
	margin: 0 auto;
	position: relative;
	top: 200px;
}

.wrapper_store{
	width: 80%;
	margin: 0 auto;
}

.wrapper_music {
	width: 65%;
	margin: 0 auto;
}

.shadow {
	box-shadow: 0px 0px 7px  #FFF;
}

.shadow_green {
	box-shadow: 0px 0px 7px #00FF66; 
}



.wide {
	width: 420px;
}  


/*   Advanced Positioning Techniques   */


.rel_left {
	position: relative;
	left: -40px;
}  

.rel_right {
	position: relative;
	left: 10px;
}

.rel_down {
	position: relative;
	top: 100px;
}

/*   Z INDEX   layers!!! higher numbers go on top of lower numbers */
.z1 {
	z-index: 1;
	background: #FFF;
	position: relative;
	top: 0;
	left: 0:;
}

.z2 {
	z-index: :2;
	background: #000;
	position: relative;
	top: 0px
	left: 0;

}


/*   ID Selector  can only be applied to ONE element on a page */

#logo {
	background: #000;
}

#navbar {
	position: fixed;
	top: 0;
	left: 0px;

	width: 100%;
	z-index: 1; 
	background: url(../images/OuterSpace1wide.jpg);
	border-top: 1px dotted #00FF00;
	border-bottom: 1px dotted #00FF00;

	
	
}

#navbar nav {
	border-left: 1px dotted #00FF00;
	border-right: 1px dotted #00FF00;
}
	 

#navbar nav a {
	display: inline-block;
	width: 13.5%;
	margin: 0;
	padding: 0px ;
	text-align: center;
	border-left: 1px dotted #00FF00;
	border-right: 1px dotted #00FF00;
	 

}

/* Descendent Selector  selects only the indicated element INSIDE the named elements*/

/* ////// example !! /////
#navbar a{ /*selects all the <a> elements within the id of navbar*/
	/*font: bold 113%/2em 'Inconsolata', ;
	text-decoration: none;
	color: #0022FF;
	text-align: left;

} */

/* Pseudo Selectors can change link state during hover or click(event state)*/

#navbar a:link, #navbar a:visited  { /* selcts links during their default state*/
	font: bold 113%/2em 'Inconsolata', sans-serif;
	text-decoration: none ;
	color: #FFFFFF;
	text-align: center;

}


#navbar a:hover { /* selects links while mouse is located over the link*/
	color: #FF2200;
}

#navbar a:active { /* selects link while mouse button is pressed*/
	color: #00FF00;
} 

#navbar  a.selected {
	background: rgba(25, 255, 0, 0.3);
	color: #000;

}
/* ////SOCIAL BAR style //// */
#social {
	position: fixed;
	bottom: 18px;
	left: 18px;
	width: 60px;
	z-index: 1;
}
#social2 {
	position: fixed;
	top: 60px;
	left: 36px;
	width: 200px;
	z-index: 1;
}

#social3 {
	position: fixed;
	bottom: 180px;
	left: 18px;
	width: 60px;
	z-index: 1;
}

#social4 {
	position: fixed;
	bottom: 100px;
	left: 18px;
	width: 60px;
	z-index: 1;
}

#social5 {
	position: fixed;
	bottom: 260px;
	left: 18px;
	width: 60px;
	z-index: 1;
}

#fossil img {
	border: 10px solid #FFF;
	margin: 5px;

}

.footer {
	position: static;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: none;
	color: white;
	text-align: center;}

a.youtube {
	display: block;
	width: 60px;
	height: 60px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url(../images/youtubeicon60.png);

}
a.youtube:hover {
	background: url(../images/youtubeiconhover.png);
}



a.instagram {
	display: block;
	width: 60px;
	height: 60px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url(../images/instagramicon60.png);

}
a.instagram:hover {
	background: url(../images/instagramiconhover.png);
}

a.facebook {
	display: block;
	width: 60px;
	height: 60px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url(../images/facebookicon60.png);

}
a.facebook:hover {
	background: url(../images/facebookiconhover.png);
}


a.andwhat {
	display: block;
	width: 60px;
	height: 60px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url(../images/Patreoncon60.png);

}
a.andwhat:hover {
	background: url(../images/Patreoniconhover.png);
}
a.tinytitle {
	display: block;
	width:  200px;
	height: 200px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url(../images/RudePandaComic_coverLinkToBuy2.png);

}

/* -- contact page -->*/

* {
  box-sizing: border-box;
}

/* Style inputs */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

/* Style the container/contact section */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
}

/* Create two columns that float next to eachother */
.column {
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}