@charset "UTF-8";

/* BEGIN RESET CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* END RESET CSS */

html, body {
	width: 100%;
	height: 100%;
}

html {
	background:#050505 url(../images/bg.jpg) repeat-x bottom center fixed; 
	overflow: hidden;
}

body {
  	height: 100%; 
	max-height: 100%; 
	text-align: center;
}

* html body {
	padding:80px 0 123px 0; 
}

body #header {
  	position:fixed;
  	top: 0; 
  	left: 0; 
  	width: 100%; 
  	height: 80px; 
  	background: url(../images/bg-header.png) repeat-x 0 0;
	z-index: 2000
}

* html #header {
	height:80px;
  	position: absolute;
}

#header-inner {
	width: 960px;
	height: 80px;
	margin: 0 auto;
}

.left  {
	float: left;
}

.right {
	float: right;
}

.clear {
	clear: both;
}

.css-sprites {
	display: none;
}

@font-face {
	font-family: 'QlassikMediumRegular';
	src: url('../fonts/qlassik_tb-webfont.eot');
	src: local('☺'),
	url('../fonts/qlassik_tb-webfont.woff') format('woff'),
	url('../fonts/qlassik_tb-webfont.ttf') format('truetype'),
	url('../fonts/qlassik_tb-webfont.svg#webfontKMemKD6j') format('svg');
}

p {
	font: 12px/16px "QlassikMediumRegular",Trebuchet MS,Arial,Helvetica,sans-serif;
}

a:link, a:active {
	color: #f7b99f;
	text-decoration: underline;
}

a:hover, a:visited {
	color: #955650;
	text-decoration: none;
}

a#header-logo {
	display: block;
	float: left;
	width: 260px;
	height: 30px;
	margin-top: 5px;
	background: url(../images/logo-header.png) no-repeat;
	text-indent: -9999px;
}

ul.menu {float: right; height: 30px; margin: 5px 15px 0 0}
ul.menu li {float: left; list-style: none}
ul.menu li a {height: 30px; display: block; margin-right: 5px; text-indent: -9999px; background:url(../images/nav.gif) no-repeat}

ul.menu li#page-intro a {width: 93px; background-position: 0 0}
ul.menu li#page-my-work a {width: 111px; background-position: -113px 0}
ul.menu li#page-how-i-work a {width: 135px; background-position: -244px 0}
ul.menu li#page-about-me a {width: 121px; background-position: -399px 0}
ul.menu li#page-contact-me a {width: 133px; background-position: -540px 0}

ul.menu li#page-intro a:hover {width: 93px; background-position: 0 -35px}
ul.menu li#page-my-work a:hover {width: 111px; background-position: -113px -35px}
ul.menu li#page-how-i-work a:hover {width: 135px; background-position: -244px -35px}
ul.menu li#page-about-me a:hover {width: 121px; background-position: -399px -35px}
ul.menu li#page-contact-me a:hover {width: 133px; background-position: -540px -35px}

ul.menu li#page-intro a.active {width: 93px; background-position: 0 -70px}
ul.menu li#page-my-work a.active {width: 111px; background-position: -113px -70px}
ul.menu li#page-how-i-work a.active {width: 135px; background-position: -244px -70px}
ul.menu li#page-about-me a.active {width: 121px; background-position: -399px -70px}
ul.menu li#page-contact-me a.active {width: 133px; background-position: -540px -70px}

#intro, #my-work, #how-i-work, #about-me, #contact-me, #ft-resource {
	height: 1200px;
	padding-top: 10%;
	text-align: left;
}

.content {
	width: 960px;
	height: 340px;
	margin: 0 auto;
}

.pagenav {
	width: 940px;
	height: 20px;
	padding-top: 10px;
	text-align: center;
}

.prev-page, .next-page {
	display: inline-block;
	width: 80px;
	height: 20px;
	background: url(../images/pagenav.gif) no-repeat;
}

.prev-page {
	background-position: 0 0;
}

