/*

	App Shopper
	Created: 03/2013
	Version: 1.0
	By: myTheme at ThemeForest.net
	http://themeforest.net/user/myTheme


	01.....LAYOUT
	02.....INTRO
	03.....CONTENT
	04.....FORMS
	05.....MISC
	06.....MEDIA QUERIES


/*-----------------------------------------------------------------------------------*/
/*	LAYOUT
/*-----------------------------------------------------------------------------------*/

body {font-size:14px;line-height:20px;color:#444;}
* {margin:0;padding:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
img, video, canvas, object, fieldset {max-width:100%;height:auto;border:0;}
:focus {outline:0;}
form:after, header:after, .inner:after, #wrapper:after, #navigation:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

.inner, footer, #wrapper {width:1020px;margin:0 auto;}
#wrapper {background:#fff url(../img/wrapper.jpg) 66.3% 0 repeat-y;padding:50px 50px 30px 50px;}
#main {float:left;width:59.782%;}
aside {float:right;width:28.261%;font-size:13px;color:#888;}


/*-----------------------------------------------------------------------------------*/
/*	INTRO
/*-----------------------------------------------------------------------------------*/

header .inner {min-height:460px;padding:40px 0 60px 0;position:relative;}
.header-content {float:right;width:540px;}

/* logo */
#logo {display:block;margin:20px 0 5px 0;}

/* intro header and text */
header h1 {font-size:48px;line-height:1.1;margin-bottom:25px;color:#333;padding-top:25px;background:url(../img/h1.png) no-repeat;padding-left:70px;margin-left:-70px;}
header p {
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 40px;
	color: #666;
}

/* buy button  */
.buy {display:inline-block;max-width:100%;}

/* slider */
#slider-outer {float:left;width:380px;height:460px;margin-left:55px;}
.slider {position:relative;list-style:none;overflow:hidden;width:100%;padding:0;margin:0;}
.slider li {-webkit-backface-visibility:hidden;position:absolute;display:none;width:100%;left:0;top:0;}
.slider li:first-child {position:relative;display:block;float:left;}
.slider img {display:block;height:auto;float:left;width:100%;border:0;}

/* slider navigation */
.next, .prev {position:absolute;left:40px;bottom:0;display:block;width:30px;height:30px;text-indent:-9999px;background:url(../img/sprite.png) no-repeat;z-index:9999;}
.next {background-position:-370px 0;}
.prev {background-position:-340px 0;left:0;}
.next:hover {background-position:-370px -30px;}
.prev:hover {background-position:-340px -30px;}

/* slider pages */
.slider_tabs {position:absolute;left:80px;bottom:-25px;text-align:center;z-index:9999;}
.slider_tabs li {display:inline;list-style:none;text-indent:-9999px;}
.slider_tabs a {display:inline-block;line-height:30px;width:10px;height:10px;margin:0 3px;background-color:#222;background-color:rgba(255,255,255,0.05);}
.slider_tabs a:hover {background-color:rgba(255,255,255,0.1);}
.slider_tabs li.slider_here a {background-color:#666;background-color:rgba(255,255,255,0.2);}

/* features */
#features {background:url(../img/gradient.png) repeat-x;color:#eee;border-top:1px solid rgba(255,255,255,0.15);font-size:13px;}
#features .inner {background:url(../img/features.png) 50% 100% no-repeat;padding:30px 0 10px 0;}
#features h3 {font-weight:700;font-size:16px;color:#333;margin-bottom:5px;}
#features h3 img {vertical-align:middle;margin-right:2px;}
#features p {
	margin-bottom: 10px;
	color: #666;
}


/*-----------------------------------------------------------------------------------*/
/*	CONTENT
/*-----------------------------------------------------------------------------------*/

/* tabs */
.ui-tabs {position:relative;}

/* navigation */
#navigation {margin:-40px 0 40px -50px;padding:40px 0 0px 50px;background:url(../img/navigation.jpg) 100% 100% no-repeat;}
#navigation li {float:left;display:inline;margin:0 8px 0px 0;font-size:13px;}
#navigation a {padding:0 10px;line-height:36px;height:36px;display:inline-block;font-weight:normal;color:#666;background-color:#eee;border:1px solid #e8e8e8;border-width:1px 1px 0 1px;}
#navigation a:hover {text-decoration:none;background-color:#f8f8f8;}
#navigation li.ui-tabs-active a {background-color:#fefefe;color:#999;border-color:#fff;box-shadow:0px -1px 1px rgba(0,0,0,0.1);}

/* navigation1 */
#navigation1 {margin:-40px 0 40px -50px;padding:40px 0 0px 50px;background:url(../img/navigation.jpg) 100% 100% no-repeat;}
#navigation1 li {float:left;display:inline;margin:0 8px 0px 0;font-size:13px;}
#navigation1 a {padding:0 10px;line-height:36px;height:36px;display:inline-block;font-weight:normal;color:#666;background-color:#eee;border:1px solid #e8e8e8;border-width:1px 1px 0 1px;}
#navigation1 a:hover {text-decoration:none;background-color:#f8f8f8;}
#navigation1 li.ui-tabs-active a {background-color:#fefefe;color:#999;border-color:#fff;box-shadow:0px -1px 1px rgba(0,0,0,0.1);}

/* typography  */
h1, h2, h3, h4 {font-weight:700;color:#222;}
h2 {font-size:26px;line-height:1.1;font-weight:700;margin:0 0 10px 0;clear:both;}
h3 {font-size:20px;line-height:1.2;font-weight:normal;margin:0 0 10px;}
h3 small {font-size:16px;color:#888;font-weight:normal;margin-left:4px;}
aside h3 {font-size:16px;background:url(../img/h3.png) 0 100% repeat-x;}
aside h3 span {background:#f2f2f2;padding-right:6px;}
.ingress {font-size:16px;font-weight:bold;color:#888;line-height:22px;}

/* default margins */
p, ul, ol, table, pre, input, textarea, button {
	margin-bottom: 20px;
	font-size: 12;
	color: #333;
}

/* images */
img {border:0;max-width:100%;}
p img {float:left;margin:0 20px 20px 0;}
p img.right {float:right;margin:0 0 20px 20px;}

/* lists */
ul {list-style:none;}
#main ul {list-style:square;}

/* links */
a {font-weight:bold;text-decoration:none;}
a:hover {text-decoration:underline;}

/* quotes */
blockquote {color:#999;}
blockquote p {padding:10px 0;border:3px double #ddd;border-width:3px 0;font-style:italic;}
blockquote p:before {content:'\201C'}
blockquote p:after {content:'\201D'}
blockquote cite {color:#999;font-size:13px;margin-top:-10px;display:block;text-align:right;}

/* tables */
table {border-collapse:separate;border-spacing:3px;width:100%;}
th {text-align:right;}
td, th {padding:4px 8px;background:#f8f8f8;}
tr:nth-child(2n+1) td, tr:nth-child(2n+1) th {background:#f2f2f2;}
table span {color:#999;font-size:12px;font-style:italic;}

/* code */
pre {background:#eee;padding:10px;}
code {white-space:pre-wrap;font-weight:bold;color:#666;}

/* alerts  */
.alert {text-align:center;padding:5px 10px;background-color:#eee;border:1px solid #ddd;border-width:1px 1px 2px 1px;clear:both;color:#333;}
.alert.red {background-color:#FFCFD1;border-color:#EDBBBD;}
.alert.yellow {background-color:#FFE59F;border-color:#EFD592;}
.alert.green {background-color:#CFFFBF;border-color:#C0EFB1;}

/* buttons  */
.button {background:#ccc;padding:0 12px;color:#fff;color:rgba(255,255,255,0.85);font-weight:bold;margin:0 15px 21px 0;display:inline-block;border-bottom:2px solid rgba(0,0,0,0.2);line-height:30px;text-decoration:none;}
.button:hover {text-decoration:none;}
.button.black {background-color:#444;}
.button.gray {background-color:#999;}
.button.white {background-color:#eee;color:#333;}
.button.green {background-color:#89B64C;}
.button.orange {background-color:#D63C00;}
.button.red {background-color:#bd362f;}
.button.blue {background-color:#0B98E9;}
.button.purple {background-color:#8475A8;}
.button.pink {background-color:#E53B8A;}

/* version history  */
.updates li {list-style:none;background:url(../img/line.png) repeat-x;}
.updates li:first-child {background:none;}
.updates li span {font-size:11px;margin:0 6px 0px 0;text-align:center;display:inline-block;color:#666;font-family:'Courier New',Courier,monospace;text-transform:uppercase;padding:0 4px;}
.updates li span.new {background:#CFFFBF;}
.updates li span.fix {background:#FFE59F;}

/* columns */
.one_half, .one_third, .two_thirds, .one_fourth, .three_fourths {float:left;display:inline;width:48%;margin:0 4% 0px 0;}
.one_third {width:30.666666%;}
.two_thirds {width:65.333333%;}
.one_fourth {width:22%;}
.three_fourths {width:74%;}
.last {margin-right:0;}
.clear {clear:both;}

/* social links */
.social {margin:0;}
.social li {display:inline;}
.social a {display:inline-block;margin:0 5px 10px 5px;text-indent:-9999px;width:26px;height:26px;padding:0;background-image:url(../img/sprite.png);}
.social a:hover {opacity:0.7;}
.social a.dribbble {background-position:0 -30px;}
.social a.rss {background-position:-26px -30px;}
.social a.facebook {background-position:-52px -30px;}
.social a.twitter {background-position:-78px -30px;}
.social a.flickr {background-position:-104px -30px;}
.social a.instagram {background-position:-130px -30px;}
.social a.google {background-position:-156px -30px;}
.social a.youtube {background-position:-182px -30px;}
.social a.vimeo {background-position:-208px -30px;}
.social a.pinterest {background-position:-234px -30px;}

/* social links in the sidebar */
aside .social a {margin:0 8px 6px -2px;}
aside .social a.dribbble {background-position:0 0;}
aside .social a.rss {background-position:-26px 0;}
aside .social a.facebook {background-position:-52px 0;}
aside .social a.twitter {background-position:-78px 0;}
aside .social a.flickr {background-position:-104px 0;}
aside .social a.instagram {background-position:-130px 0;}
aside .social a.google {background-position:-156px 0;}
aside .social a.youtube {background-position:-182px 0;}
aside .social a.vimeo {background-position:-208px 0;}
aside .social a.pinterest {background-position:-234px 0;}

/* footer  */
footer {padding:40px 0 100px;text-align:center;font-size:11px;color:#666;color:rgba(255,255,255,0.3);}


/*-----------------------------------------------------------------------------------*/
/*	FORMS
/*-----------------------------------------------------------------------------------*/

label {clear:both;display:block;padding-bottom:10px;}
label span {color:#999;}

input, textarea, button {font-size:100%;font-family:inherit;}
input, textarea {background:#f6f6f6;border:0;padding:10px;display:block;width:100%;;}
textarea {overflow:auto;}
input:focus, textarea:focus {background:#f0f0f0;}
em.error {height:0;width:0;position:relative;top:-9999px;display:none;text-indent:-9999px;float:left;}
input.error, textarea.error {background:#FFEDED !important;}

/* buttons  */
button {clear:both;cursor:pointer;width:auto;overflow:visible;border-style:solid;border-color:#fff #ccc #bbb;border-width:2px 1px 2px 1px;background:#ddd url(../img/button.png) repeat-x;color:#333;font-weight:bold;padding:0 10px;text-decoration:none;line-height:30px}
button:hover {background-color:#d4d4d4;}

/* newsletter */
.form-newsletter input {float:left;background-color:#ddd;color:#666;margin:0;width:77%;}
#features .form-newsletter input {background:url(../img/transparent-black-030.png);background:rgba(0,0,0,0.3);color:#888;}
::-webkit-input-placeholder {color:#666;opacity:1;}
::-moz-placeholder {color:#666;opacity:1;}
.form-newsletter button {clear:none;float:right;padding:0 6px;width:20%;}
#features .form-newsletter button {border:0;padding:2px 6px;color:#aaa;color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.1);background-image:none;}
#features .form-newsletter button:hover {background-color:rgba(255,255,255,0.15);}


/*-----------------------------------------------------------------------------------*/
/*	MISC
/*-----------------------------------------------------------------------------------*/

/* tipsy tooltips  */
.tipsy {padding:10px;font-size:16px;font-weight:700;background:url(../img/tipsy.png) no-repeat;}
.tipsy-inner {padding:10px 12px 12px 12px;background:#eee url(../img/tipsy-inner.png) 50% 100% no-repeat;color:#333;width:260px;text-align:center;line-height:22px;font-weight:bold;}
.tipsy-inner span {font-size:13px;line-height:18px;display:block;color:#666;font-weight:normal;margin-top:3px;}
.tipsy-south {background-position:50% 100%;}

/* border-radius */
#wrapper, .buy, .tipsy-inner {border-radius:8px;}
input, textarea, button, .button, .updates li span, .alert, .next, .prev, .slider_tabs a {border-radius:4px;}
.next, .prev, #navigation a {border-radius:4px 4px 0 0;}

/* box-shadow */
#wrapper {-webkit-box-shadow:0 0 6px rgba(0,0,0,0.4);box-shadow:0 0 6px rgba(0,0,0,0.4);}
.buy {-webkit-box-shadow:0 0 2px rgba(0,0,0,0.4), 0 0 0 5px rgba(255,255,255,0.05);box-shadow:0 0 2px rgba(0,0,0,0.4), 0 0 0 5px rgba(255,255,255,0.05);}
.tipsy-inner {-webkit-box-shadow:0 -2px 2px rgba(0,0,0,0.4), 0 0 3px #fff inset;box-shadow:0 -2px 2px rgba(0,0,0,0.4), 0 0 3px #fff inset;}
input, textarea {-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1) inset, 0 1px 1px rgba(255,255,255,0.8);box-shadow:1px 1px 2px rgba(0,0,0,0.1) inset, 0 1px 1px rgba(255,255,255,0.8);}
#features input {-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.6) inset, 0 1px 0px rgba(255,255,255,0.05);box-shadow:1px 1px 2px rgba(0,0,0,0.6) inset, 0 1px 0px rgba(255,255,255,0.05);}
#features button {-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.1) inset;box-shadow:0 1px 1px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.1) inset;}
#features {-webkit-box-shadow:0 -2px 2px rgba(0,0,0,0.4);box-shadow:0 -2px 2px rgba(0,0,0,0.4);}
.button {-webkit-box-shadow:0 2px 2px rgba(255,255,255,0.2) inset;box-shadow:0 2px 2px rgba(255,255,255,0.2) inset;}
#navigation a {-webkit-box-shadow:0 -2px 2px rgba(0,0,0,0.1) inset, 0 0 5px rgba(255,255,255,0.6) inset;box-shadow:0 -2px 2px rgba(0,0,0,0.1) inset, 0 0 5px rgba(255,255,255,0.6) inset;}
.updates li span {-webkit-box-shadow:0 0 3px rgba(0,0,0,0.1) inset;box-shadow:0 0 3px rgba(0,0,0,0.1) inset;}

/* text-shadow */
body {text-shadow:0 1px 1px rgba(0,0,0,0.4);}
#wrapper {text-shadow:none;}
.header-inner {text-shadow:0 2px 1px rgba(0,0,0,0.8);}
.button, #navigation a {text-shadow:0 1px 1px rgba(0,0,0,0.4);}
#navigation a {text-shadow:0 1px 1px rgba(255,255,255,0.9);}
button, .button.white, .tipsy {text-shadow:0 1px 1px rgba(255,255,255,0.9);}
#features button {text-shadow:0 1px 1px rgba(0,0,0,0.4);}

/* transition */
a, input, textarea, button {-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;}

/*-----------------------------------------------------------------------------------*/
/*	MEDIA QUERIES
/*-----------------------------------------------------------------------------------*/

/* ELEMENTS > ACCORDION & TOGGLE */
div.toggle,
div.accordion {
	border-bottom: 1px solid #e4e4e4;
}

div.toggle > a.switch,
div.accordion > a.switch {
	border-top: 1px solid #e4e4e4;
	color: #666;
	display: block;
	font-size: 14px;
	line-height: 21px;
	margin-bottom: 10px;
	padding-top: 10px;
}

div.toggle > a.switch:first-child,
div.accordion > a.switch:first-child {
	border: none;
	padding: 0;
}

div.toggle > a.switch > div,
div.accordion > a.switch > div {
	background-color: #555;
	background-image: url(../images/plus.png);
	background-size: 7px 7px;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 2px;
	box-shadow: inset 0 -1px 0px rgba(0, 0, 0, 0.1);
	float: left;
	margin-right: 10px;
	height: 21px;
	width: 21px;
	color: #F00;
}

div.toggle > a.switch.opened,
div.accordion > a.switch.opened {
	color: #666;
}

div.toggle > a.switch.opened > div,
div.accordion > a.switch.opened > div {
	background-color: #666;
}

@media screen and (max-width: 1060px) {

	/* layout */
	.inner, #wrapper, footer {width:94%;}
	.header-content {width:65%;float:none;text-align:center;margin:0 auto;}
	#features .inner {background:none;}
	aside h3 {background-image:none;}
	aside h3 span {background-color:transparent;}
	#logo {margin:0 auto;}
	header h1 {
	background-position: 50% 0;
	padding-left: 0;
	margin-left: 0;
	color: #333;
}
	
	/* slider */
	#slider-outer {width:380px;float:none;clear:both;padding-top:40px;height:auto;margin:0 auto;}
	
	/* navigation */
	#navigation {margin:-40px -35px 30px -50px;padding:20px 50px 0 30px;}
	#navigation li {font-size:12px;margin-right:4px;}
	#navigation a {padding:0 5px;}

}

@media screen and (max-width: 750px) {

	/* layout */
	body {font-size:13px;}
	.inner, footer, .header-content, #wrapper {width:460px;}
	#wrapper {background-position:0 0;padding:30px;}
	.header-inner {padding:20px 0 40px 0px;}
	#main, aside {width:100%;float:none;clear:both;padding-bottom:20px;}
	aside {width:auto;background:#eee;margin:0 -30px -30px -30px;padding:30px 30px 40px 30px;border-radius:0 0 10px 10px;}

	/* typography */
	header h1 {font-size:36px;}
	
	/* navigation */
	#navigation {margin:-20px -30px 30px -30px;padding:0 30px 5px 30px;background-position:50% 100%;}
	#navigation li {margin-right:5px;float:none;}
	#navigation a {padding:0;-moz-box-shadow:none;box-shadow:none;background:none;border:0;}
	#navigation a:hover {background:none;}
	#navigation li.ui-tabs-active a {background:none;-moz-box-shadow:none;box-shadow:none;}
	
	/* columns */
	.one_half, .one_third, .one_fourth, .two_thirds {clear:both;width:100%;margin-right:0;margin-bottom:0;}
	#features .one_fourth {margin-bottom:1em;}

}

@media screen and (max-width: 500px) {

	/* layout */
	.inner, footer, .header-content {width:94%;}
	header .inner {width:100%;padding-top:10px;}
	#wrapper {width:100%;padding:15px;border-radius:0;}
	.header-content {padding-top:0;}
	aside {margin:0 -15px -25px -15px;padding:20px 15px 30px 15px;border-radius:0;}

	/* navigation */
	#navigation {margin:-15px -15px 30px -15px;padding:10px 10px;}
	#navigation a {line-height:1em;height:1em;}

	/* slider */
	#slider-outer {width:78.6%;}
	.next {left:50px;}
	.prev {left:10px;}
	
}

@media screen and (max-width: 380px) {

	/* slider */
	#slider-outer {width:100%;}
	
}
.inner .header-content p strong {
	color: #000;
}