/* ZERO OUT GLOBAL ELEMENTS --------------------------------- */
/* --------------------------------------------------------- */

body, h1, h2, h3, h4, p, ul, li, form, img {
	margin: 0; /* Removes default the margin that some browsers add. */
	padding: 0; /* Removes default the padding that some browsers add. */
	border: 0; /* Removes any default border that might appear around elements such as images used for links. */
}

/* SET THE BODY STYLES ------------------------------------- */
/* --------------------------------------------------------- */

body  {
	font: 100% Arial, Helvetica, sans-serif; /* Sets the default size of the text to 100% of the user's default. Also sets the font families to useon the text throughout the page. */
	background: #606E6F url(images/body_header_bg.jpg) repeat-x; /* Sets the body background image to tile across the x-axis of the entire page. Also sets the background color. */
	color: #000;  /* Sets the default color of the text. */
	margin-top: 68px; /* Works with fixed header height; must be tweaked for different header heights */
}

/* STYLE THE SKIP NAVIGATION LINK --------------------------- */
/* --------------------------------------------------------- */

#skip {
	position: absolute; /* Sets the div to be positioned in a precise spot in relation to its nearest postioned ancestor, or barring that, the body. Also removes it from the flow, so it will not push down the header image. */
	top: -10000px; /* Places the div off screen by giving it a negative top coordinate. */
}
	
/* STYLE THE MAIN WRAPPER DIV ------------------------------- */
/* --------------------------------------------------------- */

#container {
	background: #fff url(images/wrapper_bg.jpg) repeat-y right top; /* Sets the background color of the wrapper to white and tiles its background image on the y-axis. It aligns the background image to the right so that no matter how wide the content region is, the rounded corners appear on the right side of the layout. */
	min-width: 770px; /* Sets the layout to a minimum width that will fit into most users' browser windows. */
	max-width: 970px; /* Sets a maximum width so that the lines in the content column do not get too long for comfortable reading. */
	padding-top: 1px; /* Added to prevent the content h2 top margin from escaping. */
	margin-top: 0px;
} 

/* STYLE THE HEADER DIV ------------------------------------ */
/* --------------------------------------------------------- */

#header {
	background: url(images/body_header_bg.jpg) repeat-x; /* Tiles the body_header_bg graphic on the x-axis of the header div so that it seamlessly blends into the same image that tiles on the body. */
	position: fixed; /* This fixes the header in the window at all times for IE7 and other browsers, but not IE6 and lower. */
	width: 100%; /* Must have a width or the positioning will cause shrink-to-fit behavior. */
	top: 0; /* This prevents top margin issues in Firefox. */
} 

#header h1 span {
	position: absolute; /* Puts the text within the h1 way off screen so that visual users do not see it. */
	top: -10000px; /* Places the div off screen by giving it a negative top coordinate. */
}

/* STYLE THE SIDEBAR DIV ---------------------------------*/
/* --------------------------------------------------------- */

 #sidebar {
	float: right; /* Floats the sidebar div to the right of content div. */
	width: 237px;
}

#sidebar ul {
	background: url(images/ul_bg.jpg) no-repeat right bottom; /* Places a non repeating rounded corner background image at the bottom of the sidebar list that holds the site navigation. */
	padding-bottom: 20px; /* Pads the bottom of the ul so that the other content below it has breathing room. */
}

#sidebar li {
	list-style: none; /* Removes the bullet from the list items. */
	margin-bottom: 5px; /* Adds 5 pixels of space under each list item. */
	margin-left: 15px; /* Adds 10 pixels of space to the left of the links in the list items so that they align with other text in the sidebar region. */
}

 #sidebar h3,  #sidebar h4, #sidebar p {
	color: #fff; /* Sets the text color in the sidebar to white. */
	margin: 10px 20px 7px; /* Sets the margins to 20 pixels for the right and left, 10 pixels to the top, and 7 pixels for the bottom of text in the sidebar. */	
}

