/*
 *	index.html styling
 */

#main {
	height: 100%;
	margin-top: -160px;
}

/*
 *
 */
#for-the-press {
	position: absolute;
	top: 0;
	right: 0;
	margin: 10px;
}

#for-the-press a {
	display: block;

	font-size: 11px;
	line-height: 13px;

	padding: 1px;
}

#for-the-press a:hover,
#for-the-press a:active {
	text-decoration: none;

	padding: 0px;
	border-radius: 5px;
	border: 1px solid #bbb;
	border-top: 1px solid #888;
	border-bottom: 1px solid #eee;
}

#for-the-press a div {
	padding: 10px 15px 9px;

	color: #777;
}

#for-the-press a:hover div,
#for-the-press a:active div
{
	
	padding: 9px 14px 8px;
	border-radius: 4px;
	border: 1px solid #aaa;
	border-top: 1px solid #bbb;

	color: #333;
	background: rgba(255,255,255, 0.25);
}

/*
 *
 */
#logo {
	width: 440px;
	height: 266px;

	position: absolute;
	top: 50%;
	left: 50%;

	margin-left: -220px;
	margin-top: -127px;
	margin-top: -223px;

	background-image: url(/img/logo-5.png);

	text-indent: -10000px;
	overflow: hidden;
}

#callout div {

	position: absolute;
	top: 50%;
	left: 50%;

	background-image: url(/img/callout-2-i.png);
	background-repeat: no-repeat;

	text-indent: -10000px;
	overflow: hidden;
}

#callout div#callout-link {

	width: 57px;
	height: 96px;

	margin-left: 235px;
	margin-top: -38px;

	background-position: -84px 0;

}

#callout div#callout-text {

	width: 212px;
	height: 91px;

	margin-left: 151px;
	margin-top: 70px;

	background-position: 0 -110px;
}

#info {
	height: 160px;

	text-align: center;
	line-height: 1px;

	cursor: default;
}

/*
 *
 */
#button {
	display: inline-block;
	margin-top: 56px;
}

#button div,
#button div div {

	display: inline-block;

	width: 222px;
	height: 47px;

	background-image: url(/img/button-5.png);
	cursor: pointer;

	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#button div { 
	background-position: 0 0; 
}

#button div div { 
	background-position: 0 -80px; 
	opacity: 0;
}

#button.active div div,
#button div div:active,
#button div div:hover { 
	opacity: 1;
}
	
#button:hover,
#button:active,
#button.active {
	background-position: 0 -80px;
}

/*
 *
 */
#brief {
	width: 50px;
	height: 0px;
	
	border-top:    1px solid #888;
	border-bottom: 1px solid #fff;

	margin-top: 79px;

	display: none;
	overflow: hidden;
}

#inner {
	width: 100%;
	height: 100px;
	background: #2A2A2C;
	background-image: url(/img/brief-back.png);
	opacity: 0.2;

	border-top:    1px solid #000;
	border-bottom: 1px solid #222;

	vertical-align: middle;
}

#close {
	width: 20px;
	height: 20px;
	margin: 3px 3px 0 -20px;
	float: right;
	background-image: url(/img/close.png);
	opacity: 0.3;
	cursor: pointer;
}

#close:hover {
	opacity: 1;
}

/*
 *
 */
.arrow,
.arrow div {
	
	width: 25px;
	height: 26px;

	display: inline-block;

	background: url(/img/arrows.png);
	vertical-align: middle;
}

.arrow {
	margin: 0 40px;
}

.arrow div {
	opacity: 0;
	cursor: pointer;
}

#l.arrow           { background-position:     0 -26px; }
#l.arrow div       { background-position: -25px -26px; }
#l.arrow div:hover { opacity: 1; }

#r.arrow           { background-position:     0   0px; }
#r.arrow div       { background-position: -25px   0px; }
#r.arrow div:hover { opacity: 1; }

/*
 *
 */
