/*
-----------------------------------------------
Style Sheet

Site: Ciano Media
Author:   Willo Design
Version:  2006.5.11
----------------------------------------------- */

@import url(base.css);


/*
-----------------------------------------------
Link styles
----------------------------------------------- */
a:link,
a:visited {
	color: #FFEABF;
}

/*
-----------------------------------------------
Page Template Layout styles
----------------------------------------------- */
body {
	background: #6E0001 url("../images/background.gif") 50% 150px repeat;
	font: 12px/1.5 Arial, Helvetica, sans-serif;
	color: #E7B88C;
}

#header,
#nav,
#body,
#content {
	position: relative;
}

#header {
	height: 150px;
	background: url("../images/header-bg.jpg") repeat-x;
}
#header strong {
	display: block;
	width: 100%;
	height: 100%;
	background: url("../images/header-bg-big.jpg") 50% 0 no-repeat;
}
#header strong img {
	position: absolute;
	top: 9px;
	left: 50%;
	margin-left: -138px;
}

#nav {
	width: 100%;
	height: 56px;
	position: absolute;
	top: 123px;
	left: 0;
	background: url("../images/nav-bg.gif") 50% 100% repeat-x;
}
#nav ul, #nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#nav ul {
	position: relative;
	left: 50%;
	margin-left: -192px;
	width: 384px;
	height: 27px;
	background:  url("../images/nav.gif") 50% 0 no-repeat;
}
#nav a {
	display: block;
	width: 82px;
	height: 27px;
	position: absolute;
	top: 0;
	left: 0;
	text-indent: -9999px;
	overflow: hidden;
	background:  url("../images/nav.gif") no-repeat;
}
#nav a:hover {
	background:  url("../images/nav.gif") 0 -27px no-repeat;	
}
#nav .learnMore a {
	left: 150px;
}
#nav .aboutCiano a {
	left: 302px;
}
#trailer #nav .trailer a	{ background-position: 0 -27px; }
#nav .learnMore a			{ background-position: -150px 0; }
#nav .learnMore a:hover,
#learnMore #nav .learnMore a{ background-position: -150px -27px; }

#nav .aboutCiano a			{ background-position: -302px 0; }
#nav .aboutCiano a:hover,
#about #nav .aboutCiano a	{ background-position: -302px -27px; }


#body,
#footer {
	width: 784px;
	position: relative;
	left: 50%;
	margin-left: -392px;
}

#body {
	background:  url("../images/body-bg.png") repeat-y;
	_background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/body-bg.png',sizingMethod='scale');
}

#content {
	margin-left: -374px;
	position: relative;
	left: 50%;
	width: 748px;
	border: 1px solid transparent;
	overflow: auto;
}

#footer {
	height: 40px;
	color: #C72814;
	text-align: center;
	line-height: 2.75;
}
#footer .hack {
	width: 100%;
	height: 40px;
	background:  url("../images/footer-bg.png") no-repeat;
	_background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/footer-bg.png',sizingMethod='crop');
}
#footer ul, #footer li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#footer ul {
	position: relative;
	top: -40px;
}
#footer li {
	padding: 3px 5px 3px 25px;
	display: inline;
	background: url(../images/footer-bullet.gif) no-repeat;
}
#footer li.first {
	padding-left: 0;
	background: none;
}
#footer a {
	color: #C72814;
}
#footer a:hover {
	color: #F08072;
}



/*
-----------------------------------------------
Splash Page styles
----------------------------------------------- */
.splash #content {
	height: 303px;
	background:  url("../images/splash.jpg") no-repeat;
	border-color: #FFF;
}
.splash #logo-ciano {
	position: absolute;
	bottom: 0;
	_bottom: -1px;
	left: 312px;
}

#movie,
#splashHeadline,
#viewTrailer,
#movieStills img {
	position: absolute;
	top: 0;
	left: 187px;
	width: 374px;
	height: 242px;
}

