/* This is the style sheet for the new Scott Pilgrim
by: Nadine Lessio
Site: nadinelessio.com
Date: August 2007, updated march 2009 */

@import "reset.css";

html {
	
	font: 75% "Lucida Grande", Lucida, Verdana, sans-serif;
	line-height: 17px;
	color:  #666;
	background: url(../images/siteBg.jpg) repeat-x 0 0 #00051d;
}


p {
	margin: 0 0 5px 0;
}

ul {
	list-style-type: none;
}

ul li {
	border-bottom: 1px solid #e8e8e8;
	
	padding-bottom: 5px;
}

.btn {
margin: 5px 0 0 0;
background: url(../images/goOff.gif) no-repeat 0 0;
padding: 0 5px 5px 2px;
text-align: center;
border: none;
color: #3b7b58;
}

.btn:hover {
background: url(../images/goOn.gif) no-repeat 0 0;
}

.drop {
float: left;
margin: 5px 5px 0 0;
}

.focusImg {
padding: 10px;
border: 1px solid #e8e8e8;
margin: 0 0 10px 0;
}



h1, h2, h3, h4 {
color: #666;
}

h1 {
float: left;
font-size: 2em;
margin: 0 0 0 -30px;
background: url(../images/siteH1Bg2.jpg) repeat-x 0 0 #f9f151;
padding: 10px 0 10px 30px;
width: 300px;

}


h2 {
	
	
	font-size: 1.5em;
	margin-bottom: 10px;
	
}

h3 {
	font-weight: heavy;
	font-size: 1em;
	margin-bottom: 10px;
	
}


.insideRight h2 {
border-top: 1px solid #e8e8e8;
padding-top: 5px;
}


/* navigation */


#nav li {
border: none;
float:  right;
width: 90px;

margin: 0 0 0 10px;
text-align: center;

}

#nav li a  {
	color: white;
	display: block;
	padding: 10px;
	margin: 0;
	background: url(../images/navitemBg.jpg) top left no-repeat;
	text-decoration: none;
	font: 1.3em;

	}
	
	#nav li a:hover {
	background: url(../images/navitemBg2.png) top left no-repeat;
	color: white;
	text-decoration: none;
	border:  none;
	}
	
	#nav li a:active {
	text-decoration: none;
	border:  none;
}





/*links overall*/

a img {
		text-decoration: none;
		border: 0;
	}


a {
	color: #ff4ebc;
	text-decoration: underline;
	 outline: none;

}

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



/*links small */

.small a {
	text-decoration: underline;
	color: #7e4716;
}

.small a:hover {
	color: #98602e;
}

.small a:visited {
	color: #7e4716;
}


#footer a {
	color: #fff;
	text-decoration: none;
}

#footer a:hover {
	color: #98602e;
}

#footer a:visited {
	color: #fff;
}



/* structure divs */

#wrap {
	margin: 0 auto;
	width: 910px;
	background: white;
	
}


#headWrap {
border-top: 2px solid #004f86;
width: 100%;
background: url(../images/siteHeadBg2.jpg) repeat-x 0 0 #ff17a3;
}

#header {
	height: 190px;
	width: 910px;
	margin: 0 auto;
		
}


/* these classes are applied to the header */
.ramona {
background: url(../images/headers/ramona.png) no-repeat 0 0;
}



#bodyContent {
	padding:  10px 0 10px 10px;
}

#footer {
	background: #ff17a3;
	
	clear: both;
	padding: 15px 10px 0 10px;
	height: 40px;
}

/* use theses in left hand column to make 2 columns */
#floater1 {
	width: 235px;
	margin-right: 15px;
	float: left;
}

#floater2 {
	width: 240px;
	float: left;
}


.previews {
	margin: 0 0 30px 145px;
}

.previews .dotted a img {
margin-right: 2px;
}

.previews .dotted a img:hover {
opacity:0.50;filter:alpha(opacity=50);
}

.columnRight {
width: 180px;
float: left;
margin: 0 5px 0 0;
}

.columnRightsm {
width: 125px;
float: left;

}

