/* 
	The white content area is 984px wide. 
	The inner width of the content is 954px (#container).
	This leaves a 15px left and right gutter.
	The content column should be 634px.
	The left column should be 290px.
	The gutter between the columns should be 30px.
	
	NOTE: These have changed since moving col to right side.
	
*/


@import url(normalizer.css);


/* 
 * General elements 
 */

body{
	background-image:  url(../images/template_files/bg.jpg);
	background-position: center;
	background-repeat: repeat-y;
	background-color: #d8d8d8;
	font-size: 90%;
    font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
}

/* headers */
h1, h2, h3, h4, h5, h6{
	color: #141477;
}
h1{font-size: 1.6em;}
h2{font-size: 1.4em; margin-top: 1em;}
h3{font-size: 1.2em; margin-top: 1em;}
h4{font-size: 1.0em; margin-top: 1em;}
h5{font-size: 0.8em; margin-top: 1em;}
h6{font-size: 0.6em; margin-top: 1em;}

/* p, ul, ol, dl */
p, ul, ol, dl{}
p{}
ul{}
ol{}
dl{}

/* form elements */
form{}
fieldset{}
input{}
button{}
select{}
option{}
optgroup{}

/* special copy */
code{}
pre{}
blockquote{}
cite{}
address{}

/* link settings */
a{color: #141477;}
a:visited{}
a:hover{}

/* inline formatting */
em{}
strong{font-weight: bold;}
abbr{}
acronym{}

/* 
 * Groupings
 */

#container{
    position: relative;
    width: 954px;
    margin: auto;
}

#site_id{
	position: relative;
	height: 120px;
	margin-top: 15px;
}
#site_id #tagline {
	position: absolute;
	left: -5000px;
}
#site_info{
    margin: 2em 0;
    padding-top: 1em;
    border-width: 1em 0 0 0;
	border-style: solid;
	border-color: #EFEEFC;
}
#site_info p{
    margin-top: 1em;
    color: #999;
    background-color: #fff;
}
#nav{
	position: relative;

}

#nav_primary{
	display: block;
	height: 42px; /* The bg img is 42px high */
	width: 954px; /* The bg img is 954px wide */
	margin: 1em 0;
	background-image:  url(../images/template_files/nav_primary_bg.gif);
	background-repeat: no-repeat;
	background-position: top;
}
#nav_primary li {
	display: block;
	text-align: center;
	width:20%;
	float: left;
}
#nav_primary a {
	padding: 11px 0;
	display: block;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.2em;
}
#nav_primary a:hover {
	color: yellow;
}

#nav_secondary{display: none;}

#nav_utility{
	position: absolute;
	top: -50px;
	left: 645px;
}
#nav_utility input[type=submit] {
	vertical-align: bottom;
}
#nav_utility input[type=text] {
	vertical-align: bottom;
	width: 200px;
	height: 16px;
	padding: 1px 3px;
	margin: 0;
	border: 1px solid #000;
	font-size: .8em;
}
#nav_utility label {
	position: absolute;
	left: -5000em;
}
#content{
	position: relative;
}
#content p,
#content li {
    margin: 0 0 1em 0;
	line-height: 1.3;
}
#content h1+p {
	margin-top: .5em;
}
#content_primary{
    position: relative;
    width: 634px;
    left: 0;
    top: 0;
}
#content_secondary{
	display: none;
}
#content_tertiary{
	position: absolute;
	width: 290px;
	top: 0;
	left: 663px;
}

#contact {
    position: absolute;
    left: 0;
    padding: 15px;
    width: 258px;
	border: 1px solid #141477;
}
#contact h2 {
    font-size: 1em;
}
#contact input[type=text],
#contact textarea{
	border: 1px solid #000;
    width: 95%;
	margin-top: .5em;
	font-family: "Trebuchet MS";
	font-size: 0.8em;
	padding: 2px 4px;
}
#contact label {
    display: block;
    margin-top: 1em;
	position: absolute;
	left: -5000px;
	font-weight: bold;
}
.blurred {
	font-style: italic;
	color: #666;
}





/* Styles for portfolio tables */
table.project {
	border-collapse: collapse;
	border: 1px solid #333;
	margin: 0 0 3em 0;
	width: 100%;
}
table.project caption {
	font-weight: bold;
	font-size: 1.2em;
}
table.project td,
table.project th {
	border-bottom: 1px solid #333;
	padding: 5px 10px 5px 5px;
	width: 33%;
}
table.project th {
	font-weight: bold;
	background-color: #EFEEFC;
}
table.project td {
	font-size: .9em;
}
table.project td img.icon {
	margin: 0 3px 0 0;
	width: 16px;
	height: 16px;
}
table.project td img.image {
	position: relative;
	top: 1px;
	margin-right: 10px;
}

/* Styles for nav-portfolio div */
div#content_tertiary div.nav-portfolio {
	font-size: .8em;
}

div#content_tertiary div.nav-portfolio ul li {
	margin: 0.5em 0 0.5em 1em;
	padding: 0;
}


/* Styles for media divs in content_tertiary */

div.media {
	border: 1px solid #666;
	margin: 0 0 1em 0;
	padding: 3px;
	background-color: #EFEEFC;
}

div.media h3 {
	font-size: 1em;
	border-bottom: 1px solid #666;
	margin-bottom: 6px; 
}

div.media ul li {
	display: inline;
}
div.media ul li img {
	border: 1px solid #666;
	margin: 3px;
}

/* Styles for the samples on the portfolio pages */

div.sample {
	font-size: 0.9em;
}


/* Styles for previous/next navigation */

ul.prev-next {
	font-size: 1em;
	display: block;
	background-color: #EFEEFC;
	border: 1px solid #666;
	vertical-align: middle;
	text-align: center;
	padding: 5px;
	margin-bottom: 1em;
}
ul.prev-next li {
	display: inline;

}
ul.prev-next li a {
	padding: 5px;
	white-space: nowrap;
}

ul.prev-next li.previous {
	padding-right: 2em;
}

ul.prev-next li.next {
	padding-left: 2em;
}

ul.prev-next li.selectProject {
	position: relative;
}

ul.prev-next li.selectProject ul {
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
	width: 185px;
	background: #EFEEFC;
	border: 1px solid #666;
	text-align: left;
}
ul.prev-next li.selectProject ul li {
	display: inline;
	text-align: left;
	margin: 0;
	padding: 0;
}
ul.prev-next li.selectProject ul li a{
	display: block;
	padding: 3px;
	margin: 0;
}
ul.prev-next li.selectProject ul li.current a{
	text-decoration: none;
	color: #666;
}

ul.prev-next li.selectProject:hover ul {
	display: block;
}



/* Form buttons */

input#search_button,
input#send_email_button {
	font: normal .9em "Trebuchet MS", Helvetica, Arial;
	text-align: center;
	display: inline;
	padding: 0 0.5em;
}
input#send_email_button{
	display: block;
	margin: 5px 0;
}