/*Sylesheet for YoungAdultTVShow.com */


/* organized into "sitewide elements", "nav button styles", "index page styles", "cast and crew page styles" and "footer styles" */


body {
	font-family: trebuchet,tahoma, helvetica, arial, sans-serif;
	font-size: 12px;
	text-align: center;
	background: #000;
	color: #ddd4d4;
	padding-top: 12px;
	line-height: 1.5;
	margin-bottom: 20px;
}

#wrapper {
    margin: auto;
    text-align: left;
    width: 800px;
    position: relative;
	height: 570px;
}

#body {
     background: none;
     width: 100%;
	height: 100%;
}

#banner {
	background: url(images/header.jpg) no-repeat;
	height: 243px;
	width: 100%;
}


/* Sitewide elements */

h1, h2, h3, #nav, #nav li {
    margin: 0; padding: 0;
}


h1 {
    position: absolute;
    left: 0;
    top: 0;
}

h2 {
    font-size: 14px;
    color: #cf9118;
    margin: 1em 0;
}

h3 {
    font-size: 12px;
    margin: 1em 0;
}

p {
    margin: 1em 0;
}

img {
    border: 0;
}

img.left {
	float: left;
	padding-right: 15px;
}


.readmore {
    text-align: right;
}

.hidden {
    visibility: hidden;
}

.clear {
    clear: both;
}

a {
    color: #f0b33c;
    font-weight: bold;
    text-decoration: none;
}

a:visited {
    color: #cf9118;
}

a:hover {
    text-decoration: underline;
	color: #fff;
}

table a {
    text-decoration: underline;
    font-weight: normal;
    color: #7f7c79;
}

td, th {
    font-size: 9px;
    text-align: left;
    line-height: 1.5;
}


/* Nav Buttons */
#nav {
	width: 100%;
	height: 36px;
	margin: 0;
	padding: 0;
	float: left;
}

#nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 100%;
	height: 100%;
	float: left;
}

#nav ul li {
	padding: 0px;
	margin: 0px;
	display: inline;
	width: 160px;
	height: 36px;
}

#nav div {
	height: 36px;
	float: left;
}

div.home {
	background-image: url(images/nav.png);
	background-position: 0px 0px;
	width: 160px;
}

div.home:hover {
	background-image: url(images/nav.png);
	background-position: 0px 36px;;
}

div.characters {
	background-image: url(images/nav.png);
	background-position: -160px 0px;
	width: 180px;	
}


div.characters:hover {
	background-image: url(images/nav.png);
	background-position: -160px 36px;
	
}

div.crew {
	background-image: url(images/nav.png);
	background-position: -340px 0px;
	width: 140px;
}

div.crew:hover {
	background-image: url(images/nav.png);
	background-position: -340px 36px;
}

div.press {
	background-image: url(images/nav.png);
	background-position: -480px 0px;
	width: 180px;
}

div.press:hover {
	background-image: url(images/nav.png);
	background-position: -480px 36px;
}

div.blog {
	background-image: url(images/nav.png);
	background-position: -660px 0px;
	width: 140px;
}

div.blog:hover {
	background-image: url(images/nav.png);
	background-position: -660px 36px;
}





/* Index page specific styles */

#sidebar {
    float: left;
    width: 30%;
	border: thin solid #4b4b38;
	height: 100%
}
#sidebar .content {
	width: 100%;
}

#sidebar #subscribe {
	border-bottom: thin solid #4b4b38;
}

#sidebar .content img {
    float: left;
    clear: left;
	vertical-align: middle;
	padding: 5px;
 
}
#sidebar .divider {
    height: 5px;
    width: 169px;
	float: left;
}

#sidebar .content {
	float: left;
}

.content li {
	line-height: 30px;
}

#sidebar .content p{
	overflow: hidden;
	max-height: 275px;
}

#content {
    float: right;
    width: 68%;
	border-bottom: thin solid orange;
	height: 100%;
}

#content .content {
    margin: 7px 15px 7px 17px;
}

#content .content table {
    width: 310px;
    margin-right: 0px;
}

#content .content table td,
#content .content table th {
    padding-right: 10px;
}

#content .content table td.download {
    text-align: right;
    padding-right: 0px;
}

#content .divider {
   	height: 5px;
	float: left;
}

#synopsis {
	padding: 0px;
}

#content p {
	max-height: 225px;
	overflow: hidden;
}

#subscribe {
	padding-left: 10px;
}

#subscribe ul {
	padding-left: 20px;
}

#updates ul {
	margin: 0;
	padding: 0 0 0 20px;
}

#updates li {
	line-height: 1.5;
}

#updates {
	padding-left: 10px;
}



/* Cast, Crew, Characters page specific styles */

#body div.left h2, #body div.left h3 {
	float: left;
	clear: both;
}

#body div.right h2, #body div.right h3 {
	float: right;
	clear: both;
}

#body div.right h2, #body div.left h2 {
	margin: 5px 0 0 0;
}

#body div.left img{
	float: left;
	padding: 5px 15px 5px 0px;
	clear: left;
}

#body div.right img{
	float: right;
	padding: 5px 0px 5px 15px;
	clear: right;
}

#body div.left div {
	width: 350px;
	float: right;
}

#body div.right div {
	width:350px;
	float: left;

}
#body div.right p, #body .left p {
	float: left;
	padding: 0px;
	margin: 0px;

}

/* Footer elements */

p.tiny {
	font-family: georgia;
	font-size: 10px;
}

#footerindex {
	width: 75%;
	clear: both;
	margin-left: auto;
	margin-right: auto;
	padding-top: 25px;
}

#footer {
	width: 75%;
	clear: both;
	position: relative;
	top: 25px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px;
	border-top: thin solid orange;
}

#power {color:#fff;text-align:center;}
#power a {color:#fff;}