#container{
	margin: 0 auto;
	width: 959px;
}
body {
	margin: 0 auto;
	font-family:Century Gothic, Calibri, Verdana, Geneva, sans-serif;
	background-image:url(images/background.png);
}
#header{
	background-color:#2b2b2b;
	border:none;
	width: 959px;
	height:140px;
}
#header img{
	padding-top: 13px;
	padding-left: 50px;	
}
#logo{
	background-repeat:no-repeat;
	position: absolute;
	margin-left: 20px;
	margin-top: 20px;
}
#camera {
	position: relative;
	border: 0;
	top:-650px;
	z-index: 999;
	float: right;
	left:-50px;
	visibility: visible;
}
.clear{
	clear:both;	
}
a{
	text-decoration:none;
	color:#333;	
}
/* Super Fantastic CSS Navigation Img Rollover*/
#navigation {
	position:relative
	border-right:1px solid #999;
	width:959px;
	clear:both;
	margin-bottom:55px;
}
#navigation ul{
	margin:0;
	padding:0;
	list-style-type:none;
}
#navigation li{
	float:left;
	width:137px;
}	
#navigation a  {
	display:block;
	background:url(images/navigation.png);
	height:55px;
	text-indent:-9000px;
}
#navigation a.link1:hover {background-position:-0px -56px;}
#navigation a.link2 {background-position:-125px -0px;}
#navigation a.link2:hover {background-position:-125px -56px;}
#navigation a.link3 {background-position:-257px -0px;}
#navigation a.link3:hover{background-position:-257px -56px;}
#navigation a.link4 {background-position:-412px -0px;}
#navigation a.link4:hover {background-position:-412px -56px;}
#navigation a.link5 {background-position:-575px -0px;}
#navigation a.link5:hover {background-position:-575px -56px;}
#navigation a.link6 {background-position:-720px -0px;}
#navigation a.link6:hover {background-position:-719px -56px;}
#navigation a.link7 {background-position:-845px -0px;}
#navigation a.link7:hover {background-position:-845px -56px;}

/* Now for the broken down detailed explanation of the CSS:
    1.) The border and padding on the #navigation is simply for looks on this menu
    2.) The width on #navigation is set to the size of our whole nav menu
    3.) #navigation a lets us apply the following styles to every link within the ul
    4.) Display:block is an extremely useful property in many situations. It will change the element into a block level element, i.e. it will 
	    act like a div. We can now apply styles to a link that we couldn't have before.
    5.) Background:url(navigation.png) sets the background for each link
    6.) The height is important, otherwise the link will only be the size of the text by default. In this case, the links' width is determined 
	    by the containing ul's width.
    7.) Text-indent:-9000px moves the text within the anchor tag off of the page which allows search engines to still have something to index
    8.) Lastly, the key to this CSS strategy is changing the background-position separately for every link and its hover state. For example, 
	    #navigation a.link3:hover{background-position:-146px -94px;} tells the browser to move the background image on our 3rd link's hover 
		state 146 pixels to the left and 94 pixels up. These numbers are all determined by the size of each link, e.g. each link's background 
		position is 47 pixels higher than the one before it because that is the height of our links.

 */
 
 /* The nivoSlider */
