@import url('color.css');

/*
App Showcase
Created: 11/2011
Version: 1.2
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 {background-image:url(../img/bg/body.png);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 {content:".";display:block;height:0;clear:both;visibility:hidden;}

#intro {background:url(../img/bg/transparent-white-004.png);background:rgba(255,255,255,0.04);}
#intro-inner {width:640px;padding:70px 0 30px 300px;margin:0 auto;position:relative;}
#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 {text-indent:-9999px;background:url(../img/bg/logo.png);width:500px;height:80px;}
#intro-inner p {font-size:15px;line-height:22px;width:580px;margin-top:10px;}

/* 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;font-size:12px;line-height:18px;width:300px;margin:10px 20px 5px 0;}
#features li h2 {font-size:14px;font-weight:bold;margin:0 0 5px;}
#features li h2 img {margin:0 10px 20px 0;float:left;}

/* phone */
#phone {position:absolute;left:-25px;top:40px;width:323px;height:448px;}
#phone a {position:absolute;left:131px;top:184px;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:70px;top:74px;width:184px;height:276px;}

/* android */
#android #phone {background:url(../img/bg/android.png);}
#android #phone img {position:absolute;left:71px;top:56px;width:180px;height:300px;}

/* windows */
#windows #phone {background:url(../img/bg/windows.png);}
#windows #phone img {position:absolute;left:76px;top:66px;width:168px;height:280px;}

/* qr code button */
.qr {position:absolute;right:0;top:80px;background:url(../img/bg/transparent-white-004.png);background:rgba(255,255,255,0.04);padding:4px 6px;color:#ddd;}
.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;font-size:13px;margin-right:10px;}
#navigation li a {padding:0 10px;line-height:50px;height:50px;display:block;font-weight:normal;opacity:0.8;color:#fff;}
#navigation li a:hover {text-decoration:none;opacity:1;}
#navigation li.tabs-selected a {opacity:0.5;background:url(../img/bg/tabs-selected.png) no-repeat 50% 100%;}

/* typography  */
h2 {font-size:20px;font-weight:normal;margin-bottom:10px;}
h3 {font-size:17px;font-weight:normal;margin:30px 0 10px;}
h3 small {font-size:17px;color:#999;}

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

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

/* 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:600px;margin-top:-20px;}
.screenshots li {background:#666;float:left;width:160px;margin:15px 35px 15px -5px;position:relative;border:5px solid #F8F8F8;list-style:none;}
.screenshots li:hover {border-color:#ddd;}
.screenshots li img {float:left;}

/* version history  */
.updates li {color:#666;background:url(../img/bg/line.png) repeat-x;line-height:24px;list-style:none;}
.updates li:first-child {background:none;}
.updates li span {font-size:11px;line-height:16px;margin-right:4px;width:40px;text-align:center;display:inline-block;}
.updates li span.new {background:#D5EFC2;}
.updates li span.fixed {background:#FFE25F;}
.updates 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:10px;}

/* buy button  */
#buy {text-indent:-9999px;display:block;width:230px;height:90px;margin:-10px 0 -10px -10px;padding-top:5px;}
#buy:hover {opacity:0.7;}
#iphone #buy {background:url(../img/bg/buy-iphone.png);}
#android #buy {background:url(../img/bg/buy-android.png);}
#windows #buy {background:url(../img/bg/buy-windows.png);}

/* social links  */
#social li {display:inline;}
#social li a {color:#999;font-weight:normal;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 !important;border-color:#FFBFC9 !important;color:#000000 !important;}
#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;}
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;border:1px solid #444;}
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:5px;font-size:14px;background:url(../img/bg/tipsy.png) no-repeat;}
.tipsy-inner {padding:8px;background:#eee;color:#444;max-width:200px;text-align:center;line-height:20px;font-weight:bold;}
.tipsy-inner span {font-size:11px;line-height:15px;display:block;color:#888;font-weight:normal;}
.tipsy-south {background-position:50% 100%;}

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

/* box-shadows */
#content {-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;}

/* text-shadows */
#intro-inner, #sidebar, #navigation a {text-shadow:0 1px 1px rgba(0,0,0,0.2);}
button {text-shadow:0 1px 1px rgba(255,255,255,0.9);}

/* transitions */
#buy, #phone a, #social a, #navigation a {-webkit-transition:opacity .4s ease;-moz-transition:opacity .4s ease;-o-transition:opacity .4s ease;transition:opacity .4s ease;}
.screenshots li {-webkit-transition:border-color .4s ease;-moz-transition:border-color .4s ease;-o-transition:border-color .4s ease;transition:border-color .4s ease;}
input, textarea, button, .qr {-webkit-transition:background-color .4s ease;-moz-transition:background-color .4s ease;-o-transition:background-color .4s ease;transition:background-color .4s ease;}
.padleft30{ padding-left:30px; }
.fleft{float:left !important; }