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

	Spirit Creative CSS, 2008
	Dave Glanz, Exanimo.com, Cynthia Breck, Joey D'Anna

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

/*------------------------------------------------------------------------------
	BODY, links, etc
------------------------------------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	border: 0;
	font: normal 12px/1.5em Georgia,"Times New Roman", serif;
	color: #919191;
}

body {
	background: #d5d5d5 url(../images/background_big.jpg) top center no-repeat;
}

* html body {
	text-align: center;
}

html, body {
	height: 100%;
}

p {
	text-align:left;
	font: normal 12px/1.5em Georgia,"Times New Roman", serif;
	color: #919191;
}

a {
	text-align:left;
	font: normal 12px/1.5em Georgia,"Times New Roman", serif;
	color: #919191;
	text-decoration:underline;
	background:none;
}

a:hover, a:visited {
	text-decoration:underline;
}

h1 {
	display: none;
}

h5 {
	font: normal 22px Georgia,"Times New Roman", serif;
	color: #6ab9d7;
	padding: 10px 0 5px 0;
	letter-spacing: .07em;
	text-align:center;
	text-transform:uppercase;
}

/* orange header 1 */
h6 {
	font: bold 14px/.5em Georgia,"Times New Roman", serif;
	color: #f79834;
	padding: 18px 0 0 0;
	margin: 0;
}

#wrapper {
	margin: 0 auto;
	width: 901px;
	min-height: 100%;
	background: #ebebeb url(../images/background_gradient-white2.jpg) 0 139px repeat-x;
}

* html #wrapper {
	text-align: left;
	height: 100%;
}

#logo {
	position: absolute;
	top: 31px;
	left: 28px;
}


/* Quicktime Links  ***************************************************************/
a.logoLink, a.logoLink:visited { 
		margin: 0 auto;
        background: url(../images/logo_button.jpg) no-repeat 0px 0px;
        width: 391px; 
        height: 86px; 
        display: block; 
}

a.logoLink span { display: none;}

a.logoLink:hover, a.logoLink:active { 
	background: url(../images/logo_button.jpg) no-repeat 0px -86px; 
}


#header {
	background: #fff url(../images/header_1.jpg) 0 0 repeat-x;
	height: 176px;
	position: relative;
}

hr {
	display: none;
}

/* gets rid of mozilla outline on links:
:focus
{
-moz-outline-style: none;
}
*/
/*------------------------------------------------------------------------------
	GLOBAL NAVIGATION
------------------------------------------------------------------------------*/
#nav {
	list-style-type: none;
	background: #f58726 url(../images/nav_orange.jpg) 0 0 repeat-x;
	position: absolute;
	top: 139px;
	left: 0;
	width: 901px;
	height: 37px;
}


/* list */

#nav li {
	position: absolute;
}

#nav li a {
	display: block;
	background-position: 0 0;
	text-indent: -999em;
	overflow: hidden;
}

#nav li a:hover {
	background-repeat: no-repeat;
	background-position: 0 -37px;
}

#nav li a.selected {
	background-repeat: no-repeat;
	background-position: 0 -37px;
}

#nav li,
#nav li a {
	height: 37px;
}


/* individual buttons */

#nav li.work,
#nav li.work a {
	background-image: url(../images/nav-work.jpg);
	width: 118px;
	left: 341px;
}
#nav li.work a:active {
	background-position: 0 -74px;
}
#nav li.about,
#nav li.about a {
	background-image: url(../images/nav-about.jpg);
	width: 80px;
	left: 458px;
}
#nav li.about a:active {
	background-position: 0 -74px;
}
#nav li.contact,
#nav li.contact a {
	background-image: url(../images/nav-contact.jpg);
	width: 100px;
	left: 537px;
}
#nav li.contact a:active {
	background-position: 0 -74px;
}
#nav li.news,
#nav li.news a {
	background-image: url(../images/nav-news.jpg);
	width: 73px;
	left: 637px;
}
#nav li.news a:active {
	background-position: 0 -74px;
}
#nav li.client,
#nav li.client a {
	background-image: url(../images/nav-client.jpg);
	width: 150px;
	left: 710px;
}
#nav li.client a:active {
	background-position: 0 -74px;
}