.prev-page:hover {
	background-position: 0 -20px;
}

.next-page {
	background-position: -80px 0;
}

.next-page:hover {
	background-position: -80px -20px;
}

#introduction {
	width: 940px;
	height: 300px;
	background: url(../images/bg-box-06.png);
}

#introduction h1 {
	float: left;
	width: 300px;
	height: 300px;
	text-indent: -9999px;
	background: url(../images/logo.png) no-repeat 65px 25px;
}

#introduction #pitch {
	float: right;
	width: 590px;
	height: 272px;
	margin: 28px 25px 0 0;
}

.cs-box {
	float: left;
	width: 275px;
	height: 107px;
	padding: 8px 20px 0 0;
}

.gelka ul li, .moosefrog ul li {
	float: left;
	height: 15px;
	margin: 3px 0 0 0;
}

.gelka ul li#track-01 {
	width: 93px;
}

.gelka ul li#track-02, .gelka ul li#track-03 {
	width: 70px;
}

.moosefrog ul li#track-01 {
	width: 70px;
}

.moosefrog ul li#track-02 {
	width: 70px;
}

moosefrog ul li#track-03 {
	width: 70px;
}

#featured-music .feat-artist-button {
	float: left;
	width: 15px;
	height: 15px;
	margin: 0 3px 0 0;
}

.pitch-free-quote {
	float: left;
	width: 400px;
	margin-top: 15px;
}

#intro .free-quote {
	display: inline-block;
	width: 190px;
	height: 31px;
	margin-top: 13px;
	float: right;
	background: url(../images/call-to-action-free-quote.gif) no-repeat 0 0;
	text-indent: -9999px;
}

#download-questionnaire {
	display: block;
	width: 270px;
	height: 37px;
	margin: 32px 15px 0 15px;
	background: url(../images/call-to-action-download-questionnaire.gif) no-repeat 0 0;
	text-indent: -9999px;
}

#intro .free-quote:active, #short-bio .free-quote:active, #download-questionnaire:active {
	background-position:  0 1px;
}

#portfolio {
	width: 940px;
	height: 290px;
	padding-top: 10px;
	background: url(../images/bg-box-06.png);
}

.slider-wrap {
	position: relative;
	padding: 10px 0 20px 30px;
	width: 910px;
}

.slider {
	overflow: auto;
	height: 220px;
}

.slider li {
	list-style: none;
	width: 900px;
}

.slider li img {
	float: left;
	padding-bottom: 20px;
}

.slider-wrap .prev {
	position: absolute;
	left: -26px;
	top: 90px;
	outline: 0;
}

.slider-wrap .next {
	position: absolute;
	right: -26px;
	top: 90px;
	outline: 0;
}

.client {
	width:430px;
	height:220px;	
	margin: 0 20px 0 0;
	overflow:hidden;
	position:relative;
	float:left;
}

.client .number {
	position: absolute;
	width: 20px;
	height: 24px;
	top: 0;
	right: 10px;
	background: #720000;
	font: bold italic 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #f7b99f;
	text-align: center;
	padding-top: 5px;
	z-index: 10;
}

.client .caption {
	width:410px;
	height:200px;
	background:#000;
	padding: 10px;
	position:absolute;
	z-index: 9;
	left:0;
	display:none;
	background: url(../images/bg-caption.png) repeat;
}

.client .caption a.visit-website {
	display: block;
	width: 95px;
	height: 24px;
	padding: 0 0 0 10px;
	background: url(../images/visit-website.png) no-repeat 0 0;
	text-decoration: none;
	text-indent: -9999px;
}

.client .caption a.visit-website:hover {
	background-position: 0 -26px;
}

.box-01, .box-about-me, #how-i-work-quote {
	float: left;
	width: 300px;
	height: 300px;
	margin: 0 20px 0 0;
}

.box-01 {
	background: url(../images/bg-box-01.png) no-repeat;
}

