@charset "utf-8";
/* CSS Document */

/*------------------------------------------------------------------------------------------------------------------------
***IMPORTANT: For instructions on using this css template, please refer to these two videos 
1) http://www.screencast.com/users/luke_d84/folders/Jing/media/1d9b9377-db30-4880-833c-ca9859f7e1b7
2) http://www.screencast.com/users/luke_d84/folders/Jing/media/5a720057-2efc-4ed3-ae0f-bc2e36c4dc85
3) http://www.screencast.com/users/luke_d84/folders/Jing/media/3dff65b9-ec11-4c97-9486-ef32648a1bbd

***Pleas note, if you're copying this css stylesheet to a different directory (as opposed to linking to this one on S3),
you have to provide full paths to the S3 server for ALL the background images in ALL of the below css rules
------------------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
The following are overarching styles
-----------------------------------------------------------------------*/

body {
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	background-color: #CCCCCC;
}

h1 {
	font-family: Arial, sans-serif;
	color: #b10c12;
	text-align: center;
	font-size: 44px;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
}

h2 {
	text-align: center;/*---text for h2 tags centered unless specified otherwise in the document------*/
	font-family: "Times New Roman", Times, serif;
	color: #b10c12;
	text-align: center;
	font-size: 32px;
	font-weight: lighter;
	padding: 5px 0px 5px 0px;
	margin: 0px;
}

h3 {
	width: 95px;
	height: 30px;
	color: #000000;
	text-align: left;
	font-size: 36px;
	font-weight: normal;
	background: url(images/css/step.png);
	padding: 14px 12px 10px 10px;
	margin: 15px 563px 8px -20px;
	float: left;
}

p {
	text-align: left;
	font-size: 14px;
	line-height: 18px;
}

a {
	text-decoration: none;
	outline: none;
}

a img {
	border: none;
}

ul {
	padding: 0px;
	margin: 0px;
}

li {
	font-family: "Times New Roman", Times, serif;
	background-image: url(images/css/bullet.png);
	background-repeat: no-repeat;
	background-position: left 2px;
	padding: 0px 0px 0px 32px;
	margin: 10px 0px 0px 0px;
	list-style-image: none;
	list-style-type: none;
}

ul.ul2 {
	padding: 0px;
	margin: 0px;
}

ul.ul2 li.li2 {
	background-image: url(images/css/bullet2.png);
	background-repeat: no-repeat;
	background-position: left center;
	list-style-position: outside;
	padding: 6px 0px 10px 40px;
	list-style-image: none;
	list-style-type: none;
}

/*-----------------------------------------------------------------------
The following are styles that give structure to template
-----------------------------------------------------------------------*/

.head {
	width: 820px;
	height: 14px;
	background: url(images/head.png);
	display: block;
	margin: 23px 0px 0px 0px;
}

/*Do not below rule change EVER*/
.anchor {
	height: 0px;
	width: 0px;
	float: left;
}

#seel {
	width: 270px;
	height: 196px;
	background: url(images/seel.png);
	position: absolute;
	margin: -15px 0px 0px -93px;/*Change this line to manipulate position of the seel (relative to top left corner of <div class=head>)*/
}


.paper {
	width: 660px;
	overflow: auto;
	background: url(images/paper.png) repeat-y;
	margin: 0px;
	padding: 0px 80px 20px 80px;
}