#splashHeadline,
#movieStills img {
	opacity: 100;
	filter: alpha(opacity=100);
}
#splashHeadline	{ z-index: 400; }
#movieStill1	{ z-index: 399; }
#movieStill2	{ z-index: 398; }
#movieStill3	{ z-index: 397; }
#movieStill4	{ z-index: 396; }

#movie {
	background: #000;
	text-align: center;
}

#splashHeadline {
	margin: 0;
	background:  url("../images/headline.jpg") no-repeat;
	text-indent: -9999px;
}
#viewTrailer {
	z-index: 500;
	text-indent: -9999px;
	overflow: hidden;
}
#viewTrailer:hover {
	background:  url("../images/viewTrailer.jpg") no-repeat;
}
#movieStills {
	background:  url("../images/viewTrailer.jpg") no-repeat;
}
#troubleshooting {
	margin: 0 15px 0 17px;
	padding: 0.75em 0 1em;
	text-align: center;
	background: #6E0001;
	overflow: auto;
	color: #ffeabf;
}
#troubleshooting p {
	margin: 0.5em 0 0;
	font-weight: bold;
	font-size: 14px;
	color: #fff;
}
#troubleshooting ul {
	list-style: none;
	text-align: left;
	width: 275px;
	margin: 0 auto;
	line-height: 1.1;
}
#troubleshooting li {
	margin: 0;
	padding: 0;
	display: inline;
}
#troubleshooting li a {
	margin: 0;
	padding: 4px 0 4px 23px;
	background-position: 0 50%;
	background-repeat: no-repeat;
	display: block;
	width: 250px;
	text-decoration: none;
}
#troubleshooting li a:hover {
	text-decoration: underline;
}
#troubleshooting #windowsMedia a {
	background-image: url(../images/windows-media-logo.gif);
}
#troubleshooting #quickTime a {
	background-image: url(../images/quicktime-logo.gif);
}



/*
-----------------------------------------------
Info Page styles
----------------------------------------------- */
.info #content {
	margin-left: -375px;
	width: 749px;
	border-color: #6E0001;
}
.info #content div {
	padding: 2em 125px 3em;
	background: #6E0001;
}
.info #content div div {
	padding: 0;
}
.info #content h1,
.info #content h2 {
	font-family: "Century Gothic", Helvetica, Arial, sans-serif;
	color: #FBDA98;
}
.info #content h1 {
	margin: 0;
	padding: 0;
	line-height: 1.2;
}
.info #content strong {
	color: #FFEABF;
}
.info #content p strong {
	text-transform: uppercase;
}

.info #content #biographies {
	margin: 0 -125px -7px;
	padding: 0 125px 30px;
	background: url(../images/horizontal-rule.gif) 50% 100% no-repeat !important;
}
#learnMore #content div {
	float: left;
}
#learnMore #content img {
	margin: 15px -110px 0 12px;
	float: right;
	display: inline;
	clear: right;
}
.info #content h1, 
.info #content h2 {
	clear: left;
}

/*
-----------------------------------------------
Headline image replacement styles
----------------------------------------------- */
#about #content h1,
#learnMore #content h1,
#about #content #meet-the-team,
#learnMore #content #caliente,
#learnMore #content #let-your-viewers {
	line-height: 1;
	text-indent: -9999px;
}
#about #content h1,
#learnMore #content h1 {
	margin: 0 0 0 -62px;
	float: left;
	display: inline;
	width: 550px;
	height: 42px;
}
#about #content h1 {
	background: url(../images/headlines/about-ciano-media.gif) no-repeat;
}
#learnMore #content h1 {
	background: url(../images/headlines/diseno-de-suenos.gif) no-repeat;
}
#about #content #meet-the-team,
#learnMore #content #caliente,
#learnMore #content #let-your-viewers {
	margin-left: -52px;
	margin-bottom: -10px;
	height: 33px;
}
#about #content #meet-the-team {
	background: url(../images/headlines/meet-the-team.gif) no-repeat;
}

#learnMore #content #caliente {
	background: url(../images/headlines/caliente.gif) no-repeat;
}
#learnMore #content #let-your-viewers {
	background: url(../images/headlines/let-your-viewers.gif) no-repeat;
	clear: right;
}