#how-i-work-quote {
	height: 285px;
	padding-top: 15px;
}

.box-about-me {
	background: url(../images/bg-box-profile.png) no-repeat;
	text-indent: -9999px;
}

#contact-info ul li, #how-i-work-steps p, #intro p, #contactform {font-family:"QlassikMediumRegular", Trebuchet MS, sans-serif; font-style:normal;}
.content h2, #pitch h3, .client h3, #how-i-work h3, #short-bio h3 {font-family:"Trebuchet MS", sans-serif; font-style:normal; text-transform: uppercase}
.content h2 {font-size: 28px; color:#f7b99f; letter-spacing: 0;}
.client {line-height: 30px;}
#introduction h2, #how-i-work-quote p {padding-bottom: 15px}
#my-work h2 {height: 32px; margin: 0 0 0 40px; background: url(../images/h2-my-work.gif) no-repeat 0 0; text-indent: -9999px;}
#how-i-work h2 {height: 32px; margin: 15px 0 22px 15px; background: url(../images/h2-how-i-work.gif) no-repeat 0 0; text-indent: -9999px;}
#contact-info h2 {height: 32px; margin: 32px 0 7px 15px; background: url(../images/h2-contact-me.gif) no-repeat 0 0; text-indent: -9999px;}
.client h3, #how-i-work h3, #short-bio h3, #pitch h3 {font-size: 18px; color:#f7b99f; letter-spacing: 0; text-transform:uppercase}
.client h3 span, #how-i-work h3 span, #short-bio h3 span, #pitch h3 span {color:#ddccb9}
#pitch h3, #how-i-work h3, #short-bio h3 {padding-bottom: 7px}
#pitch h3 {font-size: 14px; border-bottom: 1px solid #955650; margin-bottom: 3px}
#about-me p, #how-i-work-steps p, #short-bio ul, .caption p  {padding-bottom: 26px}
#introduction p, #contactform {font-size: 18px; font-weight: normal; color:#ddccb9; line-height: 24px; padding-bottom: 18px;}
#contact-info address strong {color:#f7b99f}
.caption p, #how-i-work p, #short-bio p, #short-bio ul li, #contact-info p, #contact-info ul li {font-size: 15px; color: #ddccb9; line-height: 23px; text-align: justify;}
#how-i-work p, #how-i-work h3, #short-bio h3 {margin: 0 15px;}
#contact-info p {margin: 22px 15px}
.caption p {height: 120px;}
.cs-box ul li, #introduction p.cs-boxes, #introduction p.cs-boxes a, #featured-music ul li p {font-size: 11px; font-weight: normal; text-align: left; line-height: 15px; padding-bottom: 2px; letter-spacing: 0}

#short-bio, #how-i-work-steps {
	float: left;
	width: 623px;
	height: 300px;
	margin: 0 17px 0 0;
	background: url(../images/bg-box-03.png) no-repeat 0 0;
}

#how-i-work-steps .flexcroll {
	height: 216px;
	margin: 15px 0;
	overflow: auto;
}

.scrollgeneric {
	line-height: 1px;
	font-size: 1px;
	position: absolute;
	top: 0; left: 0;
}

.vscrollerbase {
	width: 10px;
}
.vscrollerbar {
	width: 10px;
	background-color: #cde18c;
	cursor: pointer;
}
.hscrollerbase {
	height: 10px;
	background-color: white;
}
.hscrollerbar {
	height: 10px;
	background-color: black;
}

.scrollerjogbox {
	width: 10px;
	height: 10px;
	top: auto; left: auto;
	bottom: 0px; right: 0px;
	background-color: #FFF;
}

#short-bio {
	width: 578px;
	height: 270px;
	padding: 15px 25px 16px 20px;
	overflow: hidden;
}

.bio-free-quote {
	float: left;
	width: 380px;
	margin-top: -4px;
}

