@import 'reset.css';
@import 'text.css';

/* 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 {
    background: url(../images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    color: #434343;
	font-family: 'BebasNeueRegular', 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif;
	overflow-y:scroll;
}
a {
	color: #fff;
	text-decoration: none;
}
th, td {border:1px solid white;padding:1px;}
a:hover, a:active, a:focus {
    color: #ce9a0c;
}
input[type="text"] {
	border: none;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px 0 0 3px;
	font-size: 13px;
	display: inline;
	height: 21px;
	padding: 6px;
	border-right: none; font-weight: bold; color: #555;
}
input[type="submit"] {
/* 	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #35373F), color-stop(1, #474A54) );
	background:-moz-linear-gradient( center top, #35373F 5%, #474A54 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#35373F', endColorstr='#474A54');
	background-color:#35373F;	 */
	background: url("../images/button.png") no-repeat scroll -43px center transparent;
	padding: 0 15px;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 2px 2px 2px 2px;
	border: none;
	display: inline;
    font: bold 13px 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif;
	height: 26px;
	box-shadow: 1px 1px 1px #999999;
	text-decoration:none;
	color: #fff;
	cursor: pointer;
	vertical-align: top;
	margin: 3px 4px 0 0;
	border-left: none;
}input[type="submit"]:hover {
	background-color:#434343;
	background-position: -50px center;
}input[type="submit"]:active {
	position:relative;
}
fieldset {
    clear: both; display: block; float: left; margin-bottom: 0; overflow: hidden; background: #fff; border-radius: 3px;
}
.container_12 {
	display: none;
}


/* Content
----------------------------------------------------------------------------------------------------*/
.loading {
	background: url("../images/loading.gif") no-repeat scroll center center transparent;
	height: 100%;
	width: 100%;
}
#logo {
    margin-bottom: 10px;
    margin-top: 15px;
}
#message {
    font-size: 36px;
    line-height: 36px;
    margin-bottom: 20px;
    text-shadow: 1px 1px #FFFFFF;
}

#subscribe-title {
	font-size: 24px;
	line-height: 24x;
	margin-bottom: 10px;
}
#response{
	font-family: 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif;
	font-weight: bold;
}
#progress {
	background: url("../images/progress-bg.png") no-repeat scroll 0 0 transparent;
	height: 393px;
	font-size: 90px;
	line-height: 150px;
	font-weight: bold;
	position: relative;
	z-index: 99;
}



#percent {
    background: url("../images/progress.png") no-repeat scroll 0 0 transparent;
    height: 216px;
    left: 42px;
    line-height: 224px;
    position: absolute;
    text-align: center;
    top: 100px;
    width: 216px;
}
#holder {
    height: 216px;
    left: 42px;
    position: absolute;
    top: 100px;
    width: 216px;
}
#subscribe {
	padding: 20px 20px 20px 20px;
	color: #fff;
	line-height: 24px;
	border-radius: 4px;
	position: relative;
}
#shadow {
	height: 100%;
	width: 100%;
	position: absolute;
	top:0;
	left: -300px;
	z-index: -99;
}


/* Social
----------------------------------------------------------------------------------------------------*/
#socials {
    float: left;
    margin-bottom: 10px;
    margin-top: 5px;
    width: 100%;
}
#socials a {
	float: left;
	margin-right: 10px;
}
#socials a span {
    background: url("../images/socials.png") no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    float: left;
    height: 27px;
    width: 27px;
}
#socials .digg span 	{ background-position: 0 0; }
#socials .share span 	{ background-position: -34px 0; }
#socials .flickr span 	{ background-position: -67px 0; }
#socials .dribble span 	{ background-position: -100px 0; }
#socials .forrst span 	{ background-position: -134px 0; }
#socials .rss span 		{ background-position: -168px 0; }
#socials .google span 	{ background-position: -200px 0; }
#socials .vimeo span 	{ background-position: -234px 0; }
#socials .twitter span 	{ background-position: -268px 0; }
#socials .facebook span { background-position: -302px 0; }


/* Tipsy
----------------------------------------------------------------------------------------------------*/
.tipsy { font-size: 11px; letter-spacing: 1px; position: absolute; padding: 5px; z-index: 100000;text-shadow: none; }
.tipsy-inner { background-color: #434343; color: #f3f3f3; max-width: 200px; padding: 0 5px; text-align: center; }
.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #434343; }
.tipsy-arrow-n { border-bottom-color: #434343; }
.tipsy-arrow-s { border-top-color: #434343; }
.tipsy-arrow-e { border-left-color: #434343; }
.tipsy-arrow-w { border-right-color: #434343; }
.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }


/* Tweet
----------------------------------------------------------------------------------------------------*/
#twitter {
	font-family: 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif;
	font-size: 12px;
	position: relative;
	min-height: 42px;
	text-shadow: 1px 1px #fff;
}
#twitter p {
	top: 0;
	left: 0;
	margin:0;
	position: absolute;
	display: none;
	background: url(../images/tweet.png) no-repeat scroll 0 1px transparent;
	padding-left: 24px;
}
#twitter .tweet-time {
    font-size: 11px;
	color: #777;
}
#twitter a {
	font-weight: bold;
}


/* Skinner
----------------------------------------------------------------------------------------------------*/
#subscribe, #shadow, #submit { background-color: rgba(29,48,97,0.8); }
#holder svg path { stroke: #8AA3FF; }


/* Switcher - Additional style for demo only
----------------------------------------------------------------------------------------------------*/
#switcher { font-family: 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif; color: #444}
#switcher label { display: block; clear: both; }
#switcher select, #switcher .colorpicker, #switcher input[type="text"] { border-radius: 2px;}
#switcher input[type="text"] { padding: 2px 0; border: 1px solid #ccc; border-radius: 3px;}
#option_btn { background: url("../images/switcher.png") no-repeat scroll right 0 #f2f2f2; border-radius: 0 4px 4px 0; cursor: pointer; height: 40px;left: 0; position: fixed; top: 19px; width: 40px; z-index: 999; border: 1px solid #ccc; border-left: 1px solid #f2f2f2; }
#option_wrapper { position: fixed; background: none repeat scroll 0 0 #f2f2f2; top: 19px; left:-245px; width: 217px; z-index: 99; min-height: 75px; border-radius: 0 0 4px 0; border: 1px solid #ccc; }
#option_wrapper .inner { margin: 0 10px; }
#option_wrapper select { border: 1px solid #ccc; border-radius: 3px; padding: 4px; width: 100%; margin-bottom: 10px; }
#zcolorpickerskins { margin: 10px 0;}
.farbtastic { position: relative; }
.farbtastic * { position: absolute; cursor: crosshair; }
.farbtastic, .farbtastic .wheel { width: 195px; height: 195px; }
.farbtastic .color, .farbtastic .overlay { top: 47px; left: 47px; width: 101px; height: 101px; }
.farbtastic .wheel { background: url(../wheel.png) no-repeat; width: 195px; height: 195px; }
.farbtastic .overlay { background: url(../mask.png) no-repeat; }
.farbtastic .marker { width: 17px; height: 17px; margin: -8px 0 0 -8px; overflow: hidden; background: url(../marker.png) no-repeat; }
#resize { position: fixed; bottom: 0; right: 0; background: url(../resize.png) no-repeat; width: 60px; height: 60px;}