/* CSS Document 

Created by Julian Smith
Websmiths - http://www.websmiths.com.au
2007

---- CONTENTS -----

- Basics
- Forms
- Main Layout 
- Nav Lists
- Main Typography
- Pathways classes
- General Classes

-------------------*/

@import url("fonts/fonts.css");

/*
----- set basics -----*/

html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-family: "bitstream_vera_serifroman", Courier, sans-serif;
	text-align: left;
	border: 0;
}

a {
	text-decoration: none;
	font: inherit;
	color: #90C7D6;
}
	a:hover {
		text-decoration: underline;
	}
	
ul, ol { margin: .4em 0 .8em 2.5em; }




sup, sub { font-size: .4em; }

/*
----- Main Layout -----*/
html {
	background: #191D24 url(/images/steve-james-bg-blank.jpg) no-repeat fixed center top / cover;
}

body {
	text-align: center;
	position: relative;
}

#content, #footer {
	width: 1178px;
}

#wrap {
	margin: 0 auto;
	position: relative;
	width: 1250px;
}

#header {
	position: relative;
	left: 0;
	top: 0;
	margin: 0;
}
	#header h1, #header h2, #header h3 {
		position: absolute;
		top: 135px;
		left: 252px;
		font-size: 2.6em;
		color: #a49a83;
	}
	#header h2 {
		top: 158px;
		left: 730px;
		font-size: 1.5em;
		color: #746a51;
	}
	#header h3 {
		top: 185px;
		font-size: 1.4em;
		color: #b0ab9e;
		margin-left: 4px;
	}
	
			
#logo {
	position: absolute;
	left: 20px;
	top: 5px;
}
#logo a {
}
#logo a:hover {
	text-decoration: none;
}


#content {
	position: absolute;
	overflow: hidden;
	top: 260px;
	left: 0;
	height: 446px;
	margin: 0 36px;
}

#sidebar {
	float: left;
	width: 170px;
	margin: 135px 0 0;
}

#copy {
	height: 446px;
	overflow: hidden;
}
.clearance {
	margin: 0 4em;
}

#copy ul { margin-left: 2em; } 
#copy li {
	margin: 1.2em 0;
	padding: 5px 0 0 60px;
	list-style: none;
	background: url(/images/bullet.png) no-repeat left 3px;
}

#footer {
	color: #aaa;
	overflow: hidden;
	position: absolute;
	top: 713px;
	left: 0;
	height: 220px;
}
	#footer h2, #footer h3, #footer h4 {
		position: absolute;
		top: 14px;
		left: 840px;
		font-size: 1.7em;
		margin: 0 !important;
		color: #746a51;
	}

	#footer h3 {
		top: 10px;
		left: 20px;
		background: url(/images/aria.png) no-repeat left 5px;
		height: 50px;
		font-size: .9em;
		padding: 8px 0 0 100px;
		color: #b0ab9e;
	}
	#footer h4 {
		top: 0;
		left: 1060px;
	}
	

#websmiths {
	font-size: .8em;
	clear: both;
}
	#websmiths a { color: #f90; }
	#websmiths p { 
		padding: 5px;
	}

p.copyright, #websmiths p { 
	text-align: right;
	color: #999;
	position: absolute;
	top: 80px;
	right: 0;
}

#websmiths p {
	top: 100px;
}
#footer #snLinks {
	float: right;
}





/* 
----- Nav lists -----*/

/* -- Top Nav --*/
#mainnav {
	position: absolute;
	right: 25px;
	top: 220px;
}

#mainnav ul { 
	padding: 0;
	margin: 0;
}
	
#mainnav li, #mainnav a { 
	float: left;

}
#mainnav li { 
	list-style-type: none;
