/*
*****************************************************************************************************************
**** These rules are applied to index.html, image-to-html.html, design-to-xhtml.html, and jpg-to-html.html ******
**** As these pages are different from the rest pages of the website ********************************************
***************************************************************************************************************** */

/* Rules for the body 
------------------------------------------------------------------------------------------------- */
	body {
		margin:0;
		padding:0;
		font-family:verdana;
		font-size:62.5%;
		color:#f5f5f5;
		background:#0c0c0c;	
	}

/* Layout: Container div
------------------------------------------------------------------------------------------------- */
	div#container {
		margin:0 auto;
		width:808px;
		position:relative;
		background:url(images/index/body-bg.jpg) no-repeat -1px 0;
	}

/* Layout: Header div
------------------------------------------------------------------------------------------------- */
	div#header {
		float:left;
		width:100%;
	}

	div#header h1#logo {
		margin:24px 0 0 37px;
		padding:0 0 23px 0;
		float:left;
		width:184px;
		height:53px;
		position:relative;
		overflow:hidden;
		font-size:1.2em;
		display:inline;
	}
	
	div#header h1#logo span {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:url(images/inner-pages/logo.jpg) no-repeat top left;
	}

	div#header h1#logo a:link, div#header h1#logo a:visited {
		color:#fff;
	}

	div#header a#client-login, a#my-projects, a#log-out {
		color:#d1d0d0;
		text-decoration:none;
		text-transform:uppercase;
		font-size:0.9em;
		float:right;
		display:inline;
		margin:0 47px 0 0;
		background:url(images/inner-pages/client-login-bg.jpg) no-repeat top center;
		padding:50px 22px 25px 22px;
	}

	div#header a#client-login:hover, a#my-projects:hover, a#log-out:hover {
		text-decoration:underline;
	}


/* Navigation
------------------------------------------------------------------------------------------------- */
	ul#navigation {
		font-size:1.2em;
		line-height:40px;
		padding:0;
		background:url(images/index/navigation-bg.jpg) no-repeat top center;
		clear:both;
		width:787px;
		margin:0 auto;
		text-align:center;
		white-space:nowrap;
	}

	ul#navigation li {
		display:inline;
		white-space:nowrap;
		padding:0;
	}

	ul#navigation a:link, ul#navigation a:visited {
		color:#fff;
		padding:9px 14px;
		text-decoration:none;
		margin:0 16px;
	}

	ul#navigation a:hover {
		background:url(images/index/hover-nav-bg.jpg) repeat-x top center;
	}

	body#home ul#navigation a#home-nav {
		background:url(images/index/current-nav-bg.jpg) repeat-x top center;
	}


/* Layout: Intro div
---------------------------------------------------------------------------------------- */
	div#intro {
		float:left;
		width:100%;
	}

	div#intro h2.intro {
		margin:19px 0 0 25px;
		padding:0;
		font-weight:normal;
		font-size:12px;
		font-family:georgia;
		width:496px;
		height:63px;
		position:relative;
		overflow:hidden;
	}


	div#intro h2.intro strong {
		font-family:georgia;
		font-size:28px;
		display:block;
		font-weight:normal;
	}

	div#intro h2.intro span {
		position:absolute;
		width:100%;
		height:100%;
		background:url(images/index/h2-intro-bg.jpg) no-repeat top left;
	}

	div#intro p.intro {
		font-size:1.2em;
		margin:10px 0 1px 35px;
		padding:0;
		color:#efefef;
		line-height:170%;
		width:460px;
	}
	
	div#intro p.intro strong {
		font-weight:normal;
	}

	div#intro a#order-now {
		margin:33px 8px -1px 48px;
		padding:10px 0 0 0;
		float:left;
		width:220px;
		height:38px;
		position:relative;
		text-align:center;
		overflow:hidden;
		background:#dab886;
	}

	div#intro a#order-now span {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:url(images/index/order-now-button.jpg) no-repeat top center;
		cursor:pointer;
	}

	div#intro a#order-now:link, a#order-now:visited {
		color:#373737;
		font-size:13px;
		font-family:georgia;
		font-weight:bold;
	}

	div#intro a#our-benefits {
		margin:43px 0 -1px 0;
		padding:10px 0 0 0;
		display:block;
		float:left;
		width:173px;
		height:28px;
		text-align:center;
		position:relative;
		overflow:hidden;
		background:#ca573a;
	}

	div#intro a#our-benefits span {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:url(images/index/our-benefits-button.jpg) no-repeat top center;
		cursor:pointer;
	}

	div#intro a#our-benefits:link, a#our-benefits:visited {
		color:#fff;	
		font-family:georgia;
		font-size:14px;
		font-weight:bold;
	}

