/*==================================================
Item: That's It - Landing page (Html5+CSS3)
Author: http://themeforest.net/user/navigator
Only At: ThemeForest.net


	* * * CONTENTS * * *

	0. HTML5 RESET
	
	1. BACKGROUND STYLES
	
	2. GENERIC STYLES
	
	3. HEADER STYLES
		3.0 Top Header
		3.1 Main Header
			3.1.0 Panel
			3.1.1 Header button styles
		3.2 Bottom Header
	
	4. CONTENT STYLES
		4.0 Features, Ribbon
		4.1 Form
		4.2 Screenshots
		4.3 Green List, Testimonials
	
	5. FOOTER STYLES
		5.0 Top Footer
		5.1 Bottom Footer
	
	6. BUTTONS

==================================================*/

/*------------------------
    0. HTML5 RESET
------------------------*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, h7, h8, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 10px;
	vertical-align: baseline;
	background: transparent;
	text-align: right;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,hgroup,
header,menu,nav,section,footer { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*------------------------
    1. BACKGROUND STYLES
------------------------*/

html{
	background:url("../images/main_bg.png") repeat;
}

body{
	background:url("../images/logo_bg.png") repeat-x;
	color:#606060;
	line-height:18px;
	font-size:12px;
	font-family:helvetica,arial,sans-serif;
}

#wrap{
	margin:0 auto;
	width:928px;
}

/*------------------------
    2. GENERIC STYLES
------------------------*/

.col_wide{ float:left; width:500px; }
.col_narrow{ float:left; width:315px; }

.last{
	margin-left: 35px;
}

.container{
	margin:20px 35px;
	overflow:hidden;
}

h1{
	margin:25px 0px;
	color:#f4f2f0;
	line-height:34px;
	font-size:28px;
	font-family:helvetica,arial,sans-serif;
}

h2{
	margin:15px 0px 5px 0px;
	color:#606060;
	line-height:26px;
	font-size:18px;
	font-family:helvetica,arial,sans-serif;
}

h7{
	margin:25px 0px;
	color:#606060;
	line-height:20px;
	font-size:15px;
	font-family:helvetica,arial,sans-serif;
}

h8{
	margin:25px 0px;
	color:#f4f2f0;
	line-height:34px;
	font-size:28px;
	font-family:helvetica,arial,sans-serif;
}



a{ color:#2cbbcb; text-decoration:none; }
a:hover{ color:#f36f36; }

p{ margin-bottom:10px; }

ul{ list-style:none; }

ul li{ margin-bottom:7px; }

.left{ float:left; }
.right{ float:right; }

/*------------------------
    3. HEADER STYLES
------------------------*/

/* 3.0 Top Header */

#top_header{
	padding:15px 4px;
	color:#0000000;
	overflow:hidden;

}

#logo{ float:left; width:530px; }
#logo small{ display:block; margin-top:10px; }

#logo h1{
	margin:0px; padding:0px;
	background:url(../images/logo-stela2.png) no-repeat;
	text-indent:-9999px;
	width:821px;
	height:172px;
}


#social_networks{ float:right; width:350px; }

#social_networks span{
	float:right;
	color:#949290;
	font-size:14px;
	font-weight:bold;
	text-shadow:0px 1px 0px rgba(255,255,255,0.8);
}

#social_networks ul.social_icons{ float:right; margin-top:10px;}
#social_networks ul.social_icons li{ float:left; margin-left:5px; }

#social_networks ul.social_icons li a img{
	-ms-filter:"progid:DXImageTransform.Microsoft. »
	Alpha(Opacity=100)";
	filter:alpha(opacity = 100);
	opacity:1;
	-webkit-transition:opacity 0.2s ease-in-out;
	-moz-transition:opacity 0.2s ease-in-out;
	-o-transition:opacity 0.2s ease-in-out;
	transition:opacity 0.2s ease-in-out;
}

#social_networks ul.social_icons li a:hover img{
	-ms-filter:"progid:DXImageTransform.Microsoft. »
	Alpha(Opacity=70)";
	filter:alpha(opacity = 70);
	opacity:0.7;
}

/* 3.1 Main Header */

