/***********************************************
CSS for use with index.html at dougcarreiro.com
Doug Carreiro 2013
************************************************/

/*
Google Fonts stored locally:

font-family: 'Audiowide', cursive;
font-family: 'Exo', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;

*/
@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: local('Audiowide'), local('Audiowide-Regular'), url(fonts/audiowide.woff) format('woff');
}
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: local('Exo Regular'), local('Exo-Regular'), url(fonts/exo.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(fonts/opensans.woff) format('woff');
}


/**Shared CSS**/
html, body{
	display:block;
	font-family: Tahoma, Helvetica, Verdana;
	font-size:14px;
	color:black;
	text-align: left;
	width:100%;
	height:100%;
	min-width:980px;
	min-height:474px;
	padding: 0px;
	margin: 0px;
	background: #c9c5b4;
	overflow:auto;
}

#floater {
	display:block;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -237px;
	width: 100%;
}

@media all and (max-height: 474px) {
	#floater {
	   top: 0px;
	   margin-top: 0px;
	}
}

.content{
	clear:both;  
	display:block;
	position:relative;
	width:980px;
	height:474px;
	margin-left: auto;
	margin-right: auto;
	//background: url(assets/coolmap-trans.png) no-repeat;
	//background-position:right 74px;
	overflow:hidden;

}

.header{
	display:block;
	position: relative;
	width:100%;
	height:88px;
	background:transparent;
}

.main{
	display:block;
	position: relative; 
	height:386px; 
	width: 100%;
	vertical-align: top; 
	padding:0; 
	margin: 0;
}

.background-text{
	display:block;
	z-index:0;
	position:absolute; 
	top:0; 
	left:0; 
	right:0;
	overflow:hidden; 
	white-space:nowrap; 
	font-family: 'Audiowide', cursive; 
	font-size:125px; 
	//color:rgba(0, 0, 0, 0.05);
	color:#bfbbab;
}

.background-fill{
	display:block;
	position:absolute; 
	top:0; 
	left:0; 
	width:100%;
	height:100%;
	background: url(assets/coolmap-trans.png) no-repeat;
	background-position:right 74px;
}

.title{
	font-family: 'Audiowide', cursive; 
	font-size:50px; 
	padding-left:125px;
}

.subtitle{
	font-family: 'Exo', sans-serif; font-size:20px; 
	padding-left:245px;
	text-align:left; 
	margin-top:-5px;
}

.profilePic{
	float:right; 
	margin-left:5px; 
	margin-bottom:5px;
}

/**Scripted Site**/
#content-script{
	display:none;
}

#menu{
	position:relative; 
	vertical-align: top; 
	margin-left:215px; 
	padding-top: 25px;
	width:150px;
}

.menu-item, 
.menu-item a:link, 
.menu-item a:visited{
	z-index:1;
	line-height: 30px; 
	font-family: 'Open Sans Condensed', sans-serif; 
	font-size:25px;
	vertical-align: middle;
	cursor:pointer;
	color:black;
	text-decoration:none;
}

.menu-item:hover, 
.menu-item a:hover, 
.menu-item a:active{
	color:white;
	text-decoration:none;
}

#main-content{
	z-index:2;
	display:block;
	position:absolute; 
	top:0px; 
	bottom:0px; 
	right:0px; 
	left:365px; 
	padding:0; 
	margin:0;

}

.popup{
	display: block;
	position: absolute; 
	z-index:5;
	top:5px; 
	right:150px; 
	bottom:75px; 
	left:5px; 
	padding:25px 25px 25px 25px; 
	background: rgba(0, 0, 0, 0.75); 
	color:white; 	
	padding: 10px; 
	border: 1px solid white; 
	border-style:solid;
}

.popup-header{
	display:block;
	z-index:4;
	width:100%; 
	padding-bottom:5px; 
	margin-bottom: 5px; 
	font-size:18px;
	border: 1px solid white; 
	border-style:none; 
	border-bottom-style:solid;
}

.x-box{
	float: right;
	width:20px; 
	height:20px;
	background:url('assets/x-box.png') no-repeat; 
	cursor:pointer;
}






/**No Script Site**/
#content-noscript{
	display:block;
}

#threeBlockWrapper{
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	height:206px;
}

.threeBlock{
	display:block;	
	background: rgba(0, 0, 0, 0.75); 
	color:white; 
	width:308px; 
	height:100%; 
	padding:5px; 
	border: 1px solid white; 
	border-style:solid;
}

#blockOne{
	position:absolute;
	bottom:0px;
	left:0px;
}

#blockTwo{
	position:absolute;
	bottom:0px;
	left:330px;
}

#blockThree{
	position:absolute;
	bottom:0px;
	right:0px;
}





/**Generic Classes**/
a:link, a:visited{
color:white;
text-decoration:none;
}

a:hover, a:active{
color:orange;
}

.center{
	margin:0 auto;
	text-align: center;
}

.unselectable{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor:default;
}