body div, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0px; padding: 0px; border: 0px;
}
/*removes all browser defaults */

.clear:after {
	content: ""; display: block; clear: both;
}
.clear { zoom: 1; }
/* cross browser float clearing solution */

body {
	font-family: Arial, Helvetica, sans-serif;
	display: block; width: 100%; height: 746px; float: left; margin:0 auto;
	background: #64516d  url(/images/bg_stretch.jpg); repeat-x; /*margin: 0 auto;*/ width:100%;
}


.img-right {
	padding-left:100px;

}


#container {
	/*width: 1003px;*/ width:100%; margin: 0 auto;
background: #64516d url(/images/content_stretch2.jpg) repeat-y; margin: 0 auto;
}

#header {
	/*height: 74px;*/ height: 746px; padding: 0 0 0 0;
background: #64516d  url(/images/bg_stretch.jpg); repeat-x;
}
/* height and top padding of header */

#header h1 a {
	display: block; width: 1003px; height: 746px; float: left; margin:0 auto;
	background: url(../images/banner3.jpg) no-repeat; text-indent: -9999px;
}
/* The anchor is first changed from its default settings 
as an inline element to a block element, which allows a 
width and height to be specified to match the logo image 
file dimensions. The element is then floated so that the 
navigation will sit next to it, and the image background 
file is attached. Finally the original link text is shifted out of 
the way with a large negative text indent. */

#navigation ul#nav {
	margin: 0;  position: absolute;
  	top: 10px;  padding-left:65px;  /*width: 100%;*/ width:800px;
	list-style:none;
}

	#navigation ul#nav li {
	  float: left; padding: 0 3px 0 0; margin: 0 0 0 0;
	}
	#navigation ul#nav li: first-child { background: none; }

	#navigation ul#nav li a {
	font-size: 16px; color: #734d9b; text-decoration: none;
	}
	  #navigation ul#nav li a:hover, #navigation ul#nav li a.active {
	    color: #fff; text-decoration: underline;
		}

	#navigation p {
	  color:#fff;
	  display:inline;
		}

/* The code then fleshes out the navigation list, starting by removing the default bullet points, floating it to the side and shifting into place with a little margin. Each individual list 
item is then floated to the left and given a bunch of margin and padding to space them out. Finally the links are styled with the specific font size and colour for the normal and hover states.
*/



#top-content-holder {
	background-image:url(images/top-body.jpg); /* top slice of background banner */
	/*height:281px;*/ /* height of image */
	background-repeat:no-repeat;
	width:835px;
}

#top-content { /* will be social media */
	float:left;
	padding-top:15px;
	/*margin:0 0 0 65px;*/
	width:60px;
	padding-left:60px;
}

#sidebar { /* video */
	float:right;
	padding-top:15px;
	margin:0 78px 0 0;
	/*margin-left:-100px;*/
	width:625px;
}



#video {
	margin: 0;  position: absolute;
  top: 46px; width: 620px;
}

#under-video {
margin:0 auto; position:absolute; top: 482px; /*width: 1200px;*/ width:695px;
  /*padding-left:50px;*/
}

#social-media {
	/*margin: 0;  position: absolute;*/  float:left;
  top: 572px;  width: 200px; padding-top:10px;
}

#quotes {
	/*margin: 0;  position: absolute;*/ float: right;
  top: 590px; width: 520px; padding-top:0px;
  color: #b718ba;
}

#quotes p {
  font-size:10px;
  color: #fff;
  display:inline;
}

#content {
	margin: 0 0 0 0; padding-top: 0px;
	margin-left: 65px; width:750px;
}

#content p {
	color: #3d3d3d; font-size: 14px; line-height: 18px; margin: 0 0 20px 0;
}

	#content a {
		color: #7b7ba0; font-eight: strong; text-decoration: none;
	}
		#content a:hover { color: #3f3f69; text-decoration: underline; }