#main_header{
	position:relative;
	margin:0px 4px;
	padding:0px 35px;
	background:url("../images/header_bg.png") repeat;
	border-top:10px solid #3e3d3d;
	border-bottom:1px solid #000;
	height:289px;
	overflow:hidden;
}

/* 3.1.0 Panel */

ul#panel{
	width:870px;
	height:289px;
}

ul#panel li.slide .header_features{
	position:absolute;
	top:300px;
	left:35px;
	width:500px;
	height:210px;
	color:#a6a4a2;
	overflow:hidden;
}

ul#panel li.slide .header_features p{ padding-bottom:5px;}

ul#panel li.slide ul.header_buttons{
	position:absolute;
	top:215px;
	left:-465px;
}

ul#panel li.slide ul.header_buttons li{
	float:left;
	margin-right:15px;
}

ul#panel li.slide .header_image{
	position:absolute;
	bottom:0px;
	right:-365px;
	max-width:315px;
}

ul.orange_list{ float:left; width:230px; }

ul.orange_list li{
	padding-left:20px;
	background:url("../images/check_mark_orange.png") no-repeat 0px 3px;
}

/* 3.1.1 Header button styles */

a.buy_now_android, a.buy_now_iphone{
	margin-top:4px;
	display:block;
	width:82px;
	height:24px;
	background:url("../images/buy_now_android.png") no-repeat 0px 0px;
}

a.buy_now_android:hover, .buy_now_android:focus{
	background:url("../images/buy_now_android.png") no-repeat 0px -24px;
}

a.buy_now_iphone{
	width:79px;
	height:28px;
	background:url("../images/buy_now_iphone.png") no-repeat 0px 0px;
}

a.buy_now_iphone:hover, .buy_now_iphone:focus{
	background:url("../images/buy_now_iphone.png") no-repeat 0px -28px;
}

a.try_it_free{
	margin-top:4px;
	display:block;
	width:43px;
	height:24px;
	background:url("../images/try_it_free.png") no-repeat 0px 0px;
}

a.try_it_free:hover, a.try_it_free:focus{
	background:url("../images/try_it_free.png") no-repeat 0px -24px;
}

.move_up{ position:relative; }

a.header_btn{
	margin-top:4px;
	padding:9px 14px;
	display:block;
	height:12px;
	line-height:13px;
	font-weight:bold;
	text-shadow:0px 1px 0px rgba(255,255,255,0.5);
	-moz-border-radius:4px;
	border-radius:4px;
	box-shadow:0px 1px 1px rgba(0,0,0,0.2)
}

a.yellow_btn{
	background:url("../images/btn_yellow_slider.png") repeat-x 0px 0px;
	color:#886622;
}

a.yellow_btn:hover, a.yellow_btn:focus{
	background:url("../images/btn_yellow_slider.png") repeat-x 0px -30px;
}

a.green_btn{
	background:url("../images/btn_green_slider.png") repeat-x 0px 0px;
	color:#417733;
}

a.green_btn:hover, a.green_btn:focus{
	background:url("../images/btn_green_slider.png") repeat-x 0px -30px;
}

ul#slider_buttons{
	position:absolute;
	right:415px;
	bottom:9px;
}

ul#slider_buttons li{
	float:left;
	margin-left:10px;
}

ul#slider_buttons li a{
	display:block;
	background:url("../images/slider_button.png") no-repeat top left;
	width:14px;
	height:14px;
}

ul#slider_buttons li a:hover, ul#slider_buttons li a.selected{
	background:url("../images/slider_button.png") no-repeat bottom left;
}

/* 3.2 Bottom Header */

#bottom_header{
	margin:0px 4px;
	padding:25px 35px;
	background-color:#333030;
	border-top:1px solid rgba(255,255,255,0.1);
}

.slogan{
	margin:0px; padding:0px;
	color:#b9ab7a;
	font-size:20px;
	font-family:helvetica,arial,sans-serif;
	text-transform:uppercase;
	text-align:center;
}