/* selected buttons */
#nav li.workSelected,
#nav li.workSelected a {
	background-image: url(../images/nav-work.jpg);
	background-position: 0 -111px;
	width: 118px;
	left: 341px;
}
#nav li.aboutSelected,
#nav li.aboutSelected a {
	background-image: url(../images/nav-about.jpg);
	background-position: 0 -111px;
	width: 80px;
	left: 458px;
}
#nav li.contactSelected,
#nav li.contactSelected a {
	background-image: url(../images/nav-contact.jpg);
	background-position: 0 -111px;
	width: 100px;
	left: 537px;
}
#nav li.newsSelected,
#nav li.newsSelected a {
	background-image: url(../images/nav-news.jpg);
	background-position: 0 -111px;
	width: 73px;
	left: 637px;
}
#nav li.clientSelected,
#nav li.clientSelected a {
	background-image: url(../images/nav-client.jpg);
	background-position: 0 -111px;
	width: 150px;
	left: 711px;
}



/*------------------------------------------------------------------------------
	HOME / WORK NAVIGATION
------------------------------------------------------------------------------*/
.workNavigationHeader, .workNavigationHeaderTop {
	font: bold 14px/.5em Georgia,"Times New Roman", serif;
	color: #f79834;	
	text-decoration:none;
	text-transform:uppercase;
	padding: 6px 0 6px 0;
	letter-spacing: .01em;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	text-align:center;
}

.workNavigationHeaderTop {
	margin: 0px 0 6px 0;
}

.workNavigationHeader {
	margin: 10px 0 6px 0;
}

ul.workNavigation {
	padding-left: 0px;
}

ul.workNavigation  a, ul.workNavigation a:visited {
	background: url(../images/arrow_light.gif) left center no-repeat;
	padding-left: 10px;
	letter-spacing: .05em;
	line-height: 1.2em;
	text-decoration:none;
}

ul.workNavigation  a:hover, ul.workNavigation a:active {
		background: url(../images/arrow_dark.gif) left center no-repeat;
		color: #424242;
}

ul.workNavigation li {
	list-style-type:none;
}

ul.workNavigation li .selected {
	color: #424242;	
	background: url(../images/arrow_dark.gif) left center no-repeat;
}

/*------------------------------------------------------------------------------
	HOME / WORK page
------------------------------------------------------------------------------*/
#projectList {
	display:inline;
	margin: 30px 10px 30px 30px;
	width: 291px;
	float:left;
}

#projectContent {
	display:inline;
	margin: 30px 44px 30px 10px;
	width: 514px;
	top:0px;
	float:right;
}

#projectDescription {
	padding:0px;
	margin:0px;
}

#tagLine {
	margin:0 0 0 541px;
	padding: 40px 0 0 0;
	width:252px;
	height:65px;
}

h5.aboutPage {
	padding: 0px 0 5px 0;
}

.projectText {
	text-align:left;
	padding: 10px 0 10px 0;
}

/* Italic-All-Caps Subheaders ***************************************************************/
.subHeaders {
	text-align:center;
}

.subHeaderLeft, .subHeaderRight {
	text-align:center;
	letter-spacing: .1em;
	padding-top: 5px;
}

.subHeaderLeft {
	font: italic 10px/1.5em Georgia,"Times New Roman", serif;
	color: #919191;
	background: url(../images/flourish_left.gif) left center no-repeat;
	padding-left: 100px;
}

.subHeaderRight {
	font: bold 10px/1.5em Georgia,"Times New Roman", serif;
	color: #919191;
	background: url(../images/flourish_right.gif) right center no-repeat;
	padding-right: 100px;
	text-transform:uppercase;
}

/* Quicktime Link  ***************************************************************/
#qtLink {
	margin: 0 auto;
	text-align:center;
}

a.qtLink, a.qtLink:visited { 
		margin: 0 auto;
        background: url(../images/quicktime_link_big.gif) no-repeat 0px -22px;
        width: 156px; 
        height: 22px; 
        display: block; 
}

a.qtLink span { display: none;}

a.qtLink:hover, a.qtLink:active {
	background: url(../images/quicktime_link_big.gif) no-repeat 0px 0px; 
}


/* Demo Reel Link  ***************************************************************/
a.demoLink, a.demoLink:visited {
        background: url(../images/demo_link-big.gif) no-repeat 0px -27px;
        width: 127px; 
        height: 27px; 
        display: block; 
}

a.demoLink span { display: none;}

a.demoLink:hover, a.demoLink:active {
	background: url(../images/demo_link-big.gif) no-repeat 0px 0px; 
}


/*------------------------------------------------------------------------------
	ABOUT US
------------------------------------------------------------------------------*/
.aboutText {
	text-align:left;
	padding: 10px 0 10px 0;
	line-height: 1.9em;
}

.aboutTextBios {
	text-align:left;
	padding: 0px 0 10px 0;
	line-height: 1.9em;
}

/* orange header 1 */
a.bioHeaderLink {
	font: bold 14px/.5em Georgia,"Times New Roman", serif;
	color: #f79834;	
	text-decoration:none;
}

