/* 
Title: Screen Style
Author: Arif Hidayat
Author URI: http://primitip.com
Last Update: Apr 15, 2010
*/

body {
	color: #626262;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1em;
	background: #fff;
	}

/* links */

a {
	outline: none;
	text-decoration: none;
	}
a:link,
a:visited {
	color: #ee8039;
	}
a:hover {
	text-decoration: underline;
	}

/* common class */

.nav {
	margin: 0;
	list-style: none;
	}
.nav li, .nav li a {
	float: left;
	}
.omega {
	margin-bottom: 0!important;
	padding-bottom: 0!important;
	border: none!important;
	}

/* Layout
----------------------------------------------- */

.inner {
	width: 940px;
	margin: 0 auto;
	}
#main {
	padding: 10px 0 40px;
	background: url('../images/bg-main.png') repeat-x 0 100%;
	border-bottom: 1px solid #fff;
	}
#wrapper {
	float: left;
	width: 100%;
	}
#content {
	margin: 30px 0 0 320px;
	line-height: 1.4em;
	}
#contentwide {
	margin: 20px 0 0;
	line-height: 1.4em;
	}
body.order #contentwide {
	margin: 0;
	}
#sidebar {
	float: left;
	width: 280px;
	margin: 0 0 0 -100%;
	}

/* Header
----------------------------------------------- */

#header {
	padding: 25px 0 45px;
	background: #e9e2dc url('../images/bg-header.jpg') repeat-x 0 100%;
	}

/* logo */

#logo {
	float: left;
	margin: 0;
	}
#logo a {
	float: left;
	width: 222px;
	height: 59px;
	display: block;
	color: #38445b;
	text-indent: -9999px;
	background: url('../images/logo.png') no-repeat;
	}

/* main menu */

#menu {
	float: right;
	margin: 17px 0 0;
	position: relative;
	z-index: 1;
	}
#menu li {
	margin: 0 0 0 18px;
	}
#menu li a {
	padding: 0 0 0 15px;
	text-decoration: none;
	}
#menu li a span {
	float: left;
	display: block;
	padding: 0 15px 0 0;
	}
#menu li a em {
	float: left;
	display: block;
	padding: 0 0 8px;
	color: #636974;
	font-size: 1.1em;
	font-weight: bold;
	font-style: normal;
	line-height: 32px;
	}
#menu li a:hover,
#menu li.active a {
	background: url('../images/bg-menu-left.png') no-repeat;
	}
#menu li a:hover span,
#menu li.active a span {
	background: url('../images/bg-menu-right.png') no-repeat 100% 0;
	}
#menu li a:hover em,
#menu li.active a em {
	color: #fff;
	background: url('../images/bg-menu-bottom.png') no-repeat 50% 100%;
	}

/* Content
----------------------------------------------------------- */

a.getstarted {
	width: 278px;
	height: 54px;
	display: block;
	text-indent: -9999px;
	text-decoration: none;
	background: url('../images/btn-getstarted-2.png') no-repeat;
	}
.intro {
	margin: 0 0 20px;
	padding: 0 0 0 110px;
	}

/* alignments & images */

.alignleft {
	float: left;
	}
.alignright {
	float: right;
	}
img.aligncenter,
img[align="center"] {
	margin: 0 auto;
	display: block;
	}
img.alignleft,
img[align="left"] {
	float: left;
	margin: 5px 10px 5px 0;
	}
img.alignright,
img[align="right"] {
	float: right;
	margin: 5px 0 5px 10px;
	}

/* general content */

.title {
	margin: 0 0 15px;
	color: #ee8039;
	font-size: 1.7em;
	}

/* steps */

#steps {
	margin: 0;
	list-style: none;
	}
#steps .title {
	margin: 0 0 10px;
	}
#steps li {
	margin: 0 0 30px;
	padding: 10px 0 0 62px;
	background-repeat: no-repeat;
	}
#steps li.step1 {
	background-image: url('../images/ico-step-1.png');
	}
#steps li.step2 {
	background-image: url('../images/ico-step-2.png');
	}
#steps li.step3 {
	background-image: url('../images/ico-step-3.png');
	}
#steps li.step4 {
	background-image: url('../images/ico-step-4.png');
	}

/* forms */

form {
	margin: 30px 0 20px;
	}
#contactform {
	width: 512px;
	}