.light_text{ color:#f3eedb; }

/*------------------------
    4. CONTENT STYLES
------------------------*/

/* 4.0 Features, Ribbon */

section{
	padding:10px 4px;
	background:url("../images/content_bg.png") repeat-y;
	overflow:hidden;
}

ul.features{ overflow:hidden; }

ul.features li{
	float: left;
	width: 235px;
}

ul.features li.last{ margin-left:30px; }

ul.features li p{ margin:0px; }

div.colored_box, form{
	background-color:#eeede8;
	padding:0px 20px 10px 20px;
	-moz-border-radius:4px;
	border-radius:4px;
	overflow:hidden;
}

div.colored_box ul li{ margin-bottom:5px; }

div.colored_box h2, form h2{ color:#ff8833; }

div.colored_box p{ color:#868380; }

.ribbon{
	padding:20px 35px;
	margin:30px 0px;
	background:url("../images/ribbon_bg.jpg") repeat;
	border-top:10px solid #eeede8;
	border-bottom:10px solid #eeede8;
}

.ribbon .container{
	margin: 0px;
	text-align: left;
}

.ribbon p{
	margin: 0px;
	padding: 0px;
	width: 620px;
	line-height: 24px;
	font-size: 18px;
	font-family: georgia,serif;
	text-shadow: 0px 1px 0px #f2f1f0;
	text-align: left;
}

.avatar_tip{
    display:none;
	position:absolute;
    padding:5px;
	background:#555;
	color:#bfbfbb;
	line-height:0px;
	z-index:100;
}

/* 4.1 Form */

.sliding_height{ min-height:20px; }

form{ padding:0px 20px 5px 20px;}

fieldset{ margin:15px 0px; position:relative; }

input[type="text"]{
	width:259px;
	padding:7px 8px;
	background-color:inherit;
	color:#646260;
	text-shadow:0px 1px 0px rgba(255,255,255,0.7);
	outline:none;
	border:none;
	border-top:1px solid rgba(0,0,0,0.1);
	border-bottom:1px solid rgba(255,255,255,0.8);
	-moz-border-radius:4px;
	border-radius:4px;
}

span.placeholder{
	position:absolute;
	top:10px;
	left:10px;
	color:#999799;
	line-height:13px;
	font-size:13px;
	text-shadow:0px 1px 0px rgba(255,255,255,0.5);
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	user-select:none;
}

input[type="submit"]{
	padding:0px 15px;
	height:30px;
	color:#fffefd;
	font-size:12px;
	font-family:helvetica,arial,sans-serif;
	font-weight:bold;
	text-decoration:none;
	text-transform:uppercase;
	text-shadow:0px -1px 0px rgba(0,0,0,0.3);
	background:url("../images/btn_blue_submit.jpg") repeat-x;
	border:none;
	-moz-border-radius:4px;
	border-radius:4px;
	cursor:pointer;
}

input[type="submit"]:hover, input[type="submit"]:focus{
	background:url("../images/btn_blue_submit.jpg") repeat-x 0px -30px;
}

.error{
	padding:10px;
	background:url("../images/exclamation_mark.png") no-repeat;
	position:absolute;
	top:33.33%;
	right:0%;
}

#confirmation h3{
	margin:15px 0px;
	padding-left:20px;
	background:url("../images/check_mark_green.png") no-repeat 0px 2px;
}

/* 4.2 Screenshots */

.screenshots{ margin:0px; padding:0px; }

.screenshots h2{ margin-left:35px; }

.carousel{
	position:relative;
	margin:0px;
	padding:0px 30px;
}

.carousel_btn_left, .carousel_btn_right{
	display:none;
	position:absolute;
	background:url("../images/carousel_left_right.png") no-repeat 0px 0px;
	width:17px;
	height:17px;
	top:47px;
	left:9px;
}

.carousel_btn_right{
	background:url("../images/carousel_left_right.png") no-repeat 0px -17px;
	left:895px;
}

.carousel_btn_left:active, .carousel_btn_right:active{ margin-top:1px; }

.carousel_mask{
	position:relative;
	width:860px;
	overflow:hidden !important;
}

.carousel ul{
	position:relative;
	margin:0px;
	padding:5px;
}

.carousel ul li{
	position:relative;
	float:left;
	margin:0px 20px 5px 0px;
	list-style:none;
}

.carousel ul li a{
	display:block;
	padding:4px;
	line-height:0px;
	border:1px solid #c0c1c2;
	box-shadow:0px 0px 5px 0px rgba(0,0,0,0.1);
}

.carousel ul li a:hover{
	border:1px solid #FFA927;
	box-shadow:0px 0px 5px 0px rgba(243,134,48,0.8);
}

.carousel span{
	display:none;
	position:absolute;
	right:10px;
	bottom:10px;
	padding:3px 5px;
	background:#f36f36;
	border-radius:2px;
	color:#fff;
	line-height:9px;
	font-size:9px;
	text-transform:uppercase;
}

.carousel ul li a:hover span{ display:block; }

.carousel ul li img{
	width:144px;
	height:90px;
}

/* 4.3 Green List, Testimonials */

ul.green_list li{
	padding-left:20px;
	background:url("../images/check_mark_green.png") no-repeat 0px 2px;
}

.answer{
	display:block;
	color:#888;
}

div.testimonials{
	margin:10px 0px 20px 0px;
	text-align:center;
}

blockquote{
	margin:0px auto;
	padding:7px 30px;
	width:670px;
	background:url("../images/quote.png") no-repeat;
	line-height:36px;
	font-size:24px;
	font-family:georgia, serif;
}

.author{
	color:#bfbebb;
	font-size:14px;
	font-family:helvetica,arial,sans-serif;
	font-weight:bold;
}

.author .company{
	font-weight:normal;
	font-style:italic;
}

/*------------------------
    5. FOOTER STYLES
------------------------*/

footer{ position:relative; margin:0px 4px; }

/* 5.0 Top Footer */

footer #top_footer{
	padding:20px 35px;
	border-top:10px solid #3e3d3d;
	background:url("../images/header_bg.png") repeat;
	overflow:hidden;
}

footer #top_footer p{ padding-top:15px; }

.ribbon_small{
	position:absolute;
	top:-2px;
	left:-2px;
	background:url("../images/layout2_ribbon.png") no-repeat;
	width:86px;
	height:86px;
}

/* 5.1 Bottom Footer */

footer #bottom_footer{ padding:10px 0px 90px 0px; }

.tweetsFeed{
	float:left;
	color:#949290;
	font-size:11px;
	width:360px;
}

.tweetsFeed .jta-tweet-list-item{ margin:0px; overflow:hidden; }
.tweetsFeed .jta-tweet-attributes{ margin-left:5px; }
.tweetsFeed .jta-tweet-retweeter, .tweetsFeed .jta-clear{ display:none; }

footer #bottom_footer .bottom_text{
	float:right;
	color:#949290;
}

