@import url('custom.css');

/*

	App Showcase
	Created: 12/2012
	Version: 2.0
	By: myTheme at ThemeForest.net
	http://themeforest.net/user/myTheme


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



01. LAYOUT  -----------------------------*/

body {padding-bottom:10px;}
body, input, textarea, button {font:13px/20px Arial, Helvetica, sans-serif;}
* {margin:0;padding:0;}
:focus {outline:0;}
#wrapper:after, #intro-inner:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

#intro {background-position:50% 0;border-bottom:1px solid rgba(255,255,255,0.05);}
#intro-inner {width:640px;padding:200px 0 0 0;margin:0 auto;position:relative;min-height:350px;}
#wrapper {width:940px;margin:100px auto 0 auto;position:relative;}
#content {width:560px;float:left;clear:both;padding:40px 40px 20px 40px;background-image:url(../img/bg/content.png);}
#sidebar {width:260px;float:right;}


/*
02. INTRO  -------------------------------------*/

/* logo and intro paragraph */
h1#logo {line-height:50px;padding-left:10px;font-size:36px;background:url(../img/bg/logo.png) 0 50% no-repeat;margin-bottom:20px;color:#fff;}
#intro-inner p {font-size:15px;font-weight:bold;line-height:22px;width:580px;}

/* features list */
#features {width:640px;padding:10px 0 0 20px;margin-left:-20px;background:url(../img/bg/hr.png) no-repeat;}
#features li {float:left;line-height:18px;width:300px;margin:10px 20px 5px 0;}
#features h2 {font-size:14px;font-weight:bold;margin:0 0 10px 0;}
#features [class*="icon-"] {font-size:16px;}

/* phone */
#phone {position:absolute;left:-10px;top:40px;width:300px;height:460px;}
#phone a {position:absolute;left:120px;top:200px;width:60px;height:60px;background:url(../img/bg/play.png);text-indent:-9999px;}
#phone a:hover {opacity:0.7;}

/* iphone */
#iphone #phone {background:url(../img/bg/iphone.png);}
#iphone #phone img {position:absolute;left:58px;top:68px;width:183px;height:325px;}

/* android */
#android #phone {background:url(../img/bg/android.png);}
#android #phone img {position:absolute;left:10px;top:42px;width:200px;height:355px;}

/* windows */
#windows #phone {background:url(../img/bg/windows.png);}
#windows #phone img {position:absolute;left:48px;top:39px;width:205px;height:340px;}