form fieldset {
	margin: 0;
	padding: 15px 29px 10px;
	background: url('../images/bg-form-1-mid.gif') repeat-y 50% 0;
	}
form input,
form label,
form textarea {
	margin: 0;
	}
.form-top {
	background: #e2e2e2 url('../images/bg-form-1-top.gif') no-repeat;
	}
.form-bottom {
	padding: 11px 0 12px;
	background: url('../images/bg-form-1-btm.gif') no-repeat 0 100%;
	}
.form-label {
	margin: 0 0 5px;
	color: #5a5a5a;
	}
.form-input,
.form-textarea {
	margin: 0 0 15px;
	}
.form-submit {
	float: right;
	}
.form-label span {
	padding: 0 0 0 5px;
	color: #8e8e8e;
	font-size: 12px;
	font-style: italic;
	}
.form-label span.req {
	color: #ee8039;
	}
.form-input input {
	width: 434px;
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	background: #fff url('../images/bg-form-1-input.png') no-repeat;
	border: none;
	}
.form-textarea textarea {
	width: 434px;
	height: 116px;
	padding: 10px;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	background: #fff url('../images/bg-form-1-textarea.png') no-repeat;
	border: none;
	}
.form-submit input {
	width: 95px;
	height: 43px;
	padding: 0;
	cursor: pointer;
	text-indent: -9999px;
	background: url('../images/btn-contact.png') no-repeat;
	border: none;
	}
.form-submit input:hover {
	background-position: 0 100%;
	}

/* getting started */

body.start .intro {
	background: url('../images/ico-coin.jpg') no-repeat;
	}

#packages {
	margin: 0 0 30px;
	list-style: none;
	}
#packages li {
	float: left;
	width: 306px;
	height: 190px;
	margin: 0 11px 0 0;
	color: #fff;
	font-size: .85em;
	background: #38475e url('../images/bg-package.png') no-repeat;
	}
#packages #pUnlimited {
	margin: 0;
	}
#packages .alignleft {
	width: 119px;
	text-align: center;
	}
#packages .alignright {
	width: 145px;
	padding: 21px;
	position: relative;
	line-height: 1.4em;
	}
#packages .number {
	display: block;
	margin: 0 auto 10px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	}
#packages #pMinor .number {
	width: 80px;
	height: 96px;
	margin-top: 20px;
	background-image: url('../images/bg-page-1.png');
	}
#packages #pMedium .number {
	width: 86px;
	height: 101px;
	margin-top: 16px;
	background-image: url('../images/bg-page-2.png');
	}
#packages #pUnlimited .number {
	width: 93px;
	height: 108px;
	margin-top: 9px;
	background-image: url('../images/bg-page-3.png');
	}
#packages .price {
	height: 31px;
	width: 81px;
	display: block;
	margin: 0 auto;
	padding: 9px 0 4px;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 31px;
	background: url('../images/bg-price.png') no-repeat;
	}

#packages .package-title {
	margin: 0 0 10px;
	color: #bad2f7;
	font-size: 2.2em;
	}
#packages strong {
	color: #b9d152;
	}
#packages a.getstarted {
	width: 150px;
	height: 38px;
	right: 16px;
	bottom: -12px;
	position: absolute;
	background-image: url('../images/btn-getstarted-3.png');
	}
#packages a.getstarted:hover {
	background-position: 0 100%;
	}

/* order form */

#orderform {
	margin: 0 auto 30px;
	}
#orderform .form-top {
	margin: 0 0 15px;
	background: #eee url('../images/bg-form-2-top.gif');
	}
#orderform .form-bottom {
	padding: 12px 0;
	background-image: url('../images/bg-form-2-btm.gif');
	}
#orderform .step {
	width: 462px;
	margin: 0 auto;
	text-align: center;
	}
#orderform fieldset {
	padding: 15px 29px 10px;
	text-align: left;
	background-image: url('../images/bg-form-2-mid.gif');
	}
#orderform .form-label label,
#orderform .form-checkbox label {
	font-weight: normal;
	}
#orderform .form-checkbox input {
	float: left;
	margin: 3px 0 0 0;
	}
#orderform .form-checkbox label {
	display: block;
	margin: 0 0 0 25px;
	font-size: 12px;
	}
#orderform .form-input input {
	width: 382px;
	background-image: url('../images/bg-form-2-input.png');
	}
