::selection { background: #F78F1E; color: white; /* Safari */ }
::-moz-selection { background: #F78F1E; color: white; /* Firefox */ }

/* I am reseting all margins and paddings to zero since different browsers confuse the 2 */
body, div, span, p, ul, ol, li, h1, h2, h3, h4, h5, h6 { margin:0; padding:0;}

body {
	background: #747F81 url(/images/brick-bg.jpg) no-repeat fixed;
	color: #d2d2d2;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%; /* browsers use a default font-size of 16px. Using ems allows resizable text */
	line-height: 1.125em; /* 16x1.125 = 18px */
	margin: 10px 0;
	text-align: center; /* text-align center on the body and then margin: 0 auto on the childElement should center a static page in all browsers */
}

#container {
	background-color: #020202;
	margin: 0 auto;
	position:relative;
	text-align: left;
	width:800px;
		-moz-box-shadow: -2px 2px 20px #333333;
	-webkit-box-shadow: -2px 2px 20px #333333;
	/*background: #020202 url(/images/branding.png) repeat-x;*/
}

#main_nav {
	background-color: #f78f1e; /* A div was created here only to accomplish the layered orange/grey, otherwise I would have simply used the ul element */
	float: left;
	width: 100%;
}

#main_nav ul{
	background-color: #4b4b4d;
	float: right;
	padding: 3px 0 4px 0;
	text-align: right; /* Here I also thought of using padding to move the element but text-align right worked smoothly in all browsers */
	width: 771px;
}

#main_nav li { 
	border-left: 1px #c85a1f solid; /* The original page used pipes ("|"), I used this border to remove un-needed style from the content */
	display: inline; /* Setting a list to inline creates horizontal navigation */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 0 6px; /* Padding is used here to push the content away from the pipes in even increments */
	text-transform: uppercase; /* CAPSLOCK == Shouting on the internet, especially when seen out of context, uppercase is used here to keep markup clean for serps */
}

#main_nav a:link, #main_nav a:visited {
	color: #d2d2d2;
}

#main_nav li.selected { position: relative; }

#main_nav li.selected span { /* This solution can be looked at again, as I came to this late in page development, I used a span and it does add to mark-up so I will readdress in the future */
	background-image: url(../images/trig.gif);
	background-repeat: no-repeat;
	background-position: center top;
	color: #D2D2D2;
	display: block;
	left: 0; /* since the word length changes I decided to use a %, I will review this in the future */
	padding: 7px 6px 0;
	position: absolute; /* Positioning can be placed anywhere, this will be moved with reference to it's parent element */
	top: -10px;
}

html>body #main_nav li.selected span { padding: 9px 6px 0; }

#main_nav li.selected.first span {
	left: 0;
}

#main_nav a:hover, #main_nav .selected a, #initial_questions a:link, #featured_links a:link, h2 a:link { /* multiple selector for a very common style */
	color: #fff;
}

#initial_questions { /* I am more comfortable with using floats to make my main layout and like the fact that they can be adjusted easily */
	float: left;
	font-weight: bold;
	line-height: 1.75em; /* 16x1.75 = 28px */
	padding: 21px 12px 0 0;
	text-align: right;
	width:223px;
}

#initial_questions a:visited, #featured_links a:visited, h2 a:visited{ /* New to this design are visited links, I feel that it is important for the user to know where they've been */
	color: #fff;
}

#initial_questions a:hover, #featured_links a:hover, h2 a:hover { /* Similar to visited, users come to expect a visual cue that they have hovered over a link */
	border-bottom: 1px #f78f1e solid;
	color: #fff;
	padding-bottom: 2px;
}

#index_content {
	float: left;
	padding: 22px 30px 22px 18px;
	width: 515px;
}

#featured_links { /* Placement of these links was unclear on original design, can be easily adjusted */
	margin: 1em 0 0;
}

#featured_links li {
	border-left: 1px #666 solid;
	display: inline;
	font-weight: bold;
	padding: 0 .85em;
}

#featured_links li.first { /* Removes the padding that was applied in the previous rule to create a stronger left alignment in #index_content */
	padding-left: 0;
}

#content_wrapper {
	background-color: #f78f1e;
	float: left;
	width: 800px;
}

#sub_navigation {
	padding: 24px 0 0 29px;
	width: 103px;
	float: left;
}

#sub_navigation h3 {
	font-size: 12px;
	padding-bottom: 9px;
	text-transform: uppercase;
}

#sub_navigation h3 a:link, #sub_navigation h3 a:visited {
	color: #fff;
}

#sub_navigation li {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-transform: none;
}

#sub_navigation li li {
	padding-left: .8em;
}

#sub_navigation li a:link, #sub_navigation li a:visited{
	color: #000;
	display: block;
}

#sub_navigation li a.selected:link, #sub_navigation li a.selected:visited {
	color: #fff;
}
/*
#sub_navigation li a:visited {
	color: #666666;
}
*/