/* Inside the Content*/
#slider_wrapper{
    height:310px; /* Change this to your images height */
}
#slider{
    position:relative
	width: 959px;
	height:310px;
	background-image: url(images/loading.gif) no-repeat 50% 50%;
}
#slider img{
	position:absolute;
	top: 0px;
	left: 0px;
	display: none;	
}
#slider img title{
	color:#FFF;	
}
#slider a{
	border: 0px;
	display: block;	
}
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#FFF;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:89;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
	color:#FF0000;
	text-decoration:none;
}
.nivo-caption a:hover{
	color:#0066CC;
	text-decoration: underline;	
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:99;
	cursor:pointer;
	background-image:url(images/arrows.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
	width:30px;
	height:30px;
	display:block;
}
a.nivo-prevNav {
	left:15px;
}
a.nivo-nextNav {
	right:15px;
	background-position:-30px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:99;
	cursor:pointer;
	float:left;
	background-image:url(images/bullets.png);
	background-repeat:no-repeat;
	width:20px;
	height:20px;
	text-indent:-9999px;
}
.nivo-controlNav{
	margin-left: 900px;
	padding-top: 285px;
}
.nivo-controlNav a.active {
	background-position:0 -22px;
}
h1{
	color:#000;
}
h2{
	font-size:12px;
	text-align:center;	
}
h3{
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 25px;
	font-weight:100;
	margin:0px auto;
	padding-left: 30px;
	padding-bottom: 10px;
}
h4{
	font-family:Segoe;
	color:#333;
}
h5{
	font-family:Century Gothic, Calibri, Verdana, Geneva, sans-serif;
	font-size: 20px;
	font-weight:900;
	margin:0px auto;
	padding-left: 30px;
}
p{
	margin:0px 15px 0px 0px;
	padding: 0px 20px 30px 20px;
	color:#333;
	font-size: 13px;
	line-height: 20px;
}
#content{
	background-color:#f3f3f3;
	color:#333;
	width:959px;
	padding-top:20px;
	padding-bottom:15px;
}
/* Home page content*/
#content_container{
	background-color:#f3f3f3;
	height:auto;
	padding-top:30px;
	padding-left: 43px;
	padding-bottom: 40px;
}
#gallery{
	width:300px;
	height: 300px;
	float:left;
}
#portfolio{
	width:300px;
	height: 300px;
	float:left;
}
#news{
	width:300px;
	height: 300px;
	float:left;
}
.header_txt{
	color:#1f3245;
	text-align:left;
	padding-top: 60px;
	padding-right: 20px;
}
.content_txt{

	color: #333;
	padding-top: 7px;
	padding-left:3px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
}
.links{
	font-family:Verdana, Geneva, sans-serif;
	color:#1f3245;
	text-decoration:none;
	font-weight:900px;;
}

/*About page content*/
#me{
	width: 959px;
	float:left;	
}
#me img {
	margin:15px 15px 15px 15px;
	float:left;
	

}
.about_title{
	text-align:right;
	font-size: 50px;
	font-weight:100;
	margin:0px auto;
	padding-top: 25px;
	padding-right: 320px;
	padding-bottom: 10px;
}
#interest{
	width: 959px;
	text-align:left;
	padding-left: 20px;
}

/*Gallery page content*/

#lightbox_container{
	width:959px;

}
.lightbox img{
	border: thin solid #ccc;
}
.paragraph_content{
	padding-left: 30px;	
	padding-bottom: 25px;
}

/*Portfolio page content*/
/***paragraph_content is in gallery also***/
#portfolio_container{
	padding-left: 25px;	
	padding-right: 25px;
}
.port_resize{
	float:left;	
	height: 200px;

	padding-top: 5px;
	padding-right:10px;
	padding-bottom:
	padding-left:opx;
	margin-right: 7px;
	margin-left: 6px;
	margin-bottom: 4px;
}
/*.port_resize{
	background-color:#FFF;
	border:thin solid #e6e5e5;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-right: 5px;
	margin-left:5px;
	float:left;
	width: 290px;
	height: 200px;
}*/
.resize_txt{
	font-size:12px;
	padding-top:5px;
	padding-left: 10px;
	color:#666;
}
.contact-form{
	float:left;
	width: 480px;
	padding-left: 15px;
	padding-bottom: 50px;
}
.port_resize img{
	margin-left: 10px;
	border: thin solid #CCC;
}
/*Contact page content*/
/***paragraph_content is in gallery also***/
.mailbox{
	position:absolute;
	padding-left:700px;
	margin-top: -400px;
}
#my_information{
	position:relative;
	padding-left: 700px;
}
.title{
	font-size:20px;
	font-weight: 900px;
	text-decoration: underline;
}
/*CREATING THE CONTACT FORM*/
#contact-form { 
	width: 480px;
	margin: 15px 0px 15px 30px;
	float:left;	
	background-color:#F2F7F9;  
	width:465px;  
	padding:20px;  
	border: 6px solid #8FB5C1;  
	-moz-border-radius:15px;  
	-webkit-border-radius:15px;  
	border-radius:15px;  
	position:relative;  
}  
#contact-form h1 {  
	font-size:42px;  
}  
#contact-form h2 {  
	margin-bottom:15px;  
	font-style:italic;  
	font-weight:normal;  
}  
#contact-form input,  
#contact-form select,  
#contact-form textarea,  
#contact-form label {  
	font-size:15px;  
	margin-bottom:2px;  
}  
#contact-form input,  
#contact-form select,  
#contact-form textarea {  
	width:450px;  
	border: 1px solid #CEE1E8;  
	margin-bottom:20px;  
	padding:4px;  
}  
#contact-form input:focus,  
#contact-form select:focus,  
#contact-form textarea:focus {  
	border: 1px solid #AFCDD8;  
	background-color: #EBF2F4;  
}  
#contact-form textarea {  
	height:150px;  
	resize: none;  
}  
#contact-form label {  
	display:block;  
}  
#contact-form .required {  
	font-weight:bold;  
	color:#F00;  
}  
#contact-form #submit-button {  
	width: 100px;  
	background-color:#333;  
	color:#FFF;  
	border:none;  
	display:block;  
	float:rightright;  
	margin-bottom:0px;  
	margin-right:6px;  
	background-color:#8FB5C1;  
	-moz-border-radius:8px;  
}  
#contact-form #submit-button:hover {  
	background-color: #A6CFDD;  
}  

