/*** General ***/
*{
	padding:0;
	margin:0;
	outline:0
}
*:focus{
	outline:0
}
html{
width:100%;
height:100%;
}

html,body {
	height: 100%;
}

body{
	background-image: url("../images/465.gif");
	background-repeat:no-repeat;
	background-position:50% 50%;
	color: #fff;
	background-color: #000;
	margin:0;
	padding:0;
}
/* quote */
.footer_a p {
	position: absolute;
	left: 70px;
	font-size:12px;
	bottom: 8px;
	z-index: 20;
	font-family: arial, sans-serif;
}
 
/* The Idea Time Footer*/
.footer_b p {
	position: absolute;
	right: 30px;
	font-size:12px;
	bottom: 8px;
	z-index: 20;
	font-family: arial, sans-serif;
}	


/*** Menu ***/
#main{
	position:absolute;
	color: white;
	line-height: 17px;
	display:block;
	font-size: 15px;
	margin-left: 70px;
	margin-top: 20px;
	z-index: 20;
	list-style-type: none;
}
#main a{
	background-color: #000;
	font-weight: bold;
	letter-spacing: 1px;
	font-family: arial, sans-serif;
	color: #fff;
	text-decoration:none;
	cursor:pointer;

}

/*Interactivity*/
#main li:nth-child(2){	
	width: 114px;
	font-size: 15px;
	letter-spacing: 0px;
 	font-family: arial, sans-serif;
	margin-top:2px;
	font-weight: bold;
	background-color:black;

}
/*Christopher Koelsch*/
#main li:first-child{

	font-size:15px;
	letter-spacing: 0px;
	font-weight: bold;

}
/*Menu*/
#main li:last-child{
	margin-top: 2px;
	letter-spacing: 0px;
	font-weight: bold;


}
#main li a:hover{
	color: gray;
	text-decoration:none;
}
/*** Sub Menu ***/
#secondary{
	position:absolute;
	color: white;
	line-height: 19px;
	display:block;
	font-size: 15px;
	margin-left: 70px;
	margin-top: 120px;
	z-index: 20;
	list-style-type:none;
	font-family: arial, sans-serif; 
}
#secondary a{
	/* font-weight: 400; */
	color: white;
	text-decoration:none;
	cursor:pointer;
	
	
}
#secondary li a:hover{
	color: gray;
	text-decoration:none;
}

#friends{
	background-color: black;
	width: 160;
	position:absolute;
	color: white;
	line-height: 19px;
	display:block;
	font-size: 15px;
	margin-top: 80px;
	z-index: 20;
	list-style-type: none;
    letter-spacing: 1px;

}

#third{
	width: 160;
	position:absolute;
	color: white;
	line-height: 19px;
	display:block;
	font-size: 15px;
	margin-top: 140px;
	z-index: 20;
	list-style-type:none;
	font-family: arial, sans-serif;

}

#third a{
	color: white;
	text-decoration:none;
	cursor:pointer;
		
}

#third li a:hover{
	color: gray;
	text-decoration:none;
}

/*** Content Wrappers/Styling ***/

#header{
	position:relative;
	margin: auto;
	top:180px;
	height: auto;
	width: 800px;
	z-index: 20;
	text-align: center;
}
#holder h3{
	position: relative;
	margin: auto;
	font-weight:550;
	color:white;
	text-transform: uppercase;
	line-height: 1.4em;
	font-size: 17px;
	margin-bottom: 10px;
}
#holder{
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	left:50%;
	margin-left:-265px;
	top:150px;
	height: auto;
	width: 490px;
	font-weight: 400;
	font-size: 14px;
	z-index: 20;
	padding: 20px;
	text-align: normal;
	background-color:#805F1A;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter:alpha(opacity=50);
	-moz-opacity:0.50;
	-khtml-opacity: 0.50;
	opacity: 0.50;
	border: solid 3px;
	border-color: #4B3810;
}
#holder p{
	font-size: 1em;
	line-height: 1.5em;
	letter-spacing:normal;
	margin-bottom: 10px;
}


/*Adam Fairhead*/

#holder {
	transition: all 1s;
	-webkit-transition: all 1s; /* Safari */
}

#holder.hidden { left: -260px; }

.toggler {
	position: absolute;
	top: 0;
	background: #000;
	padding: 10px;
	color: #fff;
	text-decoration: none;
}

@media only screen and (min-width: 768px) {
	.toggler { right: -45px; }
	.no-touch .bg-gif { display: none; }
	.touch #video_background { display: none; }

	.twitter-timeline { width: 360px; }

	.twitter-timeline { float: left; }
	.twitter-timeline {padding-top: 5px; padding-right: 10px; }
	.widget-facebook { float: right; }

	.instagram {
		float: right;
		width: 110px;
		
	}

	.widget-facebook img {
		width: auto;
		height: auto;

	}
}

.bg-gif {
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.bg-gif img {
	min-height: 100%;
	min-width: 100%;
}

@media only screen and (max-width: 767px) {
	.widget-facebook,
	.instagram { float: left; margin-top: 20px; }
	.twitter-timeline { width: 80%; }
	

	#video_background { display: none; }

	#holder {
		width: 80%;
		margin: 0 auto;
		left: 0;
		right: 0;
		padding-top: 10px;
		top: 75px;
	}
	.footer, .wordpress, .facebook { display: none;	}

	#main {
		width: 80%;
		margin: 0 0 0 10px;
	}

	#holder.hidden { left: -185%; }

	.toggler.open {
		padding-left: 0;
		top: 10px;
	}

	.toggler.closed {
		top: 0;
		right: -45px;
	}

}


@font-face {
    font-family: 'osp-dindin';
    src: url('http://christopherkoelsch.com/fonts/osp-din-webfont.eot');
    src: url('http://christopherkoelsch.com/fonts/osp-din-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://christopherkoelsch.com/fonts/osp-din-webfont.woff') format('woff'),
         url('http://christopherkoelsch.com/fonts/osp-din-webfont.ttf') format('truetype'),
         url('http://christopherkoelsch.com/fonts/osp-din-webfont.svg#osp-dindin') format('svg');
    font-weight: normal;
    font-style: normal;

}