/*******************************
	Table of Contents

	1.0 Typography
    2.0 General Styles	
	3.0 Content Styles 
	4.0 Media Queries
*******************************/

/*----------------------------------------------*/
/* 1.0 Typography */
/*----------------------------------------------*/
@font-face {
	font-family: 'HelveticaNeueLTPro-Bd';
	src: url('../fonts/neueltpro-bd-webfont.eot');
	src: url('../fonts/neueltpro-bd-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/neueltpro-bd-webfont.woff') format('woff'),
	     url('../fonts/neueltpro-bd-webfont.ttf')  format('truetype'),
	     url('../fonts/neueltpro-bd-webfont.svg#svgFontName') format('svg');
}

@font-face {
	font-family: 'HelveticaNeueLTPro-Lt';
	src: url('../fonts/neueltpro-lt-webfont.eot');
	src: url('../fonts/neueltpro-lt-webfont.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/neueltpro-lt-webfont.woff') format('woff'),
	     url('../fonts/neueltpro-lt-webfont.ttf')  format('truetype'),
	     url('../fonts/neueltpro-lt-webfont.svg#svgFontName') format('svg');
}

/*----------------------------------------------*/
/* 2.0 General Styles */
/*----------------------------------------------*/
body 
{
    margin: 20px;
    color: #666f77;
    background: url(../images/bg-pattern.jpg) repeat-y;
	background-position: 50% 0;
    font-family: NeurialGroteskBold, "HelveticaNeueLTPro-Lt", Arial, Helvetica, sans-serif;
}

h1
{
    margin: 0px;
    padding-bottom: 10px;  
    font-size: 70px;
	font-family: NeurialGroteskRegular, "HelveticaNeueLTPro-Bd", Arial, Helvetica, sans-serif;
}
h2
{
	font-family: NeurialGroteskRegular, "HelveticaNeueLTPro-Lt", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 19px;
}

/*----------------------------------------------*/
/* 3.0 Content Styles */
/*----------------------------------------------*/

.cf-error-details h1 {
	font-family: NeurialGroteskRegular, "HelveticaNeueLTPro-Lt", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 40px;
}

.cf-error-details p {
	font-size: 19px;
	font-weight: normal;
}

.cf-error-details li {
	font-size: 19px;
	font-weight: normal;
}
.container404{width:960px; margin:0 auto}
.left-section{float:left; width:320px}
.right-section{float:right; width: 320px;}

.dark{
	/*text-shadow: 0 -1px 0 rgba(0,0,0,.6) !important;*/
	color: #abb2bf !important;
}
.light{
	/*text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;*/
}

.light .logo{margin:0 0 120px 0;}
.light .logo a{
	text-decoration:none;
	font-family: "HelveticaNeueLTPro-Bd", Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#ccc;
}
.light .logo img
{
	/* width:24px; */
	height:50px;
	border:0;
	vertical-align:bottom;
	margin:0 10px -2px 0;
}

.dark .logo{margin:0 0 120px 0;}
.dark .logo a{
	text-decoration:none;
	font-family: "HelveticaNeueLTPro-Bd", Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#abb2bf ;
}
.dark .logo img
{
	/* width:24px; */
	height:50px;
	border:0;
	vertical-align:bottom;
	margin:0 10px -2px 0;
}

.left-section .btn{
	margin:40px 0 0 0;
	display: inline-block;
	width: auto;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	font-size: 13px;
	line-height: 18px;
	text-decoration: none;
	background: #757e8e;
	color: #fff;
	text-shadow: none;
	text-transform: uppercase;
	font-family: "HelveticaNeueLTPro-Bd", Arial, Helvetica, sans-serif;
}
.left-section .btn:hover{
	background: #4175cb;
	color: #fff;
}
.board-area
{
    width: 320px;
	background: url(../images/board.jpg) no-repeat;
	background-size: 100%;
}

.board-area canvas{
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,.3);
	box-shadow: 0 0 5px rgba(0,0,0,.3);
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 1px 4px rgba(0,0,0,.3) inset;
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 1px 4px rgba(0,0,0,.3) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 1px 4px rgba(0,0,0,.3) inset;
}

#message
{
    margin: 10px 0 15px;
    font-size: 14px;
    font-style: italic;
}
.separator-light{
	height:11px;
	width:100%;
	background: url(../images/separator-light.gif);
}
.separator-dark{
	height:11px;
	width:100%;
	background: url(../images/separator-dark.png);
	margin: 0 0 20px 0
}
.clear{clear:both}

.social a img{width:20px;}
.social a img:hover
{
	-ms-filter: "alpha(opacity=70)";
	filter: alpha(opacity=70);
	opacity: .7;
	-khtml-opacity: .7;
	-moz-opacity: .7;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s;
}

/*----------------------------------------------*/
/* 4.0 Media Queries */
/*----------------------------------------------*/
@media only screen and (max-width : 1020px) {
	.container404{width:100%; margin:0 auto}
}

@media only screen and (max-width : 750px) {
	body 
	{
		background: url(../images/bg-pattern.jpg) repeat-y;
		/*background-position: 100% 0;*/
	}
	.container404{width:100%; margin:0 auto}
	.separator-light {background: url(../images/separator-dark.png);}
}

@media only screen and (max-width : 700px) {
	body 
	{
		background: url(../images/bg-pattern.jpg) repeat-y;
		/*background-position: 100% 0;*/
		margin:20px 0;
	}
	.container404{width:100%; margin:0 auto; text-align:center;}
	.separator-light {background: url(../images/separator-dark.png);}
	.right-section {display: inline-block; float:none}
	.left-section {display: inline-block; float:none}
	.dark .logo {display:none;}
	.board-area {margin:50px 0 0 0;}
}