#contact-form #submit-button:active {  
	position:relative;  
	top:1px;  
}  

#contact-form #loading {  
	width:32px;  
	height:32px;  
	background-image:url(../img/loading.gif);  
	display:block;  
	position:absolute;  
	rightright:130px;  
	bottombottom:16px;  
	display:none;  
}  
#errors {  
	border:solid 1px #E58E8E;  
	padding:10px;  
	margin:25px 0px;  
	display:block;  
	width:437px;  
	-webkit-border-radius:8px;  
	-moz-border-radius:8px;  
	border-radius:8px;  
	background:#FFE6E6 url(../img/cancel_48.png) no-repeat 405px center;  
	display:none;  
}  
#errors li {  
	padding:2px;  
	list-style:none;  
}  
#errors li:before {  
	content: ' - ';  
}  
#errors #info {  
	font-weight:bold;  
}  
#errors #info:before {  
	content: '';  
}  
#success {  
	border:solid 1px #83D186;  
	padding:25px 10px;  
	margin:25px 0px;  
	display:block;  
	width:437px;  
	-webkit-border-radius:8px;  
	-moz-border-radius:8px;  
	border-radius:8px;  
	background:#D3EDD3 url(../img/accepted_48.png) no-repeat 405px center;  
	font-weight:bold;  
	display:none;  
}  
#errors.visible, #success.visible {  
	display:block;  
}  
#req-field-desc {  
	font-style:italic;  
}  
/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */  
input:required, textarea:required {  
	-moz-box-shadow:none;  
	-webkit-box-shadow:none;  
	-o-box-shadow:none;  
	box-shadow:none;  
}  
/* Normalize placeholder styles */  

/* chrome, safari */  
::-webkit-input-placeholder {  
	color:#CCC;  
	font-style:italic;  
}  
/* mozilla */  
input:-moz-placeholder, textarea:-moz-placeholder {  
	color:#CCC;  
	font-style:italic;  
}  
/* ie (faux placeholder) */  
input.placeholder-text, textarea.placeholder-text  {  
	color:#CCC;  
	font-style:italic;  
}  
/*Resume page content*/
#resume{
	padding-bottom: 20px;	
}
#resume ul li{
	list-style-type: none;	
}
.job_title{
	font-weight:bold;	
}
.resume_pdf{
	padding-left: 40px;	
}
/* Begin the News*/
.blog_txt{
	padding-left: 30px;	
}

/* Begin the Footer*/
#footer {
	margin-bottom:10px;
	background-color:#2b2b2b;
	clear:both;
	font-size: 12px;
	padding-top:1px;
	width: 960px;
}
#footer ul li {
	display:inline;
}
#footer ul li a{
	color:#FFF;	
	text-decoration:none;
	padding-left:-30px;
}
#footer ul li a:hover {
	color:#999;
}
#footer p a{
	color:#FFF;	
}
#footer .footer_images{
	padding-right: 20px;	
}
#footer img{
	position:relative;
	top: -95px;
	padding-right: 5px;
	float:right;
}
.copyright{
	width: 780px;
	padding-left: 40px;
	text-align:left;
	font-size: 9px;
	color:#FFF;

}