@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:60px;}

body, input, textarea, button {font:13px/20px Arial,sans-serif;}

* {margin:0;padding:0;}

:focus {outline:0;}

#wrapper:after, #intro-inner:after, #intro-inner2: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:70px 0 30px 300px;margin:0 auto;position:relative;min-height:350px;}

#intro-inner2 {width:500px;padding:2px 0 10px 2px;margin:0 auto;position:relative;min-height:350px;}

#wrapper {width:940px;margin:120px 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:60px;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;}

#intro-inner2 p {font-size:15px;font-weight:bold;line-height:22px;width:500px;}


/* 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:17px;font-weight:bold;margin:0 0 10px 0;}

#features [class*="icon-"] {font-size:26px;}



/* 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:50px;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:Oswald, Arial, sans-serif;}

h2 {font-size:22px;margin-bottom:10px;}

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.7;}

#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:#fff;}





/*

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);}



/* text-shadows */

#sidebar, #navigation a, .button {text-shadow:0 1px 1px rgba(0,0,0,0.2);}

#intro-inner {text-shadow:0 1px 1px rgba(0,0,0,0.8);}

#intro-inner2 {text-shadow:0 1px 1px rgba(0,0,0,0.8);}

button, .button.white, .tipsy {text-shadow:0 1px 1px rgba(255,255,255,0.9);}



/* 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;}