/* Layout: Content div
---------------------------------------------------------------------------------------- */
	div#content {
		clear:both;
		margin:0 auto;
		width:781px;
		background:#5e1e1e url(images/index/content-bg.jpg) repeat-y top left;
	}

/* Layout: Main-column div
---------------------------------------------------------------------------------------- */
	div#content div#main-column {
		float:left;
		background:#5f2424 url(images/index/main-column-bg.jpg) no-repeat top left;
		width:510px;
	}

	div#main-column h3 {
		width:476px;
		height:32px;
		font-size:1.6em;
		font-family:georgia;
		font-weight:normal;
		margin:18px 0 19px 17px;
		padding:0;
		position:relative;
		overflow:hidden;
	}

	div#main-column h3 span {	 /* Empty span given background image to hide the text version of h3 */
		background:url(images/index/psd-to-xhtml-benefits-h3-bg.jpg) no-repeat top left;
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
	}

	div#main-column h4 {
		margin:0 0 0 24px;
		padding:0;
		font-weight:bold;
		font-family:georgia;
		font-size:1.4em;
		color:#ddbb88;
	}

	div#main-column p {
		margin:0 0 18px 23px;
		padding:0;
		font-size:1.2em;
		width:440px;
		color:#f5f5f5;
		line-height:200%;
	}
	
	div#main-column p i, div#main-column p strong {
		font-style:normal;
		font-weight:normal;
	}


/* Layout: Secoundary-column div
---------------------------------------------------------------------------------------- */
	div#content div#secoundary-column {
		float:right;
		background:url(images/index/secoundary-column-bg.jpg) no-repeat top right;
		width:249px;
		padding:25px 0 0 22px;
	}

	div#secoundary-column h3 {
		font-size:1.4em;
		font-family:georgia;
		font-weight:normal;
		margin:28px 0 3px 0;
		padding:0;
		position:relative;
		width:211px;
		height:24px;
		overflow:hidden;
	}

	div#secoundary-column h3.first { /* Cancelling top margin for the first h3 of the secoundary-column div */
		margin-top:0;
	}

	div#secoundary-column h3#learn-more span { /* Empty span given background image to hide the text version of h3 */
		background:url(images/index/learn-more-h3-bg.jpg) no-repeat top left;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}

	div#secoundary-column h3#pricing span { /* Empty span given background image to hide the text version of h3 */
		background:url(images/index/pricing-h3-bg.jpg) no-repeat top left;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}

	div#secoundary-column h3#contact-us span { /* Empty span given background image to hide the text version of h3 */
		background:url(images/index/contact-us-h3-bg.jpg) no-repeat top left;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}

	div#secoundary-column h3#payment-options span { /* Empty span given background image to hide the text version of h3 */

		background:url(images/index/payment-options-h3-bg.jpg) no-repeat top left;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}

	div#secoundary-column p {
		margin:0 0 4px 6px;
		padding:0;
		font-size:1.2em;
		line-height:200%;
		width:210px;
		clear:both;
	}

	div#secoundary-column p a:link, div#secoundary-column p a:visited {
		color:#ddbb88;
		text-decoration:none;
	}

	div#secoundary-column p a:hover {
		text-decoration:underline;
	}

	div#secoundary-column img#decrease {
		float:left;
		border:none;
		margin:12px 0 5px 18px;
	}

	div#secoundary-column img#increase {
		float:left;
		border:none;
		margin:12px 0 5px 0;	
	}

	div#secoundary-column form {
		margin:8px 0 15px 0;
		padding:0;
		float:left;
		position:relative;
	}

	div#secoundary-column form fieldset {
		margin:0;
		padding:0;
		border:none;
		display:inline;
	}

	div#secoundary-column form fieldset input {
		font-size:1em;
		font-weight:bold;
		color:#dcdbdb;
		margin:0 6px;
		padding:3px 0 0 0;
		width:41px;
		height:19px;
		border:none;
		background:url(images/index/pricing-input-bg.jpg) no-repeat top left;
		color:#fff;
		text-align:center;
		cursor:pointer;
	}


	div#secoundary-column span#pricing-results {
		background:url(images/index/pricing-results-bg.jpg) no-repeat top right;
		padding:5px 10px 5px 8px;
		position:relative;
		top:12px;
		left:18px;
		font-size:1.1em;
		font-weight:bold;
		color:#dcdbdb;
	}

	div#secoundary-column span#pricing-results del {
		margin-right:12px;
	}

	div#secoundary-column img#payment-options-img {
		margin:10px 0 0 0;
	}


