/* ------------------------- This stylesheet applies to the main layout of the FOI website design ------------------------- */



/* ------------------------- Shared CSS Styling ------------------------- */
html, body
{
	margin: 0;
	padding: 0;
}


body
{
	/* --- This is so that the color can match the bottom color of the footer gradient incase the content is smaller than the window size --- */
	background-color: #5a5a5a;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}

a
{
	font-size: 11pt;
}

p
{
	color: #3e3e3e;
	font-size: 10pt;
	margin-bottom: 5px;
}

h2
{
	font-family: Myriad Pro, Arial, Helvetica, sans-serif;
	color: #505150;
	font-weight: 600;
	font-size: 14pt;
	margin-top: 50px;
}

.secondary_mod h2
{
	margin-top: 10px;
}

h3
{
	color: #a09f9f;
	font-style: italic;
	font-size: 10pt;
	font-weight: 600;
	margin-left: 10px;
	margin-top: -17px;
}

h4
{
	color: #333333;
	font-style: italic;
	font-size: 10pt;
	margin-left: 10px;
	margin-top: 0;
}

h5
{
	margin-bottom: -10px;
}

h6
{
	width: 710px;
	height: 32px;
	background-color: #0088cc;
	background-image: url('../images/images/design_header.jpg');
	background-repeat: no-repeat;
	background-position: top left;
	color: #ffffff;
	font-size: 12pt;
	font-weight: bold;
	margin: 0;
}

.h_top
{
	margin-top: 10px;
}

a:link {text-decoration: none; color: #226290;}
a:active {text-decoration: none; color: #0d3755;}
a:visited {text-decoration: none; color: #226290;}
a:hover {text-decoration: underline; color: #0d3755;}

.main_links
{
	margin: 0;
	padding: 0;
}

.main_links a:link {text-decoration: none; color: #ffffff;}
.main_links a:active {text-decoration: none; color: #0d3755;}
.main_links a:visited {text-decoration: none; color: #ffffff;}
.main_links a:hover {text-decoration: none; color: #cccccc;}

.clear
{
	clear:both;
}

#nav_down
{
	color: #002c4a;
}

img
{
	border: none;
}

ul
{
	list-style-type: none;
}

#designer
{
	color: #999999;
	font-size: 10pt;
}

.column
{	
	float: left;
	width: 350px;
	margin-right: 10px;
}

/* ------------------------- END Shared CSS Styling ------------------------- */








/* ------------------------- Header CSS Styling ------------------------- */


#header
{
	margin-left: auto;
	margin-right: auto;
	height: 152px;
	background-color: #bababb;
	background-image: url('../images/layout/header_2.jpg');
	background-repeat: no-repeat;
	background-position: top center;
	min-width: 1000px;
}

#mainnav
{
	width: 975px;
	margin-left: auto;
	margin-right: auto;
}

#mainnav ul
{
	list-style-type: none;
	padding-top: 123px;
}

#mainnav li
{
	display: inline;
	margin-left: 30px;
}


/* ------------------------- END Header CSS Styling ------------------------- */








/* ------------------------- Outer Wrapper CSS Styling - used for main window styling ------------------------- */

#outer_wrapper
{
	background-color: #1a8ece;
}

/* ------------------------- END Outer Wrapper CSS Styling ------------------------- */









/* ------------------------- Wrapper CSS Styling - used for white bg and drop shadow ------------------------- */

#wrapper
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
	background-image: url('../images/layout/wrapper_bg.jpg');
	background-repeat: repeat-y;
	background-position: top left;
}

#content
{
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}

#breadcrumbs
{
	background-color: #737070;
	background-image: url('../images/layout/breadcrumb_bg.jpg');
	background-repeat: no-repeat;
	background-position: top left;
	width: 980px;
	height: 28px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: -2px;
}

#breadcrumb_home
{
	position: absolute;
	border: 0;
	width: 30px;
	height: 28px;
}

#breadcrumbs ul
{
	list-style-type: none;
	margin-top: 0;
	padding-top: 5px;
	margin-left: -10px;
}

#breadcrumbs li
{
	background-image: url('../images/layout/breadcrumb_separation.jpg');
	background-repeat: no-repeat;
	background-position: left center;
	display: inline;
	color: #222222;
	padding-left: 20px;
}

#breadcrumbs a:link {text-decoration: none; color: #e3e3e3;}
#breadcrumbs a:active {text-decoration: none; color: #0d3755;}
#breadcrumbs a:visited {text-decoration: none; color: #e3e3e3;}
#breadcrumbs a:hover {text-decoration: none; color: #ffffff;}

/* ------------------------- END Wrapper CSS Styling ------------------------- */







/* ------------------------- Secondary CSS Styling - used for all content in secondary left column ------------------------- */

#secondary
{
	width: 215px;
	float: left;
}

#secondary ul
{
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}

/* ------------------------- END Secondary CSS Styling ------------------------- */







/* ------------------------- Main Content CSS Styling - used for all main content ------------------------- */

#main_content
{
	width: 720px;
	float: right;
}

/* ------------------------- END Main Content CSS Styling ------------------------- */







/* ------------------------- Footer CSS Styling ------------------------- */

#footer
{
	margin-left: auto;
	margin-right: auto;
	background-image: url('../images/layout/outer_wrapper_bottom.jpg');
	background-repeat: no-repeat;
	background-position: top center;
	min-width: 1000px;
	height: 33px;
	background-color: #323232;
}

#footer_linkset
{
	background-image: url('../images/layout/footer_bg_test.jpg');
	background-repeat: repeat-x;
	background-position: top left;
	background-color: #5a5a5a;
	height: 90px;
	padding-left: 40px;
}

#footer_contact
{
	margin-right: 0;
}

#footer_linkset ul
{
	float: left;
	list-style-type: none;
	margin-right: 28px;
	padding-left: 0;
	padding-top: 0;
	width: 80px;
}

#footer_linkset a
{
	font-size: 8pt;
	color: #aaaaaa;
}

#footer_linkset .top_foot
{
	font-size: 10pt;
	color: #999999;
	border-bottom: 1px solid #888888;
	font-weight: bold;
}

#footer_links
{
	width: 980px;
	margin: 0 auto;
}

#copyright
{
	clear: left;
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	padding-top: -13px;
}

#copyright p
{
	color: #999999;
	padding-bottom: 10px;
	padding-top: -13px;
}


/* ------------------------- END Footer CSS Styling ------------------------- */



















/* --- CTA Home Page Styling --- */


#cta
{
	background-color: #7f7e7e;
	background-image: url('../images/images/cta_portfolio_2.jpg');
	background-repeat: no-repeat;
	background-position: top left;
	width: 980px;
	height: 282px;
	margin: 0 auto;
	position: relative;
}

#cta_text a
{
	font-size: 13pt;
}

#cta_text
{
	width: 340px;
	position: absolute;
	top: 50px;
	left: 65px;
}

#cta_text p
{
	color: #ffffff;
}

#cta_link
{
	position: absolute;
	top: 140px;
	left: 70px;
}


/* --- END CTA Home Page Styling --- */









/* --- Begin Quick Links Home Page Styling --- */

.quicklink
{
	width: 238px;
	border-right: 1px solid #c7c6c6;
	font-size: 12pt;
	margin-bottom: 40px;
	float: left;
}

.quicklink p, .quicklink a
{
	padding-left: 80px;
	padding-right: 10px;
}

#money
{
	background: #ffffff url("../images/images/icons_money.jpg") no-repeat center left;
}

#forms
{
	background: #ffffff url("../images/images/icons_form.jpg") no-repeat center left;
}

#contact
{
	background: #ffffff url("../images/images/icons_iphone.jpg") no-repeat center left;
	border-right: none;
}

#catalog
{
	background: #ffffff url("../images/images/icons_book.jpg") no-repeat center left;
	clear: left;
}

#testimonials
{
	background: #ffffff url("../images/images/icons_notepad.jpg") no-repeat center left;
}

#plaid
{
	background: #ffffff url("../images/images/icons_plaid.jpg") no-repeat center left;
	border-right: none;
}



/* --- END Quick Links Home Page Styling --- */










/* --- Featured Work Home Page Styling --- */


/* --- END Featured Work Home Page Styling --- */






/* --- FAQ Page Styling --- */
.answer
{
	font-weight: bold;
	font-size: 11pt;
}

/* --- END FAQ Page Styling --- */








/* --- Catalog Page Styling --- */

#screenshot_pic a
{
	text-decoration: none;
}

#screenshot_pic
{
	margin: 0 auto;
	text-align: center;
}
	


/* --- END Catalog Page Styling --- */







/* --- Contact Page Styling --- */

#contact_info ul
{
	margin: 0;
	padding: 0;
}

#contact_info li
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#map
{
	width: 300px;
	margin-left: 10px;
}

/* --- END Contact Page Styling --- */


/* --- Styling for Forms on Contact and Pricing Page --- */

.asterisk
{
	color: #cc0000;
	font-size: 10pt;
}

#contact_form label, #quote_form label
{
	float: left;
	width: 100px;
	clear: left;
	margin-bottom: 15px;
}

#contact_form select, #quote_form select
{
	float: left;
	margin-bottom: 15px;
	width: 157px;
}


#contact_form input, #quote_form input
{
	float: left;
	width: 200px;
	margin-bottom: 15px;
}

#contact_form textarea, #quote_form textarea
{
	float: left;
	width: 203px;
	margin-bottom: 10px;
}

#contact_form #submit, #quote_form #submit
{
	width: 80px;
}

#contact_form fieldset, #quote_form fieldset
{
	border: none;
}

#quote_form .column
{
	margin-right: 0;
	width: 345px;
}

#form_col_two input
{
	width: 150px;
}

#form_col_two label
{
	width: 160px;
}

#form_col_two #submit
{
	margin-top: 10px;
	clear: left;
}

#form_col_two select
{
	float: left;
}

.hint
{
	font-size: 10pt;
	color: #777777;
}


/* --- END Styling for Forms on Contact and Pricing Page --- */