/*	border-left: 1px solid #ddd;
*/	position: relative;
}
	#mainnav a, #mainnav li#active li a { 
		font-size: 15px;
		padding: 0px 10px;
		color: #ababab;
		text-align: center;
}
	#mainnav li:first-child { border: none; }
	
	#mainnav a:hover, #mainnav li#active li a:hover {
		text-decoration: none;
		color: #D8FFBD;
	}
	#mainnav li#active a, #mainnav li#active a:hover, #mainnav li li a.active, #mainnav li#active li a.active { 
		color: #BAFFEE;
		text-decoration: none;
	}
	
	
	/* hide active on steves 
	li#active {
		display: none;
	}
	*/
	
	#mainnav li ul { 
		display: none;
		background: #fff;
		position: absolute;
		padding: 6px 0 0;
		margin: 0;
		top: 18px;
		left: -1px;
		border: 1px solid #ddd;
		border-width: 0 1px 1px;
		border-color: #ddd #f1f1f1 #f1f1f1 #ddd;
		z-index: 50;

	}
	
	#mainnav li ul li {
		border: none;
	}
	#mainnav li ul a, #mainnav li#active ul a { 
		text-align: left;
		padding: 4px 10px;
		margin: 0;
		width: 150px;
	
	}
	#mainnav li ul a:hover, #mainnav li#active ul a:hover, #mainnav li a.active {
		border-left: 3px solid #ddd;
		background: #f8f8f8;
	}
	#mainnav li a.active, #mainnav #active ul a.active:hover { 
		border-color: #bbb; 
		background: #f3f3f3;
	}
	
	#mainnav li:hover ul { display: block; }


/*
----- Main Typography -----*/

p, li, h1, h2, h3, h4, h5, h6 {
	color: #E3E9B5;
}
/*
p, li, strong {
	font-family: "bitstream_vera_serifbold", Courier, sans-serif;
}
*/
p {
	margin: 1.5em 0;
}


#copy h1, #copy h2, #copy h3 {
}

#copy h1 {
	font-size: 2.3em;
	color: #a49a83;
	font-weight: normal;
	margin: 1em 0 .4em;
}

#copy h2 {
	font-size: 2.1em;
	color: #746a51;
	font-weight: normal;
	margin: 2em 0 0;
}
	#copy .clientListing h2 {
		font-size: 1.8em;
	}
	
	
#copy h3 {
	font-size: 1.8em;
	color: #b0ab9e;
	font-weight: normal;
}
	h3.testimonial {
		text-align: center;
	}

#copy h3, #copy h4, #copy h5 {
	margin: .7em 0 .2em;
}
#copy h4 {
	font-size: 1.2em;
}
#copy h6 {
	color: #b0ab9e;
	text-transform: uppercase;
	line-height: 1.3em;
	padding: 1em 4em 1em 0;
}



table p, table h1, table h2, table h3, table h4, table h5, table h6 {
	padding-left: 0;
	padding-right: 0;
}

/*
----- Form fields etc. ------*/

form {
	margin: 1.2em;
}

input, textarea, select {
	padding: .5em;
	border: 1px solid #666;
	border-left-color: #CCCCCC;
	border-top-color: #CCCCCC;
	width: 350px;
	font-size: 1.1em;
}

input[type="file"] {
	border: none;
}

/*
form label, form i { float: left; }
form label {
	width: 200px;
	padding: 0 1em 0 0;
	text-align: right;
	font-size: 1.3em;
}
form i {
	max-width: 80%;
}
*/

form label {
	display: block;
	margin-top: .1em;
}

form p { 
	overflow: hidden;
	margin: .5em 0;
}

span.checkBox {
	float: left;
	width: 150px;
}

input.url {
	width: 304px;
}

input.autoWidth, input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="file"], input[size] {
	width: auto;
}
textarea.resizable {
	/*display: block;*/
	margin-bottom: 0;
	height: 80px;
	width: 349px;
}
textarea.small {
	height: 40px;
}
/*
.ui-resizable-s {
	bottom: -1px;
	background: url(../../images/grippie.png) no-repeat center center;
}
*/
.ui-wrapper {
	padding-right: 1px;
}