/* Layout: Footer div
---------------------------------------------------------------------------------------- */
	div#content div#footer {
		clear:both;
		width:781px;
		background:url(images/index/footer-bg.jpg) no-repeat bottom left;
		padding:90px 0 15px 0;
		position:relative;
	}

	div#footer p {
		margin:0;
		padding:0 0 0 18px;
		font-size:1.1em;
		color:#cbcbcb;
		width:630px;
	}
	
	div#footer p a {
		position:static !important;
		float:none !important;
		display:inline !important;
		font:normal 1em verdana !important;
	}

	div#footer a:link, div#footer a:visited {
		color:#ddbb88;
		text-decoration:none;
		display:block;
		float:right;
		position:absolute;
		bottom:15px;
		right:2.1em;
		font-size:1.1em;
	}

	div#footer a:hover {
		text-decoration:underline;
	}


/* Login box
---------------------------------------------------------------------------------------- */
	form#login-form {
		display:none;
		z-index:99999;
		position:absolute;
		top:66px;
		right:54px;
		margin:0;
		padding:5px;
		width:238px;
		background:#191919;
		border:1px solid #333131;
	}

	form#login-form a#close-login-box img {
		position:absolute;
		top:12px;
		right:12px;
		border:none;
	}

	form#login-form h5 {
		margin:0;
		padding:5px 0 5px 8px;
		font-size:1.2em;
		color:#ddbb88;
		font-family:georgia;
		font-weight:normal;
		background:#2f0d0e;
	}

	form#login-form fieldset {
		border:none;
		margin:0;
		padding:15px 5px 0 5px;
	}

	form#login-form fieldset p {
		margin:0;
		padding:0 0 9px 0;
	}

	form#login-form fieldset label {
		display:block;
		font-size:1.2em;
		color:#dfdfdf;
		padding:0 0 6px 1px;
	}

	form#login-form fieldset input#login_email, form#login-form fieldset input#login_password {
		margin:0 0 2px 0;
		padding:0;
		height:19px;
		width:228px;
		border:1px solid #421919;
		background:#323232;
		color:#a0a0a0;
	}

	form#login-form p.last {
		margin:0;
		padding:0 0 12px 10px;
	}

	form#login-form p.last a:link, form#login-form p.last a:visited {
		text-decoration:none;
		color:#c99d5b;
		font-size:1.1em;
	}

	form#login-form p.last a:hover {
		text-decoration:underline;
	}

	form#login-form p.last input {
		margin:0 0 0 37px;
		position:relative;
		top:5px;
	}