a.bioHeaderLink:hover {
	font: bold 14px/.5em Georgia,"Times New Roman", serif;
	color: #c97c2a;	
	text-decoration:none;
}

/* about sub nav ***************************************************************/
#aboutSubNav {
	margin: 5px 0 0 0;
	padding: 3px 0 3px 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	text-align:center;
}

#aboutSubNav a {
	padding:0px;
	text-decoration:none;
}

#aboutSubNav a:hover, 
#aboutSubNav a:visited,
#aboutSubNav a:active {
	color: #424242;
	text-decoration:none;
	background:none;
}

/* bios nav  ***************************************************************/
#aboutBiosNav a {
	text-decoration:none;
}

#aboutBiosNav a:hover, 
#aboutBiosNav a:visited,
#aboutBiosNav a:active {
	color: #424242;
	text-decoration:none;
	background:none;
}

/*
	
	CHANGE LEFT PADDING WHEN ADDING NAMES!

*/
#aboutDesignerBiosNav, #aboutEditorsBiosNav {
	margin: 0 0 12px 0;
	text-align:center;
	border-bottom: 1px solid #ddd;
	height: 42px;
}

#aboutDesignerBiosNav {
	padding: 5px 0px 0 27px;
}

#aboutEditorsBiosNav {
	padding: 5px 0px 0 110px;
}


.bioLinkName, .bioEndLinkName {
	padding:0 8px 0 8px;
	float:left;
}

.bioLinkName {
	border-right: 1px solid #ddd;
}

/**/
.bioEndLinkName {
	border:none;
}


/* Span classes - Top and Bottom Names */
.bioNameTop {
	font: normal 9px Georgia,"Times New Roman", serif;
	margin:0 auto;
}

.bioNameBottom {
	font: normal 18px/.1em Georgia,"Times New Roman", serif;
	margin:0 auto;
	text-transform:uppercase;
	letter-spacing: .02em;
}

/* Bio Links */
.bioLinkName a, .bioEndLinkName a,
.bioLinkName a:hover, .bioEndLinkName a:hover,
.bioLinkName a:visited, .bioEndLinkName a:visited,
.bioLinkName a:active, .bioEndLinkName a:active
{
	padding:0;
	margin:0;
	text-decoration:none;
}

/* Left bg images for about section - name is updated with $aboutSection PHP Variable *****************************************/
#aboutHome,
#aboutAdam,
#aboutJames,
#aboutLeslie,
#aboutDave,
#aboutMary,
#aboutIan,
#aboutBob,
#aboutThuy,
#homePage {
	display:inline;
	margin: 0;
	width: 330px;
	height: 519px;
	float:left;
}

#aboutHome {
	background: url(../images/about_homestar.jpg) no-repeat 0px 0px;
}

#aboutAdam {
	background: url(../images/about_beer.jpg) no-repeat 0px 0px;
}

#aboutJames {
	background: url(../images/about_record.jpg) no-repeat 0px 0px;
}

#aboutLeslie {
	background: url(../images/about_cosmo.jpg) no-repeat 0px 0px;
}

#aboutDave {
	background: url(../images/about_sparky.jpg) no-repeat 0px 0px;
}

#aboutMary {
	background: url(../images/about_umbrella.jpg) no-repeat 0px 0px;
}

#aboutIan {
	background: url(../images/about_bull.jpg) no-repeat 0px 0px;
}

#aboutBob {
	background: url(../images/about_whiskey.jpg) no-repeat 0px 0px;
}

#aboutThuy {
	background: url(../images/about_guitar.jpg) no-repeat 0px 0px;
}

#homePage {
	background: url(../images/home_collage.jpg) no-repeat 0px 0px;
}


/*------------------------------------------------------------------------------
	CONTACT US
------------------------------------------------------------------------------*/

#contactUs {
	display:inline;
	margin: 0;
	width: 330px;
	height: 484px;
	float:left;
	background: url(../images/map.jpg) no-repeat 0px 0px;
}

.contactThanks {
	text-align:center;
	margin-top: 15px;
	padding-top: 10px;
	border-top: 1px solid #ddd;
}

/* Contact Form *****************************************/
#contactGeneral {
	margin: 15px 0 0 0;
	padding: 15px 0 0 0;
	width: 100%;
	height:100%;
	border-top: 1px solid #ddd;
	letter-spacing: .05em;
	/*text-transform:uppercase;*/
} 

label,input, select, textarea {
	color: #a5a5a5;
	margin: 10px 0 10px 0;
}

label {
	width:120px;
	padding-top:3px;
	float:left;
}

