/* -----------------------------------
layout
----------------------------------- */


html, body
{
height: 100%;
}

body
{
margin: 0;
color: #000;
background-image:url('gray.jpg'); 
font: 90%/1 "Verdana","Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}

.container
{
margin: 0 auto;
width: 800px;
height: 580px;
background: #fff;
}

/* -----------------------------------
header
----------------------------------- */

.header
{
background: #000; 
height: 150px;
width: 800px;
}

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

.header ul
{
float: right;
margin-right: 40px;
margin-top: 60px;
}

.header li
{
display: inline;
padding-right: 30px;
list-style: none;
font-weight: bold;
color: #fff; 
}

.header a:link, a:visited
{
color: #fff;
text-decoration: none;	
}

.header a:hover
{
color: #4e8fa1;
text-decoration: none;	
}

/* -----------------------------------
Hero Image and Description
----------------------------------- */

img.hero
{
	float: left; 
	margin: 30px 15px 0px 20px;
}

p.desc
{
	margin: 50px 30px 50px 20px;
	text-align: justify; 
	line-height: normal;
	
}


/* -----------------------------------
About Me
----------------------------------- */

img.chris
{
float: left; 
margin: 30px 15px 0px 20px;
border: 1px solid #999;
background-color: #FFF;
padding: 4px;
}

.let
{
float: left;
margin-left: 70px;
margin-top: 20px;		
}

.ivaa
{
float: right;
margin-right: 200px;
margin-top: -20px;	
}


/* -----------------------------------
Round Boxes
----------------------------------- */
.round
{
	float: right;
	margin-right: 80px;
	margin-top: -10px;
	background-color: #EBEBEB;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #ccc;
	padding: 10px;
	width: 300px;
} 


.round p
{
line-height: 1.5em;	
}

.round img.float
{
	float: right;
	margin-right: 10px;
	margin-top: 15px;
	margin-bottom: 15px;
}
.services2
{	
line-height: 1.5em;
text-align: justify;
margin-right: 20px; 
}

.round2
{
	float: right;
	line-height: 1.5em;
    text-align: justify; 
	font-size: 11px;
	margin-right: 20px;
	margin-top: -5px;
	background-color: #EBEBEB;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #ccc;
	padding: 10px;
	width: 450px;
} 

.round2 p
{
margin-top: 0px;
margin-bottom: 3px;
color: #4e8fa1;
font-weight: bold;
font-size: 12px;
text-align: center;
}


/* -----------------------------------
3 column list
----------------------------------- */
.triple ul
{
  width: 500px;
  overflow: hidden;

}

.triple li
{
  line-height: 1.5em;
  float: left;
  display: inline;
  width: 20%; 
}

.triple li.heading
{
margin-top: 20px;
color: #4e8fa1;
font-weight: bold;
text-decoration: underline;
}

.triple li.bottom
{
margin-bottom: 40px;
}


/* -----------------------------------
Contact Form - 
envelope icon from www.famfamfam.com
----------------------------------- */
.contact
{
	margin:0 0 10px 0;
	padding:0;
	}

p {
	margin:0 0 10px 0;
	padding:0;
	}

form {
	float: right;
	margin: 30px 50px 0 0;
	font: 12px "Verdana","Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
	background:#ebebeb;
	padding:10px 20px;
	width:330px;	
	}
	
	form ol {
		list-style:none;
		margin:0;
		padding:0;
		}
		
		form li {
			padding:6px;
			background:#e1e1e1;
			margin-bottom:1px;
			}
			
			form li#send {
				background:none;
				margin-top:6px;
				}
		
		form label {
	float:left;
	width:70px;
	text-align:right;
	margin-right:7px;
	color:#366370;
	line-height:23px; /* This will make the labels vertically centered with the inputs */
			}
			
		form input,
		form textarea {
			padding:4px;
			font-size:12px;
			border:1px solid #999999;
			width:200px;
			}
			
			form input:focus,
			form textarea:focus {
				border:1px solid #666;
				background:#e3f1f1;
				}
			
		form li#send button {
			background:#4e8fa1 url(css-form-send.gif) no-repeat 8px 50%;
			border:none;
			padding:4px 8px 4px 28px;
			border-radius:15%; /* Don't expect this to work on IE6 or 7 */
			-moz-border-radius:15%;
			-webkit-border-radius:15%;			
			color:#fff;
			margin-left:125px; /* Total width of the labels + their right margin */
			cursor:pointer;
			}
			
			form li#send button:hover { 
				background-color:#366370;
				}


/* -----------------------------------
footer
----------------------------------- */

.footer
{
position: relative;
clear: both;
color: #000;
text-align: center;
text-decoration: none;
}

.footer ul
{
margin-left: 215px;
padding: 0px 0px 3px 0px;
}

.footer li
{
	display: inline;
	margin: 0 5px 0 0;
	font-size: 10px;
	text-decoration: none;
}

.footer a:link, .footer a:visited 
{ 
color: #000;
text-decoration: none; 
}

.footer a:hover 
{ 
color: #4e8fa1;
text-decoration: underline; 
}