/*******************************************
CSS reset
*******************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/******************************************
* general
******************************************/

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

}
body { font-family: Arial, Verdana; color: #fff; text-align: center; }
a:hover { text-decoration: none; }

/*header*/
#header { padding: 0; font-family: "BebasNeueRegular", Arial, Verdana; font-weight: normal; height: 103px;}
#header.no-timer { height: 30px; }
#header h3 { font-size: 20px; padding: 5px 0; font-weight: normal; text-shadow: 0 2px 1px #101010; color: #e0e0df;}
#timer-wrap { padding: 0 0 6px; }
#timer { margin: 0 auto; width: 800px; }
#timer > span { display: block; width: 800px; margin: 0 auto; }
 #timer > span > span { 
	display: inline-block; padding: 4px 8px 2px; margin: 0 5px 0 0; font-size: 46px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	text-shadow: 0 2px 1px #090909;
}
#wrapper { width: 650px; margin: 18px auto; text-align: center; }

#logo { margin: 0 0 18px; }
#embed { border: 5px solid #000; background: #000; width: 605px; margin: 0 auto 18px; box-shadow: 0 8px 10px rgb(38,38,38); }
#embed-inner { border: 5px solid #333; }
/*main content and body text*/
#main-content h2#title { color: #fff; font-size: 46px; text-transform: uppercase; margin: 0 0 18px; font-family: "BebasNeueRegular", Arial, Verdana;font-weight: normal; }
#body-text { margin: 0 0 18px; line-height: 18px; }
#body-text p { line-height: 18px; margin: 0 0 18px; font-size: 14px; }
#body-text h1, #body-text h2, #body-text h3, #body-text h4, #body-text h5, #body-text h6 { margin: 0 0 18px; }
#body-text h1 { font-size: 24px; }
#body-text h2 { font-size: 22px; }
#body-text h3 { font-size: 20px; }
#body-text h4 { font-size: 18px; }
#body-text h5 { font-size: 16px; }
#body-text h6 { font-size: 16px; }
#body-text ul, #body-text ol { margin: 0 0 18px; }
#body-text ul li { list-style: disc inside; display: list-item; }
#body-text ol li { list-style: decimal inside; display: list-item; }
#body-text blockquote p { font-style: italic; }

/*footer*/
#footer { height: 251px; }
#footer.no-social { height: 30px; }
#social { width: 240px; margin: 0 auto; padding: 35px 0 18px;}
#social h3 { padding: 70px 0 0; background: url(../images/hello.png) no-repeat 50% top; display: inline-block; font-family: "BebasNeueRegular", Arial, Verdana; font-size: 24px; font-weight: normal; text-align: center; text-shadow: 0 2px 1px #101010;}
#social ul { 
	padding: 12px 0 12px 12px; margin: 18px 0 0; height: 32px; text-align: center; background: #262626;  
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}
#social li { display: inline-block; width: 32px; height: 32px; margin: 0 12px 0 0; text-indent: -9999px; }
#ie7 #social li { display: block; float: left; }
#social li a { display: block; height: 32px; width: 32px; background: url(../images/icons.png) }
#social a.facebook { background-position: -64px 0; }
#social a.twitter { background-position: 0 0; }
#social a.vimeo { background-position: -128px 0; }
#social a.rss {background-position: -32px 0; }
#social a.youtube { background-position: -96px 0; }


/******************************************
* light template
******************************************/
.cgc_light { background: #e6e6e6 url(../images/light_bg.jpg); }
.cgc_light #main-content { color: #363636; }
.cgc_light #main-content #title { color: #363636;  }
.cgc_light #header { background: url(../images/header_light.png) left bottom repeat-x;  }
.cgc_light a { color: #666; }
.cgc_light #footer { background: url(../images/footer_light.jpg); }
.cgc_light #footer #social ul { background: #373737; }
.cgc_light #timer > span > span {
	/* Legacy browsers */
	background: url("c../images/timer-light.png") repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	/* Internet Explorer */
	*background: none;
	background: none\0/;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FF404040, endColorstr=#FF313131);
}
@media all and (min-width: 0px) {
	.cgc_light #timer > span > span {
		/* Opera */
		background: #404040;
		/* Recent browsers */
		background-image: -webkit-gradient(
			linear,
			left top, left bottom,
			from(#404040),
			to(#313131)
		);
		background-image: -webkit-linear-gradient(
			top,
			#404040,
			#313131
		);
		background-image: -moz-linear-gradient(
			top,
			#404040,
			#313131
		);
		background-image: -o-linear-gradient(
			top,
			#404040,
			#313131
		);
		background-image: linear-gradient(
			top,
			#404040,
			#313131
		);
	}
}

/******************************************
* dark template
******************************************/

.cgc_dark { background: #272a2b url(../images/dark_bg.jpg); }
.cgc_dark #header { background: url(../images/header_dark.png) left bottom repeat-x;  }
.cgc_dark a { color: #ccc; }
.cgc_dark #footer { background: url(../images/footer_dark.jpg); }
.cgc_dark #timer > span > span { 
	/* Legacy browsers */
	background: #212221 url("../images/timer-bg.png") repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	/* Internet Explorer */
	*background: #212221;
	background: #212221\0/;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FF393939, endColorstr=#FF212221);
}
@media all and (min-width: 0px) {
	#timer > span > span {
		/* Opera */
		background: #212221 url("../images/timer-bg.svg");
		/* Recent browsers */
		background-image: -webkit-gradient(
			linear,
			left top, left bottom,
			from(#393939),
			to(#212221)
		);
		background-image: -webkit-linear-gradient(
			top,
			#393939,
			#212221
		);
		background-image: -moz-linear-gradient(
			top,
			#393939,
			#212221
		);
		background-image: -o-linear-gradient(
			top,
			#393939,
			#212221
		);
		background-image: linear-gradient(
			top,
			#393939,
			#212221
		);
	}
}
/******************************************
* green template
******************************************/

.cgc_green { background: #e6e6e6 url(../images/green_bg.jpg); }
.cgc_green a { color: #666; }
.cgc_green #header { background: url(../images/header_green.png) left bottom repeat-x;  }
.cgc_green #timer-wrap { border-color: #292f2d; }
.cgc_green #timer > span > span {
	/* Legacy browsers */
	background: url("../images/timer-green.png") repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	/* Internet Explorer */
	*background: none;
	background: none\0/;
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FF505c58, endColorstr=#FF3f4744);
}
@media all and (min-width: 0px) {
	.cgc_green #timer > span > span {
		/* Opera */
		background: #3f4744;
		/* Recent browsers */
		background-image: -webkit-gradient(
			linear,
			left top, left bottom,
			from(#505c58),
			to(#3f4744)
		);
		background-image: -webkit-linear-gradient(
			top,
			#505c58,
			#3f4744
		);
		background-image: -moz-linear-gradient(
			top,
			#505c58,
			#3f4744
		);
		background-image: -o-linear-gradient(
			top,
			#505c58,
			#3f4744
		);
		background-image: linear-gradient(
			top,
			#505c58,
			#3f4744
		);
	}
}
.cgc_green #embed { box-shadow: 0 8px 10px rgb(80,80,80);  }
.cgc_green #main-content { color: #363636; }
.cgc_green #main-content #title { color: #363636;  }
.cgc_green #footer { background: url(../images/footer_green.jpg); }
.cgc_green #footer #social ul { background: #48534f; }