#short-bio .free-quote {
	display: block;
	width: 190px;
	height: 31px;
	margin-top: -8px;
	float: right;
	background: url(../images/call-to-action-free-quote.gif) no-repeat 0 0;
	text-indent: -9999px;
}

#contact-info, #contactform-container {
	float: left;
	width: 460px;
	height: 300px;
	background: url(../images/bg-contact.png) no-repeat;
}

#contact-info {
	margin-right: 20px;
	display: inline;
}

#contact-info ul {
	width: 420px;
	margin-left: 15px;
	font-style: normal;
}

#contact-info ul li {
	float: left;
	width: 210px;
}

#contactform-container p {
	margin: 20px 0 10px;
	font-size: 13px;
	font-style: italic;
}

#contactform fieldset {
	margin: 0 0 0 65px;
}

#contactform .form-slider {
	padding:0 0 7px;
}

#contactform label,
#contactform input[type="text"],
#contactform textarea {
	font-size: 14px;
	color: #f7b99f;
}

#contactform input[type="text"],
#contactform textarea {
	display:block;
	width: 305px;
	padding: 3px 10px 6px 10px;
	border:1px solid #111;
	background: url(../images/bg-inputs-normal.png) repeat;
}

#contactform input[type="text"] {
	height: 26px;
}

#contactform #anti-spam {
	float: left;
	width: 80px;
}

#contactform input#code {
	width: 45px;
}

#contactform textarea {
	height: 90px;
	padding-top: 8px;
	letter-spacing: .06em;
	font-family:inherit;
	overflow: auto;
}

#contactform input[type="text"]:focus,
#contactform textarea:focus {
	border: 1px solid #333;
	background: url(../images/bg-inputs-focus.png) repeat;
}

#contactform input[type="submit"] {
	float: left;
	width: 95px;
	height: 24px;
	margin: 5px 20px 0 0;
	background: url(../images/submit.png) no-repeat 0 0;
	cursor:pointer;
	text-indent: -9999px;
	border: none;
}

#contactform input[type="submit"]:hover{
	background-position: 0 -26px;
}

#contactform input[type="submit"]:active{
	background-position: 0 0px;
}

#contactform p.error, #contactform p.success {
	float: left;
	width: 204px;
	font-weight: bold;
	padding: 3px;
	border: 1px solid;
}

#contactform p.error {
	background: #ffc0c0;
	color: #f00;
	margin-top: 0px;
}

#contactform p.success {
	background: #b3ff69;
	color: #4fa000;
	margin-top: 5px;
}

body #footer {
	position: fixed;
  	bottom: 0; 
  	left: 0;
  	width: 100%; 
  	height: 123px; 
  	background: url(../images/bg-footer.jpg) center;
	z-index: 2000;
}

* html #footer {
	height: 123px;
  	position: absolute;
}

#footer-inner {
	width: 960px;
	height: 123px;
	margin: 0 auto;
	text-align: left;
}

.box-footer {
	position:relative;
	float: left;
	width: 300px;
	height: 80px;
	color: #000;
	margin: 23px 20px 0 0;
}

a.footer-sprite {
	display: block;
	width: 300px;
	height: 80px;
	background: url(../images/footer-sprite.png) no-repeat;
}

#footer-resource a.footer-sprite {
	background-position: 0 -160px;
}

#footer-resource a.footer-sprite:hover {
	background-position: 0 -240px;
}

#footer-logo a.footer-sprite {
	background-position: 0 0;
}

#footer-logo a.footer-sprite:hover {
	background-position: 0 -80px;
}

#footer-player a.footer-sprite {
	background-position: 0 -320px;
}

#footer-player a.footer-sprite:hover {
	background-position: 0 -400px;
}

#main-audio-player {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 24px;
	left: 35px;
}

a#client-area {
	display: block;
	position: absolute;
	width: 30px;
	height: 80px;
	right: 0;
	top: 23px;
	background: url(../images/button-client.png) no-repeat 0 0;
	text-indent: -9999px;
}

a#client-area:hover {
	background-position: 0 -80px;
}