#sidebar h4 {
	background: #525E61 url(images/info_bg.jpg) no-repeat left center; /* Places a non repeating info icon on the left, center background area of the h4 text.*/
	padding-left: 25px; /* Gives it 25 pixels of padding so that the text starts to the right of the icon. */
	font-size: 90%; /* Sets the font size to 90% of the user's browser preference. */
	font-weight: normal; /* Removes the default bolding from the h4 text. */
	margin-bottom: 3px; /* After having earlier zeroed out the h4, this adds 3 pixels of margin space to the bottom in all browsers. */
}

#sidebar h3 {
	font-weight: normal; /* Removes the default bolding from the h3 text. */
	background: #525E61; /* Provides a background color that contrasts with the white text so that if the background image doesn't load, users can still read the text. */
}

#sidebar p {
	font-size: 75%; /* Sets the font size to 75% of the user's browser preference. */
	margin-right: 15px; /* Puts 15 pixels of margin space to the right of sidebar paragraphs so that it clears the white border of the graphic. */
	background: #525E61; /* Provides a background color that contrasts with the white text so that if the background image doesn't load, users can still read the text. */
}

#sidebar li span {
	position: absolute; /* Puts the text within the span way off screen so that visual users to not see it. */
	top: -10000px; /* Places the div off screen by giving it a negative top coordinate. */
}

#sidebar form {
	width: 200px; /* Sets the width of the form to 200 pixels so that it fits comfortably within the sidebar region. */
	margin-left: 20px; /* Sets 20 pixels of left margin space so that the form aligns with other sidebar elements. */
	margin-top: 10px; /* Sets 10 pixels of top margin space to add breathing room between the form and elements above it. */
}

#sidebar label {
	color: #fff; /* Sets the label color to white. */
	display: block; /* Puts the label on its own line above its textfield. */
	font-size: 90%; /* Sets the font size to 90% of the user's browser preference. */
	background: #525E61 url(images/search_icon.jpg) no-repeat; /* Sets the magnifying glass icon as the background image of the label text. */
	padding-left: 25px; /* Pads the label so that the text starts after the icon. */
	padding-bottom: 5px; /* Pads the bottom of the label so that there is breathing room between it and the textfield. */
}

.go-button {
	background: #3E9EB9; /* Sets the background color of the go button to a medium blue.  */
	color: #fff; /* Sets the GO text to white. */
	border: 1px solid #fff; /* Places a white, 1 pixel, solid border around the GO button. */
	margin-left: 5px; /* Adds a 5 pixel left margin so that there is space between the GO button and the text field to its left. */
}

.searchwidth {
	width: 125px; /* Sets the width of the textfield to 125 pixels so that there is room for a GO button next to it. */
	border: 1px solid #333; /* Places a solid, 1 pixel, dark gray border around the search input element. */
	background: #ECECEC; /* Places a light gray background color on the text field. */
}

/* STYLE THE MAINCONTENT DIV ---------------------------------*/
/* --------------------------------------------------------- */

#mainContent {
	margin: 0 237px 0 10px; /* Sets the margins for the content region, most notably carving out a 237 pixel right margin for the sidebar. */
} 

#mainContent p {
	font-size: 85%; /* Sets the font size to 85% of the user's browser preference. */
	line-height: 1.4; /* Places space, or leading, between lines of text. Using no unit of measurement prevents line-height bugs that occur in some situations. */
	margin: 0 20px 8px 10px; /* Sets margins around paragraph text. */
}

#mainContent h3 {
	font-size: 120%; /* Sets the font size to 120% of the user's browser preference. */
	color: #333; /* Sets the color of h3 text within the mainContent div to dark gray. */
	font-weight: normal; /* Removes the default bolding from h3 text. */
	margin-bottom: 3px; /* Puts back a set amount of margin space under the h3 text in the mainContent div. */
	margin-left: 10px; /* Adds 10 pixels of left space to the mainContent h3 so that it aligns neatly with other div content. */
}