/* qr code button */
.qr {position:absolute;right:0;top:0;background:url(../img/bg/transparent-white-004.png);background:rgba(255,255,255,0.04);padding:4px 6px;color:#ddd;font-size:12px;}
.qr span {background:url(../img/bg/icon-qr.png) 0 50% no-repeat;padding-left:20px;}
.qr:hover {text-decoration:none;background-color:rgba(255,255,255,0.1);color:#fff;}


/*
03. CONTENT  -------------------------------------*/

/* tabs */
.tabs-hide {display:none;}
.tabs-container {float:left;clear:both;background-image:url(../img/bg/content.png);}
.tabs-loading em {background:url(../img/bg/loading.gif) no-repeat 0 50%;}

/* main navigation */
#navigation {position:absolute;left:30px;top:-50px;}
#navigation li {float:left;position:relative;display:inline;margin-right:10px;}
#navigation li a {padding:0 10px;line-height:50px;height:50px;display:block;font-weight:normal;color:#ddd;color:rgba(255,255,255,0.8);}
#navigation li a:hover {text-decoration:none;color:#fff;}
#navigation li.tabs-selected a {color:#999;color:rgba(255,255,255,0.5);background:url(../img/bg/tabs-selected.png) no-repeat 50% 100%;}

/* typography  */
h1, h2, h3, h4, .tipsy {font-family:Arial, Arial, Helvetica, sans-serif;}
h2 {font-size:20px;font-weight:normal;margin-bottom:5px;}
h3 {font-size:17px;margin:30px 0 10px;}
h3 small {font-size:17px;color:#999;margin-left:4px;}

p, ul, ol, table, form, pre {margin-bottom:20px;}
img {border:0;}
p img {float:left;margin:0 20px 20px 0;}
p img.right {float:right;margin:0 0 20px 20px;}
ul {list-style:none;}
#content ul {list-style:square;}

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

/* quotes */
blockquote p {color:#666;padding-left:10px;border-left:5px solid #ddd;margin-left:-15px;}
blockquote p:before {content:'\201C'}
blockquote p:after {content:'\201D'}

/* tables */
table {border-collapse:collapse;width:100%;}
th {padding:4px;text-align:left;}
th, td {padding:4px 10px;border:3px solid #F8F8F8;background:#eee;}
table span {color:#999;font-size:11px;font-style:italic;}

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

/* columns */
.one_half, .one_third, .two_thirds, .one_fourth {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%;}
.last {margin-right:0;}
.clear {clear:both;}

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

/* buttons  */
.button {background:#ccc;padding:0 12px;color:#fff;color:rgba(255,255,255,0.85);font-weight:bold;margin:0 6px 6px 0;display:inline-block;border-bottom:2px solid #bbb;line-height:30px;text-decoration:none;}
.button:hover {color:#fff;color:rgba(255,255,255,0.85);text-decoration:none;}
.button.black {background-color:#333;border-color:#111;}
.button.black:hover {background-color:#111;}
.button.gray {background-color:#999;border-color:#666;}
.button.gray:hover {background-color:#888;}
.button.white {background-color:#ddd;border-color:#bbb;color:#555;}
.button.white:hover {background-color:#ccc;}
.button.green {background-color:#89B64C;border-color:#59861C;}
.button.green:hover {background-color:#79A63C;}
.button.orange {background-color:#D63C00;border-color:#A60C00;}
.button.orange:hover {background-color:#C62C00;}
.button.red {background-color:#bd362f;border-color:#8d060f;}
.button.red:hover {background-color:#9d160f;}
.button.blue {background-color:#0B98E9;border-color:#0B58A9;}
.button.blue:hover {background-color:#0B78C9;}
.button.purple {background-color:#8475A8;border-color:#544578;}
.button.purple:hover {background-color:#645588;}
.button.pink {background-color:#E53B8A;border-color:#B50B5A;}
.button.pink:hover {background-color:#C51B6A;}

/* tour  */
.tour {margin-bottom:0;}
.tour>li {clear:both;padding:20px 0 0px;width:100%;background:url(../img/bg/line.png) repeat-x;list-style:none;}
.tour>li:first-child {padding-top:0;background:none;}
.tour li img {float:left;margin:0 20px 20px 0;}
.tour li img.right {float:right;margin:0 0 20px 20px;}

/* screenshots  */
.screenshots {width:560px;margin-top:-20px;}
.screenshots li {float:left;display:inline-block;width:160px;margin:20px 40px 20px 0;list-style:none;}
.screenshots li.last {margin-right:0;float:right;}
.screenshots li img {display:block;}

/* changelist  */
.changelist li {color:#666;background:url(../img/bg/line.png) repeat-x;line-height:24px;list-style:none;}
.changelist li:first-child {background:none;}
.changelist li span {font-size:11px;line-height:16px;margin-right:4px;width:40px;text-align:center;display:inline-block;}
.changelist li span.new {background:#D5EFC2;}
.changelist li span.fixed {background:#FFE25F;}
.changelist li span.misc {background:#9FC2FF;}


/*
04. SIDEBAR ----------------------------------*/

#sidebar h3 {font-size:18px;background:url(../img/bg/hr.png) 100% 50% no-repeat;clear:both;}
#sidebar h3 span {padding-right:8px;}

/* buy button  */
#buy {text-indent:-9999px;display:block;width:260px;height:75px;margin-bottom:40px;}
#buy:hover {opacity:0.8;}
#iphone #buy {background-image:url(../img/bg/buy-iphone.png);}
#android #buy {background-image:url(../img/bg/buy-android.png);}
#windows #buy {background-image:url(../img/bg/buy-windows.png);}

/* social links  */
#social li {display:inline;}
#social li a {width:24px;height:24px;float:left;margin-right:6px;text-indent:-9999px;background:url(../img/bg/sprite-social.png);opacity:0.3;}
#social li a:hover {opacity:1;}
#social li a#dribbble {background-position:0 0;}
#social li a#facebook {background-position:0 -24px;}
#social li a#flickr {background-position:0 -48px;}
#social li a#twitter {background-position:0 -72px;}
#social li a#rss {background-position:0 -96px;}

/* copyright text  */
#copyright {padding-top:20px;font-size:11px;clear:both;}


/*
05. FORMS ----------------------------------*/

label {clear:both;display:block;line-height:30px;}
label span {color:#999;font-size:11px;font-style:italic;}
input, textarea {background:#eee;border:0;color:#666;font-size:15px;padding:6px;margin-bottom:10px;display:block;width:220px;border-style:solid;border-color:#ccc #ddd #fff;border-width:1px 1px 2px;}
input:focus, textarea:focus {background:#e2e2e2;}
em.error {height:0;width:0;position:relative;top:-9999px;display:none;text-indent:-9999px;float:left;}
input.error, textarea.error {background:#FFEFF1;border-color:#FFBFC9;}
#sidebar input {border:0;}
textarea {width:540px;overflow:auto;padding:9px;height:160px;line-height:20px;}

/* buttons  */
button {clear:both;cursor:pointer;width:auto;overflow:visible;float:left;border-style:solid;border-color:#fff #ccc #bbb;border-width:2px 1px 2px 1px;background:#ddd url(../img/bg/button.png) repeat-x;color:#444;font-weight:bold;padding:5px 10px;text-decoration:none;margin:10px 0 20px;}
button:hover {background-color:#ccc;}
#contactForm button:active {border-width:1px;position:relative;top:2px;margin-bottom:12px;}

/* newsletter  */
#newsletter button {clear:none;float:right;margin:0 0 0 6px;padding:1px 6px;}
#newsletter input {width:200px;float:left;background-color:rgba(255,255,255,0.1);font-size:13px;}
form#newsletter {padding:0px 0 30px;}
#newsletter input:focus {background-color:rgba(255,255,255,0.2);color:#ddd;}


/*
06. MISC  -----------------------*/

/* tipsy tooltips  */
.tipsy {padding:10px;font-size:16px;background:url(../img/bg/tipsy.png) no-repeat;}
.tipsy-inner {padding:8px 12px 12px 12px;background:#eee;color:#333;max-width:236px;text-align:center;line-height:24px;font-weight:bold;}
.tipsy-inner span {font:12px/16px Arial, sans-serif;display:block;color:#666;font-weight:normal;margin-top:5px;}
.tipsy-south {background-position:50% 100%;}

/* borders */
input, textarea, button, pre, .button, .tipsy-inner, .changelist li span, .alert, .qr, .screenshots li img {-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#content, #buy {-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}

/* box-shadows */
#content, #buy {-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.6);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.6);box-shadow:1px 1px 2px rgba(0,0,0,0.6);}
input, textarea {-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1) inset;-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1) inset;box-shadow:1px 1px 2px rgba(0,0,0,0.1) inset;}
.button {-webkit-box-shadow:0 10px 10px rgba(255,255,255,0.3) inset;-moz-box-shadow:0 10px 10px rgba(255,255,255,0.3) inset;box-shadow:0 10px 10px rgba(255,255,255,0.3) inset;}
.tipsy-inner {-webkit-box-shadow:0 30px 30px rgba(0,0,0,0.15) inset;-moz-box-shadow:0 30px 30px rgba(0,0,0,0.15) inset;box-shadow:0 30px 30px rgba(0,0,0,0.15) inset;}
.screenshots li img:hover {-webkit-box-shadow:0 0 0 3px rgba(0,0,0,0.1);-moz-box-shadow:0 0 0 3px rgba(0,0,0,0.1);box-shadow:0 0 0 3px rgba(0,0,0,0.1);}



/* transitions */
#buy, #phone a, #social a {-webkit-transition:opacity .3s ease;-moz-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease;}
#navigation a {-webkit-transition:color .3s ease;-moz-transition:color .3s ease;-o-transition:color .3s ease;transition:color .3s ease;}
.screenshots li img {-webkit-transition:box-shadow .3s ease;-moz-transition:box-shadow .3s ease;-o-transition:box-shadow .3s ease;transition:box-shadow .3s ease;}
input, textarea, button, .button, .qr {-webkit-transition:background-color .3s ease;-moz-transition:background-color .3s ease;-o-transition:background-color .3s ease;transition:background-color .3s ease;}