.paper2 {
	width: 820px;
	overflow: auto;
	background: url(images/paper.png) repeat-y;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

.foot {
	width: 820px;
	height: 28px;
	font-size: 12px;
	font-weight: bold;
	padding: 2px 0px 0px 0px;
	margin: 0px 0px 30px 0px;
}

.foot2 {
	width: 800px;
	height: 18px;
	color: #cccccc;
	background: #333333;
	font-size: 12px;
	font-weight: bold;
	padding: 2px 0px 0px 0px;
	margin: -2px 0px 30px 0px;
}

.foot2 a, .foot2 a:visited {
	text-decoration: none;
	outline: none;
	color: #cccccc;
}

.foot2 a:hover {
	text-decoration: none;
	outline: none;
	color: #FFFFFF;
}

/*-----------------------------------------------------------------------
The following are styles that give color to paragraph text
-----------------------------------------------------------------------*/

.dark_red {
	color: #b10c12;
}

.bright_red {
	color: #FF0000;
}

/*-----------------------------------------------------------------------
The following are additional elements for adding a bit of style
-----------------------------------------------------------------------*/

.bar {
	width: 660px;
	height: 3px;
	background: url(images/bar.png);
	float: left;
	clear: both;
}

/*---div of class=cover_box is used for the bonues concerning pre-made bonus movies---*/
.cover_box {
	
	overflow: auto;
	background: url(images/css/cover_shad.png) repeat-x bottom;
	border: solid #cccccc;
	border-width: 1px 0px 1px 0px;
	padding: 30px 35px 20px 35px;
	
}

.vid01 {
	width: 437px;
	height: 346px;
	margin: 14px 0px 10px -50px;
	padding: 0px 0px 40px 0px;
	float: left;
}

.vid02 {
	width: 308px;
	height: 348px;
	background: url(images/css/scroll1.png) no-repeat;
	margin: 14px -52px 0px 0px;
	padding: 0px 0px 50px 0px;
	float: left;
	clear: none;
}

/*---parchments are containers with parchment images in the background---*/
.parchment1 {
	width: 384px;
	height: 198px;
	background-image: url(images/css/parch1.png);
	text-align: left;
	padding: 30px 30px 10px 35px;
	margin: 35px 0px 50px 0px;
}

.parchment2 {
	width: 720px;
	height: 465px;
	background-image: url(images/css/parch2.png);
	padding: 40px;
	margin: 40px 0px 0px 0px;
}

			.parchment2Content {
				width: 273px;
				float: left;
			}

.parchment3 {
	width: 562px;
	height: 189px;
	background-image: url(images/css/parch3.png);
	text-align: left;
	padding: 35px 40px 50px 65px;
	margin: 0px 0px 30px 0px;
}

.parchment4 {
	width: 371px;
	height: 314px;
	background-image: url(images/css/parch4.png);
	padding: 320px 125px 0px 125px;
	margin: 0px 0px 50px 0px;
	
}

		.trust {
			width: 391px;
			margin: 112px 0px 0px 0px;
		}
		
.parchment5 {
	width: 801px;
	background-image: url(images/css/parch5.png);
	margin: 10px 9px 60px 10px;
	overflow: auto;
}
		/*---parchment5 needs containers to organize content---*/
		.parchment5Content1 {
			width: 360px;
			float: left;
			margin: 0px 0px 0px 130px;
		}
		
		.parchment5Content2 {
			width: 545px;
			float: left;
			margin: 0px 0px 0px 130px;
		}

/*---case studies (i.e. testimonials)---*/
#caseStudy1 {
	width: 609px;
	height: 233px;
	background-image: url(images/css/caseStudy1Bg.png);
	padding: 0px;
	margin: 40px 0px 0px 0px;
}

#caseStudy2 {
	width: 609px;
	height: 233px;
	background-image: url(images/css/caseStudy2Bg.png);
	padding: 0px;
	margin: 40px 0px 0px 0px;
}

#caseStudy3 {
	width: 609px;
	height: 233px;
	background-image: url(images/css/caseStudy3Bg.png);
	padding: 0px;
	margin: 40px 0px 0px 0px;
}

#caseStudy4 {
	width: 609px;
	height: 233px;
	background-image: url(images/css/caseStudy4Bg.png);
	padding: 0px;
	margin: 40px 0px 0px 0px;
}

/*---div of class=caseStudy is used by divs of all above caseStudy ids---*/
.caseStudy {
	width: 529px;
	background-image: url(images/css/caseStudyBg.png);
	background-position: bottom;
	padding: 0px 40px 30px 40px;
	margin: 0px 0px 50px 0px;
}

		.movieBlurb {
			width: 260px;
			height: 55px;
			text-align: left;
			margin: 133px 0px 0px 4px;
			float: left;
			
		}
		
/*---containers for movies---*/
.movie2 {
	width: 425px;
	margin: 0px;
}

.movie3 {
	width: 222px;
	height: 190px;
	margin: 17px 0px 0px 9px;
	float: left;
}

.movie4 {
	width: 437px;
	height: 311px;
	float: left;
}

.stepBox1 {
	width: 350px;
	margin: 0px 0px 0px 0px;
	float: left;
}
			
.stepBox2 {
	width: 150px;
	padding: 15px 160px 0px 0px;
	float: left;
}
			
.stepBox1 p {
	margin: 0px 0px 50px 15px;
}