#orderform .form-textarea textarea {
	width: 382px;
	height: 126px;
	background-image: url('../images/bg-form-2-textarea.png');
	}

#orderform .tabs {
	width: 797px;
	height: 33px;
	margin: 0 auto 40px;
	padding: 12px 16px 15px 13px;
	list-style: none;
	background: url('../images/bg-order-nav.jpg') no-repeat;
	}
#orderform .tabs li {
	float: left;
	margin: 0 8px 0 0;
	}
#orderform .tabs li#nav-4 {
	margin: 0;
	}
#orderform .tabs li span {
	float: left;
	height: 33px;
	display: block;
	line-height: 33px;
	text-align: center;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-image: url('../images/bg-order-nav-link.png');
	}
#orderform .tabs li#nav-0 span {
	width: 113px;
	background-position: -13px -12px;
	}
#orderform .tabs li#nav-1 span {
	width: 159px;
	background-position: -135px -12px;
	}
#orderform .tabs li#nav-2 span {
	width: 166px;
	background-position: -303px -12px;
	}
#orderform .tabs li#nav-3 span {
	width: 156px;
	background-position: -478px -12px;
	}
#orderform .tabs li#nav-4 span {
	width: 168px;
	background-position: -643px -12px;
	}

#orderform .tabs li#nav-0.current span {
	background-position: -13px -72px;
	}
#orderform .tabs li#nav-1.current span {
	background-position: -135px -72px;
	}
#orderform .tabs li#nav-2.current span {
	background-position: -303px -72px;
	}
#orderform .tabs li#nav-3.current span {
	background-position: -478px -72px;
	}
#orderform .tabs li#nav-4.current span {
	background-position: -643px -72px;
	}

#orderform a.next {
	float: right;
	width: 173px;
	height: 45px;
	display: block;
	line-height: 45px;
	text-indent: -9999px;
	background: url('../images/bg-order-next.png') no-repeat;
	}
#orderform a.prev {
	float: left;
	padding: 0 0 0 35px;
	color: #848484;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	background: url('../images/bg-order-prev.png') no-repeat 0 4px;
	}
#orderform a.more {
	float: left;
	width: 173px;
	height: 45px;
	display: block;
	line-height: 45px;
	text-indent: -9999px;
	background: url('../images/bg-order-more.png') no-repeat;
	}
#orderform a.pay {
	width: 213px;
	height: 45px;
	margin: 0 auto 50px;
	display: block;
	line-height: 45px;
	text-indent: -9999px;
	background: url('../images/btn-pay.png') no-repeat;
	}
#orderform a.pay:hover,
#orderform a.next:hover,
#orderform a.more:hover {
	background-position: 0 100%;
	}

#orderform #package-pick a {
	float: left;
	width: 153px;
	height: 89px;
	display: block;
	color: #fff;
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	background-repeat: no-repeat;
	background-image: url('../images/bg-package-pick.png');
	}
#orderform #package-pick a:hover {
	background-position: 0 100%;
	}
#orderform #package-pick span {
	display: block;
	line-height: 1.3em;
	}
#orderform #package-pick span.title {
	margin: 0 0 6px;
	color: #fff;
	font-size: 20px;
	line-height: 32px;
	}
#orderform #package-pick span.price {
	font-size: 16px;
	}

#orderform #step-1 .form-top {
	margin: 0 0 30px;
	}
#orderform #step-2 {
	position: relative;
	}
#orderform #step-2 .counter {
	width: 92px;
	height: 74px;
	top: 95px;
	right: -100px;
	padding: 20px 0 0;
	position: absolute;
	color: #fff;
	font-size: .85em;
	text-align: center;
	line-height: 1.4em;
	background: url('../images/bg-counter.png') no-repeat;
	}
#orderform #step-2 .counter strong {
	margin: 0 0 12px;
	display: block;
	font-size: 36px;
	}
#orderform .form-upload {
	margin: 0 0 15px;
	position: relative;
	}
* html #orderform .form-upload {
	display: inline-block;
	}
*:first-child+html #orderform .form-upload {
	display: inline-block;
	}
#orderform .form-upload .form-upload-fake {
	height: 36px;
	background: url('../images/bg-form-2-upload.png') no-repeat;
	}