/* Internet Explorer hack for alignment- so sue me! */
*html label {
	padding-top: 0px;
}

input, textarea {
	border-top: 1px solid #c3c3c3;
	border-right: 1px solid #dadada;
	border-bottom: 1px solid #ededed;
	border-left: 1px solid #dadada;
}

input, textarea, select {
	width:384px;
	padding: 1px;
	background-color:#f8f8f8;
	float:right;
}

select, input {
	height: 1.5em;
}

textarea {
	height:7em;
}

input:focus, textarea:focus {
	background-color:#fff;
}

input.btn {
	background-color:#c9c9c9;
	width: 80px;
	height: 25px;
	color: #fff;
	position: relative;
	top: 70px;
	left: 387px;
}

input.btn2 {
	background-color:#c9c9c9;
	width: 80px;
	height: 25px;
	color: #fff;
	position: relative;
	left: 387px;
}


/*------------------------------------------------------------------------------
	NEWS
------------------------------------------------------------------------------*/
#newsImage {
	display:inline;
	margin: 0;
	width: 330px;
	height: 484px;
	float:left;
	background: url(../images/news_bg.jpg) no-repeat 0px 0px;
}

#newsGeneral {
	margin: 15px 0 0 0;
	padding: 15px 0 0 0;
	width: 100%;
	height:100%;
	border-top: 1px solid #ddd;
} 

/* orange header 2 - in news section*/
.newsHeader {
	font: bold 14px/1em Georgia,"Times New Roman", serif;
	color: #f79834;
	padding: 0;
	margin: 0;
}


.newsItemDiv {
	clear:both;
}

.dateDiv {
	width: 48px;
	height:54px;
	padding: 5px 0 0 0;
	margin: 0 10px 25px 0;
	text-align:center;
	background: url(../images/calendar_bg.jpg) no-repeat 0px 0px;
	color: #f7932d;
	float:left;
}

.newsTextDiv {
	padding:0;
	margin:0 0 10px 0;
	width: 440px;
	float:right;
	border-bottom: 1px solid #ddd;
}

/* Span classes - Top and Bottom Names */
.dateTop {
	font: bold 10px "Times New Roman", serif;
	color: #f7932d;
	margin:0 auto;
	letter-spacing: .05em;
	text-transform:uppercase;
}

.dateBottom {
	font: normal 32px/.6em "Times New Roman", serif;
	color: #f7932d;
	margin:0 auto;
	text-transform:uppercase;
	letter-spacing: .02em;
}

.newsText {
	text-align:left;
	padding: 2px 0 10px 0;
	margin:0px;
	line-height: 1.7em;
}

/*------------------------------------------------------------------------------
	CLIENT
------------------------------------------------------------------------------*/
#clientArea {
	display:inline;
	margin: 0;
	width: 330px;
	height: 484px;
	float:left;
	background: url(../images/about_box.jpg) no-repeat 0px 0px;
}

.clientHeader {
	font: bold 14px/1em Georgia,"Times New Roman", serif;
	color: #919191;
	letter-spacing:.07em;
}

#clientSubNav {
	margin:7px 0 0 0;
	padding: 2px 0 0 0;
	height: 24px;
	vertical-align:middle;
	width: 100%;
	float:left;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	text-align:center;
}

/* bios nav  ***************************************************************/
#aboutBiosNav a {
	text-decoration:none;
}

#aboutBiosNav a:hover, 
#aboutBiosNav a:visited,
#aboutBiosNav a:active {
	color: #424242;
	text-decoration:none;
	background:none;
}
/*------------------------------------------------------------------------------
	FOOTER and vcard class - for various cool address stuff
------------------------------------------------------------------------------*/
#adr {
	display:inline;
}
#footer * {
	display:inline;
	letter-spacing: .08em;
}
#footer {
	padding: 20px 0 10px 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #e7e7e7;
	text-align:center;
	clear:both; 
}

#footer a, a:hover, a:visited {
	text-decoration:none;
	background:none;
}
#footer .vcard .fn {
	display: none;
}
/* Flourishes */
#footer .street-address {
	background: url(../images/flourish_contact_left.gif) left center no-repeat;
	padding-left: 50px;
}
#footer .tel {
	background: url(../images/flourish_contact_right.gif) right center no-repeat;
	padding-right: 50px;
}

/* vcard link style */
#footer a.vCardLink { 
		margin: 10px auto;
        background: url(../images/vCard_link_big.jpg) repeat 0px -15px;
        width: 59px; 
        height: 15px; 
        display: block; 
}

#footer a.vCardLink span { display: none;}

#footer a.vCardLink:hover { background: url(../images/vCard_link_big.jpg) repeat 0px 0px; }