#albumSlider {
	position: absolute;
	top: 9px;
	left: 16px;
	padding: 8px 0 0;
	width: 1148px;
	height: 416px;
	overflow: hidden;
}
#albumSlider > div {
	position: absolute;
	top: 0;
	left: 1160px;
}
#albumSlider > div#slide_1 {
	left: 0;
}

#albumSlider > div > div {
	float: left;
	width: 216px;
	height: 200px;
	margin: 6px 14px 6px 0;
	border: 1px solid #aaa;
	position: relative;
}
#albumSlider > div > div > div {
	position: absolute;
	left: 0;
	top: 0;
	width: 216px;
	height: 200px;
	background: rgba(0,0,0,.8);	
	display: none;
}

#albumSlider > div > div:hover > div {
	display: block !important;
}
#copy #albumSlider h2, #copy #albumSlider h3, #copy #albumSlider h4, #copy #albumSlider p {
	text-align: center;
}
#copy #albumSlider h2 {
	font-size: 1.2em;
}
#copy #albumSlider h3 {
	font-size: 1em;
}
#copy #albumSlider h4 {
	font-size: .8em;
	font-family: monospaced;
	font-family: "Trebuchet MS", Helvetica, Courier, monospace, sans-serif;
	
}
#copy #albumSlider p {
	margin: .7em 0;
	font-family: "Trebuchet MS", Helvetica, Courier, monospace, sans-serif;
}

#albumSlider blockquote {
	color: #FFFFFF;
    font-size: 3em;
    margin: 6em 0 0;
    text-align: center;
}

.artistGroup {
	width: 1160px;
}





#sliderNav > div {
	position: absolute;
	top: 274px;
	background: url(/images/sliderPrevNext.png) no-repeat left top;
	height: 416px;
	width: 45px;
}
#sliderNav > div:hover {
	cursor: pointer;
}
#sliderNav .next {
	left: 1205px;
	background-position: right top;
}
#sliderNav .next:hover {
	left: 1206px;
}

#sliderNav .previous {
	left: 0px;
	display: none;
}
#sliderNav .previous:hover {
	left: -1px;
}



#discography, #bio {
	overflow: auto;
	position: absolute;
	left: 0;
	top: 3px;
	width: 100%;
	height: 100%;
}

#discography h2 {
	font-size: 1.6em;
	margin: 1em 0 .5em;
}
#discography h2, #discography ul {
	margin-left: 50px;
}
#discography ul {
	max-width: 50%;
}
#copy #discography li {
	margin: 12px 0;
	padding: 0 0 0 60px;
	color: #A4BFBE;
	background-position: left top;
	font-family: 'Trebuchet MS', Helvetica;
}

#discography strong {
	color: #469400;
	font-weight: normal;
	font-family: inherit;
}
#discography strong a {
	color: #7B873E;
}
#discography em {
	color: #5DB6FF;
}
#discography span, .discography span {
	color: #46EDBD;
}

#discography p {
	padding-top: 1em;
	margin-top: 0;
}
#discography p a {
	margin-left: 1em;
	white-space: nowrap;
}
#discography p a:before {
	content: '• ';
}


.discography {
	float: right;
    width: 30%;
    
}

#bio {
	padding: 0 40px;
    width: 1095px;
    color: #fff;
}
#bio em {
	color: #B7CEFF;
}

#bio em:hover {
	color: #CBFFDA;
}



/*
----- Various classes -----*/


.centre, .centre h1, .centre h2, .centre h3, .centre h4, .centre h5, .centre h6, .centre p, .centre td { 
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}


.fl, .half, .third { float: left; }
.fr { float: right; }
.clear { clear: both; }

img.fl, .fl img { margin: 10px 1em 0 20px; }
img.fr, .fr img { margin: 10px 1em 0 20px; }

.shadow {
	-moz-box-shadow: 2px 2px 7px #191919;
	-webkit-box-shadow: 2px 2px 7px #191919;
	box-shadow: 2px 2px 7px #191919;
}

.half { width: 48%; }
.third { width: 33%; }