#sub_navigation li a:hover {
	color: #fff;
}

#general_content {
	background-color: #fff;
	color: #6d6e71;
	width: 668px;
	float: left;
}

#general_content p {
	padding: 0 20px 0 20px;
	width: 250px
}

#general_content h2 {
	color: #6d6e71;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	margin-left:20px;
}

#general_content h2.portfolio {
	color:#f78f1e;
	padding: 10px 0;
	font-size: 11px;
}

#general_content h3 {
	border-bottom: 2px solid #dddddd;
	border-top: 2px solid #dddddd;
	color: #aaaaaa;
	font-size:14px;
	padding: 8px;
	margin-left: 26px;
	text-align:center;
	width: 234px; 
}

#general_content h3 em {
	color: #fdbd77;
}

#general_content h4 {
	color: #555555;
	font-size: 12px;
	padding: 9px 20px 40px 26px;
	text-align: center;
	width: 250px;
}

#floated {
	clear: right;
	float: right;
	margin-top: 15px;
	padding-right: 25px;
	width: 327px;
}

#breadcrumbs {
	font-size: 9px;
	margin-top: 12px;
}

#breadcrumbs a:link, #breadcrumbs a:visited {
	color: #6d6e71;
	border: none;
	text-decoration:underline;
}

#portfolio_links  li{
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 3px 0 3px 26px;
}

#portfolio_links a.selected:link, #portfolio_links a.selected:visited {
	font-weight: bold;
}

#portfolio_links a:link, #portfolio_links a:visited {
	color: #000;
	display: block;
}

#portfolio_links a:hover {
	font-weight: bold;
}

.photograph {
	float: right;
}

.first_paragraph {
	margin-top: 15px;
}

.last_paragraph {
	margin-bottom: 40px;
}

.first_sentence { /*Originally wanted to use the first-line selector, but wanted to keep most of the original design */
	font-size: 1.2em;
	font-weight: bold;
}

p {
	font-size:0.75em; /* 16x0.625 = 10px */
	line-height: 1.4em;
	margin-bottom: 1.25em;
}

p a:link, p a:visited, #sitemap li a:link, #sitemap li a:visited{
	color: #f78f1e;
	text-decoration: none;
}

p a:hover, #sitemap li a:hover {
	border-bottom: 1px #f78f1e solid;
	color: #f78f1e;
	padding-bottom: 1px;
}

a { /* underlined links aren't always strong choice due to chopping of descenders, I use css borders with proper padding to replicate this in a better typographical way */
	text-decoration: none;
}

em { /* There is no CSS selector for words and since the idea is a visual emphasis I chose to use the em tag. Although this effect could have been replicated using JavaScript and a RegExp, I decided that this was a style issue, and the markup is not negatively affected, this would be something I would bring up for review */
	color: #f78f1e;
	font-style: normal;
}

a:visited em, a:hover em { /* to keep this emphasis we make sure that their is also a visited and hover state for the em tag inside of the links */
	color: #f78f1e;
}

li {
	font-family: Geneva, Arial, Helvetica, sans-serif; /* Since most of the links on the page use this font family I applied it to all lists as a default, I will readdress this later */
	font-size: .875em;
	list-style: none; /* no bullets */
}

li.first {
	border: none !important; /* I used the important tag here since I had multiple horizontal lists and the specificity wasn't high enough to affect both, this should be removed before going live */
}

h1 { /* positioning took a while due to the image having to match the colors surrounding it */
	background-image: url(../images/logo.gif);
	background-repeat:no-repeat;
	height: 89px;
	left: 44px;
	position: relative;
	top: 46px;
	width: 343px;
}

h1 a { /* Here we use the logo as a link using a background image, I decided to use a standard image replacement */
	display: block; /*block is used so the entire image can be used as a linke */
	height: 57px;
	text-indent: -9999px; /* one of my favorites, after the image is in place, take that text and toss it waaaaayyy into left field */
	width: 343px;
}

h2 {
	color: #fff;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: .875em; /*16x1.0875 = 14px */
	margin-top: .875em;
}

h5 {
	background-color: #4b4b4d;
	 /* a clear needed to be placed somewhere inside of the container div otherwise the bg wouldn't be behind the 2 floated elements above */
	float: right;
	font-size: .625em;
	font-weight: normal;
	padding:4px 20px 4px 0;
	text-align: right;
	width: 780px
}

h5 a:link {
	color: #999;
}

h5 a:visited {
	color: #f78f1e;
}

h5 a:hover { /* white needs to be placed here as opposed to the other white areas, (It's a LoVe HAte thing) ::Order is needed Link->Visited->Hover->Active/Focus:: */
	color: #fff;
}

h6 {
	clear: right;
	color: #6d6e71;
	float: right;
	font-size: 8px;
	font-weight: normal;
	margin-top: -4px;
	padding-right: 15px;
}