#orderform .form-upload .form-upload-fake input {
	width: 270px;
	height: 32px;
	padding: 10px;
	background: none;
	border: none;
	}
#orderform .file {
	top: 0;
	right: 0;
	height: 36px;
	cursor: pointer;
	position: absolute;
	opacity: 0;
	filter: alpha(opacity:0);
	-moz-opacity: 0;
	z-index: 1;
	}

#orderform #step-3 .form-checkbox {
	margin: 0 0 20px;
	}

#orderform #step-4 ul {
	margin: 0;
	list-style: none;
	}
#orderform #step-4 li li {
	border-bottom: 1px solid #c8c8c8;
	}
#orderform #step-4 strong {
	display: block;
	}
#orderform #step-4 .step-intro {
	width: 462px;
	margin: 0 auto 30px;
	}
#orderform #step-4 #client-info {
	float: left;
	width: 240px;
	margin: 0 20px 0 0;
	font-size: .85em;
	}
#orderform #step-4 #client-info li {
	margin: 0 0 30px;
	}
#orderform #step-4 #client-info li li {
	margin: 0;
	padding: 8px 0;
	}
#orderform #step-4 #client-info .title {
	margin: 0;
	padding: 0 0 8px;
	font-size: 1.5em;
	border-bottom: 1px solid #c8c8c8;
	}
#orderform #step-4 #client-info strong {
	font-size: 1.2em;
	}
#orderform #step-4 #project-info {
	float: left;
	width: 561px;
	font-size: .85em;
	}
#orderform #step-4 .form-top {
	margin-bottom: 15px;
	background-image: url('../images/bg-form-3-top.gif');
	}
#orderform #step-4 .form-bottom {
	background-image: url('../images/bg-form-3-btm.gif');
	}
#orderform #step-4 .form-inner {
	padding: 15px 29px 10px;
	text-align: left;
	background-image: url('../images/bg-form-3-mid.gif');
	}
#orderform #step-4 #project-info .title {
	color: #5a5a5a;
	font-size: 1.8em;
	}
#orderform #step-4 #project-info .page {
	margin: 25px 0 0;
	}
#orderform #step-4 #project-info .page .title {
	margin: 0;
	}
#orderform #step-4 #project-info strong {
	font-size: 1.2em;
	}
#orderform #step-4 #project-info .package-name {
	margin: 0;
	padding: 0 15px;
	color: #fff;
	font-size: 1.3em;
	line-height: 37px;
	background: url('../images/bg-package-name.gif') no-repeat;
	}
#orderform #step-4 #project-info .package-name strong {
	display: inline;
	}
#orderform #step-4 #project-info li {
	padding: 10px 0;
	border-bottom: 1px solid #c8c8c8;
	}

#orderform #step-5 strong {
	margin: 0 0 40px;
	display: block;
	color: #7385a6;
	font-size: 2em;
	}

/* Sidebar
----------------------------------------------------------- */

#sidebar p {
	height: 152px;
	margin: 0 -9px 15px -12px;
	padding: 40px 40px 0 80px;
	position: relative;
	color: #565656;
	line-height: 1.3em;
	background: url('../images/bg-paper.png') no-repeat;
	}

/* Extra
----------------------------------------------------------- */

#extra {
	padding: 25px 0;
	color: #fff;
	font-size: .85em;
	background: #535e74 url('../images/bg-extra.png') repeat-x;
	}
#extra a {
	color: #fff;
	}
#extra ul {
	margin: 0;
	padding: 5px 0 0 150px;
	list-style: none;
	background: url('../images/logo-bottom.png') no-repeat;
	}
#extra ul ul {
	padding: 0;
	background: none;
	}
#extra li li {
	margin: 0 0 8px;
	}
#extra .quarter {
	float: left;
	margin: 0 0 0 25px;
	display: inline;
	}
#extra #eOther {
	width: 175px;
	}
#extra #eSocial {
	width: 130px;
	}
#extra #eSites {
	width: 185px;
	}
#extra #eTouch {
	width: 200px;
	}
#extra .title {
	margin: 0 0 20px;
	color: #fff;
	font-size: 1.3em;
	}

/* Footer
----------------------------------------------------------- */

#footer {
	padding: 20px 0;
	color: #9fa7b7;
	font-size: .8em;
	background: #353f53;
	border-top: 1px solid #475267;
	}
#footer p {
	margin: 0;
	}