.columnRightlg {
width: 240px;
float: left;

}

.floatErLeft {
width: 115px;
margin: 0 10px 20px 0;
float: left;

}


.floatEr {

width: 185px;
float: left;
}

.floatErLeft img {
margin: 0 0 5px 0;
}

.floatEr img {
float: left;
margin: 0 5px 20px 0;
}

.movie, .movieFront {
background: url(../images/siteMovieBg.jpg) repeat-x 0 0 #f9f151;
margin: 0 -20px 0 0;
float: right;
width: 405px;
}

.movie .movieUnder {
background: url(../images/siteUndermovie.png) no-repeat top right white;
height: 20px;

}

.movieFront .movieUnder {
background: url(../images/siteUndermovie2.png) no-repeat top right white;
height: 20px;
}

.movie h2, .movieFront h2 {
padding: 10px 10px 0 10px;
color: black;
}

.movie p, .movieFront p {
padding: 0 10px 10px 10px;
}




.hBack {
background: url(../images/siteH1Bg.png) no-repeat left white;
margin: 0 0 10px -30px;
height: 20px;
clear: left;
}

.hBack2 {
background: url(../images/siteH1Bg.png) no-repeat left #fff;
margin: 0 0 10px -30px;
height: 20px;
clear: left;
}

#books {
background: url(../images/bookBg.jpg) repeat-x bottom left #fff;
border-bottom: 1px solid #e8e8e8;
padding: 10px 10px 0 10px;
}
#books img {
padding: 0 10px 0 0;
}

.last {
padding: 0;
}

.booksTitle {
float: left;
font-size: 2em;
margin: 0 0 0 -30px;
background: url(../images/siteH1Bg2.jpg) repeat-x 0 0 #f9f151;
;
width: 100%;
}

#books .quotes {
text-align: center;
margin-top: 5px 40px 0 40px;

}

#books .quotes p {
margin-top: 10px;
}

.floatImg {
float: left;
padding: 0 10px 0 0;
}

.floatImgR {
float: right;

}



/* this makes the right content its padding yo. */
.insideRight {
	margin: 0 10px 10px 10px;
	
	padding-bottom: 5px;
}

#frontLeft {
	width: 500px;
	clear: left;
}

#frontRight {
	float:  right;
	width:  395px;
}



.charImage {
	text-align: center;
}
.charImage img {
	padding-right: 3px;
	margin-bottom: 5px;
}






/* headers and formatting */






.quotes {
	font-size: 14px;
	font-weight: heavy;
	margin: 10px 0 20px 0;
}



.dotted {
	border-top: 1px solid #e8e8e8;
	margin-top: 10px;
	padding-top: 5px;
}

.dotted2 {
	border-top: 1px solid #e8e8e8;
	margin:  5px 10px 30px 125px;
	padding-top: 5px;
}

.dotted2 img {
	padding-left: 3px;
}

.fanArt {
border-top: 1px solid #e8e8e8;
	margin-top: 10px;
	padding-top: 5px;
}

.fanArt img {
margin: 7px 7px 0 0;
border: 1px solid #e8e8e8;
}



#prevImg {
	float: left;
	width: 145px;
	
}

/* social media */
.twitter, .myspace, .fb {
padding: 3px 0 3px 25px;
margin-left: 20px;
}

.twitter {
background: url(../images/siteTwitter.jpg) no-repeat 0 0;

}

.fb {
background: url(../images/siteFb.jpg) no-repeat 0 0;
}

.myspace {
background: url(../images/siteMyspace.jpg) no-repeat 0 0;
}


/* front page internet thing */

.frontInt, .innerInt {
background: url(../images/siteinternetsBg.jpg) bottom left repeat-x #fff;
margin: 20px 0 0 -30px;
padding: 10px;
}

.interUnder {
background: url(../images/siteunderInternets.png) no-repeat top left white;
margin: 0 0 0 -30px;
height: 20px;
}

.interUnder2 {
background: url(../images/siteunderInternets2.png) no-repeat top left white;
margin: 0 0 0 -30px;
height: 20px;
}