#slider {
	width: 400px;
	height: 62px;
	margin: 20px 0; 
	display: inline-block;

	vertical-align: middle;

	line-height: 20px;
	text-align: left;

	white-space: nowrap;
	overflow: hidden;

	color: #bbb;
	font-weight: 400;
	text-shadow: 0 0 0 transparent, 0 0 0px #555;
}

#slider > div {
	width: 360px;
	padding: 0 20px;

	display: inline-block;
	vertical-align: top;
	white-space: normal;

	position: relative; /* for #no-thanks */
}

#slider > div b {
	color: #fff;
	font-weight: 400;
	text-shadow: 0 0 0 transparent, 0 0 1px #bbb;
}

#slider > div a {
	color: #7DC3FF;
	color: #FFDD22;
	text-decoration: underline;

	display: inline-block;
	padding: 0 1px;
}

#slider > div a:focus {
	background: #000;
	padding: 0  3px  1px;
	margin:  0 -2px -1px;
	border-radius: 5px 5px 2px 2px;
}

#slider > div a:hover {
	color: #fff;
}

#slider > div .half-height {
	width: 1px;
	height: 10px;
	line-height: 10px;
	font-size: 1px;
}

/*
 *
 */
#no-thanks {
	font-size: 84%;
	color: #666;
	cursor: pointer;

	position: relative;
	top: -19px;
	text-align: right;
	padding-right: 2px;
}

#no-thanks:hover {
	color: #ffdd22;
}

/*
 *
 */
form {
	margin: 0 auto;
	width: 308px;
	height: 42px;

	background-image: url('/img/input-back.png');
	text-shadow: none;

	position: relative; /* for #submit */
}

form input#email {

	display: block;
	position: relative; /* for hinting */

	width: 230px;
	height: 20px;
	padding: 11px 32px 11px 12px;
	margin-top: 9px;

	line-height: 20px;
	color: #333;

	-moz-appearance: none;
	box-shadow: none;
	border: none;
	background: transparent;
	outline: none;
}

form input#email::-moz-selection {
	background: #ffdd22;
	color: #222;
}

form div#email-hint {

	position: absolute;
	top: 0;

	width: 250px;
	height: 20px;
	padding: 11px 12px 11px 12px;

	line-height: 20px;
	color: #333;
}

form div#submit {

	display: block;
	float: right;

	position: relative;
	margin-top: -42px;

	height: 20px;
	padding: 11px 15px;
	line-height: 20px;

	text-align: right;
	text-decoration: none;
	
	color: #333;
	cursor: pointer;
}

form div#submit span {
	opacity: 0.6;
}

form div#submit:hover span,
form div#submit:focus span {

	opacity: 1.0;
}

/*
 *	busy
 */
form.busy #email {
	color: #999;
}

form.busy #submit,
form.busy #submit:hover {
	cursor: default;
	background-image: url(/img/busy.gif);
	background-position: center center;
	background-repeat: no-repeat;
	padding: 11px 0;
	width: 50px;
}

form.busy #submit span {
	display: none;
}

/*
 *	ok
 */
form.ok {
	background-image: none;
}

form.ok #email,
form.ok #email-hint,
form.ok #submit {
	display: none;
}

form #done {
	display: none;

	width: 308px;
	height: 60px;
	line-height: 20px;
	text-align: center;
}

form #done span {
	color: #ddd;
}

form.ok #done {
	display: block;
}

/*
 *	error
 */
form #error {
	display: none;

	position: relative;
	margin-top: -5px;
	color: #EF4343;
	color: #FFDD22;
	text-align: center;
	font-size: 11px;
}

form.error #error {
	display: block;
}

/*
 *
 */
#dots {
	display: none;
	margin-top: 8px;
}

#dots div {
	display: inline-block;
	width: 14px;
	height: 12px;
	background-image: url(/img/dot.png);
	background-repeat: no-repeat;
	background-position: center center;

	opacity: 0.4;
	cursor: pointer;
}

#dots div:hover {
	background-image: url(/img/dot-big.png);
}

#dots div.active {
	background-image: url(/img/dot-big.png);
	cursor: default;
}

#dots div:hover,
#dots div.active {
	opacity: 1.0;
}