footer #bottom_footer .html5logo{
	padding:5px 10px;
	background:url("../images/html5_badge.png") no-repeat 0px 4px;
}

/*------------------------
    6. BUTTONS
------------------------*/

.light_bg, .dark_bg{
	padding:5px;
	-moz-border-radius:7px;
	border-radius:7px;
}

.light_bg{
	background:#eeede8;
	border:1px solid #cfcaca;
}

.dark_bg{
	background:#303030;
	border:1px solid #222;
}

.button{
	display:block;
	padding:9px 20px 0px 20px;
	height:27px;
	color:#fffefd;
	font-size:14px;
	font-family:helvetica,arial,sans-serif;
	font-weight:bold;
	text-decoration:none;
	text-transform:uppercase;
	text-shadow:0px -1px 0px rgba(0,0,0,0.3);
	-moz-border-radius:4px;
	border-radius:4px;
}

.button:hover{ color:#fffefd; }

.blue{
	background:url("../images/btn_blue.jpg") repeat-x;
	border:1px solid #2baabb;
}

.blue:hover, .blue:focus{ background:url("../images/btn_blue.jpg") repeat-x 0px -36px; }

.green{
	background:url("../images/btn_green.jpg") repeat-x;
	border:1px solid #72a331;
}

.green:hover, .green:focus{
	background:url("../images/btn_green.jpg") repeat-x 0px -36px;
}

.orange{
	background:url("../images/btn_orange.jpg") repeat-x;
	border:1px solid #f28e2a;
}

.orange:hover, .orange:focus{
	background:url("../images/btn_orange.jpg") repeat-x 0px -36px;
}

.dark_bg .blue, .dark_bg .green, .dark_bg .orange{ border-color:#272727; }