#content #main {
	width: 470px; float: left; margin: 0 40px 0 0;
}
/* The main content div is then floated to the left and given the width from the Photoshop grid design. */

	#content #main h3 {
		color: #000; font-size: 14px; font-weight: bold; line-height: 28px;
		margin: 0 0 5px 0;
	}

/* The latest news lists are also floated to the left to
 allow them to display side by side. They are each given a width
 of half the parent container, minus the amount of padding on the
 right to accommodate the box model. */

#content #side {
	width: 243px; float: left; margin: 0 0 0 -10px;
	background: url(/images/sidebar-top.jpg) repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
}	

#content #side p {
	color: #fff;
}

/* The sidebar is then styled to float next to the main content, and is given the background image we exported earlier. The child featured-project div then comes in handy to attach the lower segment of this graphic.
The content of the sidebar is then styled with the relevant colours and sizes. The ‘See more work’ link is then replaced with the button graphic using the image replacement technique. To give visual feedback the background image is set to bottom on hover, to display the adjusted version of the sprite image that contains the depressed effect. */

#footer-holder {
	width: 100%; margin: 0 auto;
background: #64516d url(/images/footer.png) repeat-x; margin: 0 auto;
}

#footer-container {
		/*width: 1144px;*/ width:100%; height: 215px; margin: 0 auto;
		background: url(/images/footer_bg2.jpg) no-repeat;
}

	#footer {
	width: 770px; height: 149px; margin-left:65px;
		background: url(/images/copyright.png) no-repeat;
		font-size: 20px; color: #fff; font-weight: normal;
	}

	  #footer h6 { position:absolute; 
		padding-left:80px;  width: 600px; margin-top: 66px;
		width: 770px; height: 149px;
		font-size: 20px; color: #fff; font-weight: normal;
	  }
	  #footer p {
		font-size: 14px; color: #767676; line-height: 18px;
	  }
	  #footer a {
	  	color: #fff; text-decoration: none;
	  }
		#footer a:hover { color: #000; text-decoration: underline; }


#fnavigation ul#fnav {
	margin: 0;  position: absolute;
  	margin-bottom: 0px; padding-left:65px;  width: 800px; margin-top:25px;
	list-style:none;
}

	#fnavigation ul#fnav li {
	  float: left; padding: 0 3px 0 0; margin: 0 0 0 0;
	}
	#fnavigation ul#fnav li: first-child { background: none; }

	#fnavigation ul#fnav li a {
	  font-size: 16px; color: #ce83d6; text-decoration: none;
	}
	#fnavigation ul#fnav li a:hover, #navigation ul#fnav li a.active {
	  color: #fff; text-decoration: underline;
		}
	#fnavigation p {
	  color:#fff;
	  display:inline;
		}







#facebook
{
  display: block;
  width: 55px;
  height: 55px;
  background: url("images/facebook.png") no-repeat 0 0;

}

#facebook:hover
{ 
  background-position: 0 -55px;
}

#facebook span
{
  display: none;
}

#myspace
{
  display: block;
  width: 55px;
  height: 55px;
  background: url("images/myspace.png") no-repeat 0 0;

}

#myspace:hover
{ 
  background-position: 0 -55px;
}

#myspace span
{
  display: none;
}


#twitter
{
  display: block;
  width: 55px;
  height: 55px;
  background: url("images/twitter.png") no-repeat 0 0;

}

#twitter:hover
{ 
  background-position: 0 -55px;
}

#twitter span
{
  display: none;
}


#youtube
{
  display: block;
  width: 55px;
  height: 55px;
  background: url("images/youtube.png") no-repeat 0 0;
}

#youtube:hover
{ 
  background-position: 0 -55px;
}

#youtube span
{
  display: none;
}



input.textinput
{
   margin:2px;
}

input.btn {   
   color:#000;   
   font: bold 84% 'trebuchet ms',helvetica,sans-serif;   
   background-color:#9d18ba;   
   border: 1px solid;   
   border-color: #000;   
   filter:progid:DXImageTransform.Microsoft.Gradient   
   (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#618fa2');  
   margin-top:2px; 
}