.padtb {
	padding: 20px 0;
}
.padRight {
	padding-right: 100px;
}



.emphasise {
	font-style: italic;
	color: #2F5DBC;
	font-size: 1.25em;
}

.highlight { background: #9ff; padding: .4em; }

.byline {
	text-align: right;
	font-style: italic;
	font-size: .85em;
}



/* Jquery UI */
.ui-widget-overlay {
	background: rgba(0,0,0,.75);
	opacity: inherit;
	height: 300%;
}
.ui-dialog-titlebar-close {
	float: right;
}

.ui-dialog-title {
	margin: .4em 0 0 .6em;
}
div#videoPlayer.ui-dialog-content.ui-widget-content {
	padding: 0;
}

/* Alerts */

div.alert {
	padding: 30px 50px;
	position: absolute;
	top: 20px;
	left: 360px;
	background: #222;
	border: 1px dashed #900;
}

.alert p, .alert {
	font-style: italic;
	color: #900;
}
input.alert, textarea.alert, select.alert {
	border-color: #900;
}

span.alert { margin: 0 2px; }





/* 
------- Admin Links -------*/

#links {
	background: #000;
	position: fixed;
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 10px;
	top: 0;
	left: 0;
}
#links a { 
	padding: 1em;
	color: #fff;
}


/* for fckeditor */
body#copy, html[dir="ltr"] { 
	background: #222; 
}
body#copy #copy, html[dir="ltr"] #copy { 
	overflow: auto;
	margin: 0;
	padding: 4px;
	border: 0;
}


/* media queries 
------------------------------------------*/
/* ipad
@media only screen and (min-device-width: 1100px) and (max-width: 1265px){
	html {
		background-position: -375px top;
	}
}
 */



@media screen and (max-width: 1250px) {
	
	#wrap, 	
	#content, 
	#footer, 
	#albumSlider, 
	#copy, 
	#albumSlider > div, 
	#header h1, 
	#header h2, 
	#header h3,
	.artistGroup,
	#discography,
	#bio {
		top: auto;
		left: auto;
		position: relative;
		padding: 0;
		margin: 0;
		width: inherit;
		height: auto;
		overflow: inherit;
	}
	#wrap {
		overflow: hidden;
	}
	#albumSlider {
	}
	#albumSlider > div {
		display: inline-block;
		text-align: center;
	}
	#albumSlider > div > div {
		float: none;
		display: inherit;
	}
	#sliderNav {
		display: none;
	}
	#header {
		margin: 0 1.5em 2em;
	}
	#headerh1, #header h2, #header h3 {
		margin: 0;
	}
	#header h1 {
		margin-top: .2em;
	}
	#mainnav {
		position: absolute;
		right: 165px;
		top: 1em;
	}
	#discography ul {
		max-width: 80%;
	}
	#bio {
		margin: 0 30px;
	}
}


@media screen and (max-width: 800px) {

	.discography {
		float: none;
		margin: 0 2em;
		width: 100%;
	}
	#discography ul {
		max-width: 100%;
	}
}


@media screen and (max-width: 800px) and (min-width: 600px) {
	
	#mainnav {
	}
	#mainnav li, #mainnav a {
		float: none;
	}

}

@media screen and (max-width: 600px) {
	#mainnav {
		position: relative;
		right: auto;
		top: auto;
		margin: 0 1em;
		overflow: hidden;
	}
	#content {
		clear: both;
		margin-top: 1em;
	}
}



/*
@media screen and (min-width: 475px) {

	#albumSlider {
		width: 475px;
	}
}
 

@media screen and (min-width: 715px) {

	#albumSlider {
		width: 715px;
	}
}


@media screen and (min-width: 945px) {

	#albumSlider {
		width: 945px;
	}
}
*/


@media screen and (min-width: 1250px) {
	html {
		background: #191D24 url(/images/steve-james-site-bg.jpg) no-repeat center top;
	}

	#albumSlider {
		width: 1148px;
	}
}