/* 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Title : Portfolio Layout #10
Author : Richard Carpenter 
URL : www.hv-designs.co.uk 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
*/


/*MAIN DOCUMENT STYLES*/

*{
	padding:0;
	margin:0;
}

body {
	font-family: Arial, Helvetica, sans-serif; /*fonts for the main document*/
	font-size: 12px; /*font size for the main document*/
	color: #484941; /*font color for the main document*/
	background-color: #cccccc; /*background color*/
	background-image: url(images/bg.png); /*our background image*/
	background-repeat: repeat-x; /*background image repeated horizontally*/
}


/*HEADERS*/

h1 {
	color: #8d8d8d; /*color of text*/
	font-size: 30px; /*font size*/
	line-height: normal; /*resets line height to normal*/
}


/*CONTAINER STYLES*/

#container {
	width: 800px; /*the bottom margin is the negative value of the footer's height*/
	margin: auto; /*centers our content*/
}

#head_wrap {
	height: 90px; /*head wrap will be 90 px high*/
	width: 800px; /*head wrap will be 800 px wide*/
	margin-bottom: 20px; /*margin at the bottom will be 20px*/
	margin-left: 47px; /*margin left*/
}


/*LOGO STYLES*/

#logo {
	float: left; /*floats the logo to the left of our container*/
	height: 90px; /*height of our logo image*/
	width: 342px; /*width of our logo image*/
	background-image: url(images/logo.png); /*our logo image set as a background*/
	background-repeat: no-repeat; /*logo image wont repeat*/
}

#logo h1 {
	text-transform: uppercase; /*transforms text into capital letters*/
	font-size: 30px; /*font size*/
	font-weight: bold; /*font weight*/
	margin-top: 15px; /*margin above the text*/
	margin-left: 40px;
}

#logo p {
	font-size: 12px; /*slogan font size*/
	font-weight: bold; /*slogan bold*/
	float: right; /*floats slogan to the right*/
	margin-right: 50px; /*margin right side of the slogan*/
}


/*NAVIGATION STYLES*/

#navigation {
	float: right; /*floats navigation to the right of the container*/
	margin-top: 10px; /*places a top margin*/
	margin-right: 52px;
	}


.nav_links ul {
	list-style:none; /*removes bullet points from a list*/
	display: inline; /*displays links inline*/
}

.nav_links li {
	list-style:none; /*removes bullet points from a list*/
	display: inline; /*displays links inline*/
}

.nav_links a {
	padding-right: 33px; /*each links will have 50px padding on the left*/
	text-decoration: none; /*removes link underscore*/
	text-transform: uppercase; /*all links will be in capitals*/
	color: #8d8d8d; /*color of the link*/
	font-weight: bold; /*makes links in bold*/
}

.nav_links a:hover {
	color: #0099FF; /*color of the links on mouseover*/
}


/*MAIN CONTENT STYLES*/

.content {
float: left;
width: 710px;
margin-left: 50px;
padding: 0 0;
background-color: #F7F7F7;
}


.content_thumb {
	height: 236px; /*height of our thumbnail*/
	width: 391px; /*width of our thumbnail*/
	float: left; /*floats our thumbnail to the left of our content box*/
	margin-top: 17px; /*margin of 17px*/
	margin-bottom: 17px; /*margin of 17px*/
	margin-left: 17px; /*margin of 17px*/
}

.content_desc {
	float: right; /*floats description text to the right*/
	margin-top: 17px; /*description text has a top margin*/
	margin-right: 15px; /*description text has a right margin*/
	margin-left: 5px; /*description text has a left margin*/
	line-height: 20px; /*description text has a line height of 20px to space out the paragraph*/
	text-align: justify; /*description text is justifyed for nice clean columns*/
	overflow: hidden; /*text that overflow the box will be hidden*/
	height: 200px; /*fixed height of 200px*/
	width: 278px; /*fixed width of 278px*/
}

.content_footer {
	float: left; /*content footer text is floated left*/
	width: 278px; /*has a fixed width of 278px*/
	margin-right: 15px; /*has a right margin*/
	margin-left: 5px; /*has a left margin*/
	margin-top: 3px; /*has a top margin*/
}

.content_footer h1{
	font-size: 12px; /*content footer text has a font size of 12px*/
}

.content_footer_col2 {
	color: #0099FF /*content footer text color two (the blue text)*/
}


/*FOOTER STYLES*/

#footer {
	background-image: url(images/footer_bg.png); /*footer background image*/
	background-repeat: repeat-x; /*background image repeats horizontally*/
	height: 32px; /*height of footer is 32px same as our image*/
	clear: both; /*clear the floats left and right*/
	margin-top: 50px; /*has a top margin of 50px*/
}

#footer p {
	line-height: 30px; /*line height for footer text is 30px*/
	float: right; /*floats text right of the screen*/
	margin-right: 20px; /*pushes text 20px inwards from the right*/
}