#mainContent h2 {
	font-size: 120%; /* Sets the font size to 120% of the user's browser preference. */
	color: #333; /* Sets the color of h2 text within the mainContent div to dark gray. */
	font-weight: normal; /* Removes the default bolding from h3 text. */
	background: url(images/heading2_bg.jpg) no-repeat left center; /* Adds the decorative image to the left center background of the mainContent h2 text. */
	padding-left: 20px; /* Pads the left side of the h2 by 20 pixels so that the text starts to the right of the decorative image. */
	margin-top: 10px; /* Adds space above the h2 so that there is breathing room between it and the header. */
	margin-bottom: 7px; /* Adds space to the bottom of the h2 so that there is breathing room between it and the paragraphs beneath it. */
	margin-left: 10px; /* Adds 10 pixels of left margin space to the h2 so that it aligns neatly with other mainContent elements. */
}

/* STYLE THE FOOTER DIV ------------------------------------ */
/* --------------------------------------------------------- */

#footer_wrapper {
	background: url(images/footer_wrapper_bg.jpg) repeat-x; /* Tiles the footer wrapper image across the footer region. */
	height: 77px; /* Sets the height of the footer wrapper to the same height as the footer background tile. */
	position: relative; /* Set to relative so that the absolutely positioned left and right content gets its starting point from the footer region. */
	min-width: 770px; /* Sets a minimum width for the layout that matches that of the container div. */
	max-width: 970px; /* Sets a maximum width for the layout that matches that of the container div. */
} 

 #footer {
	padding: 50px 10px; /* Pads the footer so that the content falls in the right place within the footer background image. */
	background:url(images/footer_bg.jpg) no-repeat right top; /* Places the footer image with the curved edge at the right of the footer region. */
} 

 #footer p {
	font-size: 75%; /* Sets the font size to 75% of the user's browser preference. */
	color: #fff; /* Sets the color of footer paragraph text to white. */
}

/* CLASSES FOR ALIGNING ELEMENTS LEFT AND RIGHT IN A DIV -------- */
/* --------------------------------------------------------- */

.left-element {
	position: absolute; /* Takes the element out of the flow and sets it at precise coordinates in relation to the footer div. */
	left: 20px; /* Moves the left element 20 pixels from the edge of the layout. */
	width: 50%; /* Makes the left element half the width of the footer region. */
   }

.right-element {
	position: absolute; /* Takes the element out of the flow and sets it at precise coordinates in relation to the footer div. */
	right: 30px; /* Moves the right element 30 pixels from the right edge of the layout. */
	width: 50%; /* Makes the left element half the width of the footer region. */
	text-align: right; /* Aligns the right-element text to the right of the footer. */
   }
   
#footer .right-element a {
	color: #333; /* Sets the color of the back to top link to gray. */
	text-decoration: none; /* Removes the default underline from the link. */
}

/* CLASSES FOR IMAGES AND CLEARING FLOATS -------- */
/* --------------------------------------------------------- */

.fltrt { 
	float: right; /* Generic class to use for floating images to the right. */
	margin-left: 8px; /* Adds 8 pixels of space on the left side of the image so that the text doesn't touch it. */
}
.fltlft { 
	float: left; /* Generic class to use for floating images to the left. */
	margin-right: 8px; /* Adds 8 pixels of space on the right side of the image so that the text doesn't touch it. */
}

clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	font-size: 1px; /* Sets the font size to 1 pixel.*/
	line-height: 0; /* Sets line-height to 0 -font and line-height; even if not explicitly on the page, they might add dimension to the clearing element rather than make it larely invisible */
	clear: both; /* Keeps floated divs from draping over objects beneath them. */
	height: 0; /* Makes sure the clearing element has no height */
}

#portfolio_frontpage {
	/* background-color: #94C7DE; */
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 30px;
	padding-top: 10px;
	padding-bottom: 3px;
}

#portfolio_frontpage img{
	/* padding-right: 15px; */
	margin-right: 10px;
	border: 1px solid #006699;
}

.portfolio_client_site{
	margin-right: 30px;
	
}

.portfolio_client_site img{
	float: right;
	margin-left: 10px;
	border: 1px solid #006699;
}