h6 a:link, a:visited {
  color: #646e71;
}

h6 a:hover {
	border-bottom: 1px #646e71 solid;
	padding-bottom: 1px;
}

hr { /* hr always causes me problems and I tend to keep these in the mark-up but then change them with JavaScript, this is not neccessary here */
	color:#e5e5e5 ;
}

img {
	border: 0;
}

/* These are used for the portfolio matrix images */

#portfolio {
	float: right;
	width: 361px;
	margin-top: 25px;
	margin-bottom: 65px;
}

#portfolio .image {
	float:left;
	margin: 0 9px 6px 0;
	background-color: #f78f1e; 
	width: 105px; 
	height: 105px;
}

/* Used for the Site Map page */

ul#sitemap {
	margin-left: 100px;
	margin-bottom: 50px;
}

#sitemap ul {
	margin-left: 4em;
}

#sitemap li {
	font-size: 10px;
	list-style: disc;
	padding: .25em 0;
}

#sitemap li li {
	list-style: circle;
}

#sitemap li li li {
	list-style: square;
}

#sitemap a {
	text-decoration: underline;
}

/* Used for Team links */

ul#team {
	margin-bottom: 2em;
}
ul#team li{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

ul#team a:link, ul#team a:visited {
	color: #f78f1e;
	display: block;
	padding: 2px 20px 2px 26px;
}

ul#team a:hover {
	font-weight: bold;
}

/* Testimonial page is very different structurally then other pages */

#testimonial_left, #testimonial_right {
	clear: right;
	float: left;
	margin: 0 20px 30px 26px;
	width: 275px;
}

#testimonial_left p, #testimonial_right p {
	padding: 0;
	margin-bottom: 0;
	width: auto;
}

#testimonial_left strong, #testimonial_right strong {
	display: block;
	font-style: italic;
}

#testimonial_left hr, #testimonial_right hr {
	margin: 1em 0;
}

.testimonial_qa {
	clear: right;
	float: right;
	margin-top: 27px;
	padding-top: 1em;
	padding-right: 25px;
	width: 311px;
}

#social-icons {
	height: 35px;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 75px;
}


/* =satisfaction-survey */

#general_content h2.survey {
	font-size: 1.2em;
  	margin: 1.5em 0 0;
  	padding: 0 2.2em;
  	width: auto;
}

#general_content p.survey {
  	font-size: .9em;
  	line-height: 1.4;
  	margin: 1em 0;
  	padding: 0 3em;
  	width: auto;
}

#general_content #satisfaction-survey p.survey {
  	font-size: 1em;
  	font-weight: bold;
	margin: 1em 0;
  	padding: 0 1em;
}

#satisfaction-survey {
        font-size: .9em;
  	margin: 1em auto 2em;
}

#satisfaction-survey * {
  	margin: 0;
  	padding: 0;
}


#satisfaction-survey fieldset {
  	margin: 2em 1em;
  	padding: 1em;
}

#satisfaction-survey > fieldset {
        border: none;
        margin: 0 1em;
        padding: 0 1em;
}

#satisfaction-survey legend {
	font-weight: bold;
}

#satisfaction-survey label {
  	display: block;
    padding: .25em 0;
}

#satisfaction-survey tbody label {
	padding: 0;
}

#satisfaction-survey #if-other {
	margin-top: 1em;
}

#satisfaction-survey table {
  	border-collapse: collapse;
  	border-left: 1px solid #6D6E71;
  	border-top: 1px solid #6D6E71;
  	font-size: 14px;
  	margin: 0 auto;
  	width: 95%;
}

#satisfaction-survey th, #satisfaction-survey td {
  	border-bottom: 1px solid #6D6E71;
  	border-right: 1px solid #6D6E71;
	padding: .5em;
	text-align: center;
}

#satisfaction-survey th:first-child, #satisfaction-survey td:first-child {
	text-align: left;
}

#satisfaction-survey thead tr {
	background-color: #f78f1e;
	color: #FFFFFF;
}

#satisfaction-survey tr.even {
	background-color: #FDE3C7;
}

#satisfaction-survey a.options:link, #satisfaction-survery a.options:visited {
	color: #FFFFFF;
	display: block;
}

#satisfaction-survey a.options:hover {
	cursor: help;
	color: #6D6E71;
}

#satisfaction-survey a.options:active {
	border: none;
}

label#permission {
	margin:0 1em 1em 2.25em;
	text-indent:-1.25em;
}

div#wrapper {
	margin: 0 auto;
	position: relative;
	width: 800px;
}

/* =branding color info */
/* dark-grey #222 */
/* lighter-grey #444 */

div#branding {
	-moz-box-shadow: -2px 2px 20px #333333;
	-webkit-box-shadow: -2px 2px 20px #333333;
	background: #020202 url(/images/branding.png) repeat-x;
	float: left;
	width: 800px;
}