@charset "UTF-8";
/* CSS Document */

@import "reset.css";

/*-----------------GENERAL STYLES-----------------*/ 

body {
	/*font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;*/
	font-family: Tahoma, Geneva, sans-serif;
	background-image: url(../images/global/main-bg.jpg);
	background-repeat: repeat-x;
	background-color: #FFF;
}

.wrap {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

.container_12 {
	width: 940px;
	display: inline;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

.container_12 .grid_4 {
	width: 300px;
	display: inline;
	float: right;
	/*margin-left: 10px;*/
	margin-right: 10px;/*Causes double-margin bug?*/
}

.container_12 .grid_8 {
	width: 620px;
	display: inline;
	float: left;
	/*margin-left: 10px;*/
	/*margin-right: 10px;*/
}

html body div.clear,
html body span.clear {
  background: none;
  border: 0;
  clear: both;
  display: block;
  float: none;
  font-size: 0;
  margin: 0;
  padding: 0;
  position: static;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}


/*---------------------HEADER---------------------*/ 

#header {
	height: 134px;
	margin-left: 10px;
	margin-right: 10px;
}

#header .container_12 {
	width: 940px;
	display: inline;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

#header h1 {
	float: left;
	background: url(../images/SI-logo1.jpg) no-repeat;
	width: 420px;
	height: 56px;
	text-indent: -9999px;
	margin-top: 30px;
	margin-bottom: 0;
}

#header #nav {
	float: right;
	margin-top: 40px;
	margin-bottom: 0;
	margin-left: 0;
	border-bottom-color:#000;
	overflow: hidden; /*If there was text here, this would keep text from overflowing the box.*/
}

#header #nav li {
	float: left;
	/*font-size: 16px;*/ /*not needed if there is no text*/
	list-style: none; /*removes ident & bullets on list */
	width: 60px;
	height: 64px;
	background-repeat: no-repeat;
	background-position: center top;
}

#header #nav a {
	height: 64px;
	border-bottom: none;
	display: block; /*Changes display so that the graphic acts like a paragraph of block-level element. Used here because this hasn't been set up in a <div>?*/
}

#header #nav a.homeLink {
	background-image: url(../images/nav/home2.jpg);
	background-repeat: no-repeat;
	background-position: 0 0px; /*sets bg of links*/
}

#header #nav a.homeLink:hover {
	background-position: 0px -64px; /*makes text inside button bold, changes bg color, moves icon*/
}

#header #nav a.aboutLink {
	background-image: url(../images/nav/abt2.jpg);
	background-repeat: no-repeat;
	background-position: 0 0px; /*sets bg of links*/
}

#header #nav a.aboutLink:hover {
	background-position: 0px -64px; /*makes text inside button bold, changes bg color, moves icon*/
}

#header #nav a.galleryLink {
	background-image: url(../images/nav/galry2.jpg);
	background-repeat: no-repeat;
	background-position: 0 0px; /*sets bg of links*/
}

#header #nav a.galleryLink:hover {
	background-position: 0px -64px; /*makes text inside button bold, changes bg color, moves icon*/
}

#header #nav a.servicesLink {
	background-image: url(../images/nav/serv2.jpg);
	background-repeat: no-repeat;
	background-position: 0 0px; /*sets bg of links*/
}

#header #nav a.servicesLink:hover {
	background-position: 0px -64px; /*makes text inside button bold, changes bg color, moves icon*/
}

#header #nav a.contactLink {
	background-image: url(../images/nav/mail2.jpg);
	background-repeat: no-repeat;
	background-position: 0 0px; /*sets bg of links*/
}

#header #nav a.contactLink:hover {
	background-position: 0px -64px; /*makes text inside button bold, changes bg color, moves icon*/
}

#home #nav a.homeLink {
	 background-position: 0px -64px; /*moves icon if user is on the specified page*/
}

#about #nav a.aboutLink {
	 background-position: 0px -64px; /*moves icon if user is on the specified page*/
}

#gallery #nav a.galleryLink {
	 background-position: 0px -64px; /*moves icon if user is on the specified page*/
}

#services #nav a.servicesLink {
	 background-position: 0px -64px; /*moves icon if user is on the specified page*/
}

#contact #nav a.contactLink {
	 background-position: 0px -64px; /*moves icon*/
}

/*----------------- General Tools-----------------*/ 

.horizontal-line {
	background: url(../images/global/dotspacer.png);
	background-repeat: repeat-x;
	width: 930px;
	height: 5px;
	}

/*------------------------------------------------HOME PAGE---------------------------------------*/

/*------------SUBTITLE SECTION------------*/

#subtitle {
	margin-top: 20px;
	overflow: hidden;
}

#subtitle h2 {
	background: url(../images/home/subtitle1.jpg) no-repeat;
	width: 284px;
	height: 28px;
	text-indent: -9999px;
}

#subtitle h3 {
	margin-top: 10px;
	background: url(../images/home/subtitle2.jpg);
	width: 178px;
	height: 28px;
	text-indent: -9999px;
}

#subtitle h4 {
	margin-top: 8px;
	margin-bottom: 20px;
	background: url(../images/home/subtitle3.jpg);
	width: 144px;
	height: 28px;
	text-indent: -9999px;
}

#name {
	margin-top: 20px;
	overflow: hidden;
}

#name h2 {
	margin-bottom: 20px;
	background: url(../images/global/brookesharon.jpg) no-repeat;
	width: 173px;
	height: 24px;
	text-indent: -9999px;
}

/*----------------PREVIEW-----------------*/ 

#preview {
	margin-top: 20px;
}

.previewimg1 {
	height: 194px;
	width: 300px;
	margin-left: 0;
	margin-right: 5px;/*No margin-left so that it bumps up against edge.*/
	margin-bottom: 20px;
}

.previewimg2 {
	height: 194px;
	width: 300px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 20px;
}

.previewimg3 {
	height: 194px;
	width: 300px;
	margin-left: 10px;
	margin-bottom: 20px;
	margin-right: 0px;
}

/*--------------------MAIN--------------------*/ 

#main {
	width: 940px;
	overflow: hidden;
}

#main h2.ltspecial {
	background: url(../images/home/color-main.jpg) no-repeat;
	width: 61px;
	margin-top: 20px;
}

#main h2.medspecial {
	background: url(../images/home/design-main.jpg) no-repeat;
	width: 81px;
}

#main h2 {
	background: url(../images/home/marketing-main.jpg) no-repeat;
	width: 123px;
	height: 29px;
	text-indent: -9999px;
}

#main p {
	font-family: Tahoma, Geneva, sans-serif;
	/*font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;*/
	font-size: 16px;
	line-height: 150%;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 15px;
}

#main p.profile {
	margin-top: 20px;
}

.highlightOrange {
  color: #e97b02;
  font-weight: bold;
}

.highlightGreen {
	color: #326c0f;
	font-weight: bold;
}

.highlightPurple {
	color: #6f156c;
	font-weight: bold;
}

#main a,
#footer a { 
  color: #878686;
  text-decoration: none;
  /*font-weight: bold;*/
/*  border-bottom: 2px solid #878686;*/
}

#main a:visited,
#footer a:visited {
	color: #6E97BF;
	/*color: #00aeef;*/
}

#main a:hover,
#footer a:hover {
  color: #fff;
  background-color: #878686;
/*  border-bottom-color: #878686;*/
}

/*-------------------ABOUT-----------------------*/
#main p.clients {
	margin-top: 20px;
	color: #00aeef;
	text-transform: uppercase;
	font-weight: bold;
}

#clientlist {
	overflow: hidden; /*If there was text here, this would keep text from overflowing the box.*/
}

#clientlist ul {
	list-style: none; /*removes ident & bullets on list */
	/*font-family: Tahoma, Geneva, sans-serif;*/
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 150%;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 15px;
}

#about .wrap #main #clientlist ul ul li {
	font-style: italic;
}
	
/*--------------------FOOTER----------------------*/

#footer {/*sets the bg image to stretch across entire page*/
	/*height: 134px;*/
	margin-left: auto;
	margin-top: 20px;
	/*margin-right: auto;
	background-image: url(../images/global/footer-bg.jpg);
	background-repeat: repeat-x;
	background-color: #2f2f2f;*/
}

#footer p {
	font-size: 14px;
	color: #878686;
	padding: 14px 0 0 0;
}
#contactus .question {
	font-weight: bold;
	display: block;
	margin-top: 5px;
}

/*----------------------------------------GALLERY PAGE------------------------------------------*/


/*------------GALLERY LIST------------*/

#gallerylist {
	margin-top: 20px;
	padding: 0;
	list-style-type: none; /*removes ident & bullets on list */
	overflow: hidden; /*If there was text here, this would keep text from overflowing the box.*/
}

#gallerylist a {
	text-decoration: none;
	width: 105px;
	display: block; /*Changes display so that the graphic acts like a paragraph of block-level element. Used here because this hasn't been set up in a <div>.*/
}

.extLink {
	width: 105px;
	height: 24px;
	text-indent: -9999px;
}

#gallerylist a.extLink {
	background-image: url(../images/nav/exteriors.jpg);
	background-repeat: no-repeat;
	background-position: 0 0px; /*sets bg of links*/
}

#gallerylist a.extLink:hover {
	background-position: 0px -48px; /*makes text inside button bold, changes bg color, moves icon*/
}

.intLink {
	margin-top: 10px;
	width: 99px;
	height: 24px;
	text-indent: -9999px;
}

#gallerylist a.intLink {
	background-image: url(../images/nav/interiors.jpg);
	background-repeat: no-repeat;
	background-position: 0 0px; /*sets bg of links*/
}

#gallerylist a.intLink:hover {
	background-position: 0px -48px; /*makes text inside button bold, changes bg color, moves icon*/
}

.signsLink {
	margin-top: 12px;
	margin-bottom: 20px;
	width: 65px;
	height: 30px;
	text-indent: -9999px;
}

#gallerylist a.signsLink {
	background-image: url(../images/nav/signs.jpg);
	background-repeat: no-repeat;
	background-position: 0 0px; /*sets bg of links*/
}

#gallerylist a.signsLink:hover {
	background-position: 0px -60px; /*makes text inside button bold, changes bg color, moves icon*/
}

/*------------IMAGE FRAME ------------*/

#imageframe {
	position:relative;
	height:700px;
	width: 930px;
	margin-top: 40px;/*sets margin to seperate jQuery XPOSE gallery from nav bar area*/
	padding-top:40px;/*sets padding to seperate jQuery XPOSE gallery bg gradiant*/
	font-family: Tahoma, Geneva, sans-serif;/*sets pic caption*/
	font-size:16px;
	background-image: url(../images/global/gradientbg3.jpg);
	background-repeat: repeat-x;
	overflow: hidden;
}/*container for both thumbs & graphics*/

#imageframe a.pics {
	float:left;
	display:inline;
	color: #000;/*sets color for pic caption*/
	text-decoration:none;
	width:64px;
	height:64px;
	cursor:default;
	margin-left: 20px;
	margin-top: 20px;
	padding-right: 6px;
}/*styles individual thumbnail placeholders*/

#imageframe a.pics img.thumb {
	display:block;
	border:1px solid #000;
}/*thumbnails*/

#imageframe a.pics span {
	display:none;
	border:0;
	height: 500px;
	width:890px;/*Sets where the graphic will show up.*/
	/*border:1px solid #fff;*/
	text-align:center;
	/*background-color: #FFF;Turn off if using gradient bg*/
	margin-left: 20px;
	overflow: hidden;
}

#imageframe a.pics span img {
	margin:10px auto;
	border:1px solid #000;
}/*border around pop-up graphic*/

#imageframe a.pics:hover {
	white-space: normal;/*Controls how browsers display space characters in the HTML code. IE seems to need it here to make sure the graphics show up.*/
}

#imageframe a.pics:hover img.thumb {
	border:1px solid #3ba342; /*changes border of thumbnail if user hovers over thumbnail*/
}

#imageframe a.pics:hover span {
	display:block;
	position:absolute;
	left:0px;
	top:256px; /*192 for 2 rows of pics; 256 for 3 rows of pics*/
	z-index:10;
	height:500px;
}/*Causes photo to change when you hover over it. If you change where it will show up, then you need to adjust the size of the container to make sure it doesn't flow out of the box*/


#imageframe a.pics:focus {
	outline: none;
}

/*#imageframe a.pics:focus img.thumb {
	border:1px solid #fff;changes border of thumbnail if user clicks on thumbnail
}*/

#imageframe a.pics:focus span {
	display:block;
	position:absolute;
	left:0px;
	top:192px;
	z-index:5;
	outline: none;
	height:500px;
}

/*----------------------------------------SERVICES PAGE------------------------------------------*/

#marketinginfo p {
	font-family: Tahoma, Geneva, sans-serif;
	/*font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;*/
	font-size: 16px;
	line-height: 150%;
	margin-top: 20px;
	margin-bottom: 15px;
}

#marketinginfo .extServices {
	width: 105px;
	height: 24px;
	text-indent: -9999px;
	background-image: url(../images/nav/exteriors.jpg);
	background-repeat: no-repeat;
	background-position: 0 0px; /*sets bg of links*/
}

#serviceslist {
	width: 610px;/*Reduce from 620px to eliminate margin conflicts*/
	margin-top: 5px;
	padding: 0;
	overflow: hidden; /*If there was text here, this would keep text from overflowing the box.*/
}

#serviceslist p {
	/*font-family: Tahoma, Geneva, sans-serif;*/
	font-size: 16px;
	line-height: 150%;
	margin-bottom: 5px;
	width: 600px;
}

#serviceslist ul,
#marketinginfo ul,
#signlist ul {
	margin: 20px 0 25px 10px;
	list-style: none; /*removes ident & bullets on list */
}

#serviceslist .intServices {
	margin-top: 20px;
	width: 99px;
	height: 24px;
	text-indent: -9999px;
	background-image: url(../images/nav/interiors.jpg);
	background-repeat: no-repeat;
	background-position: 0 0px; /*sets bg of links*/
}

#serviceslist h3 {
	margin: 20px 0 0px 10px;
	color: #00aeef;
	text-transform: uppercase;
	font-weight: bold;
}

#servicesphotos .figure img {
	padding-top: 30px;/*used to adjust white space (works better in IE)*/
	display: inline;
}

#servicesphotos .figure {
    float: left;
    width: 300px;
}

#servicesphotos .figure p {
	/*font-family: Tahoma, Geneva, sans-serif;*/
	font-size: 12px;
	line-height: 100%;
    color: #333;
    text-align: center;
	background-color: #fff;
    padding: 5px;
  	margin: 5px 0 5px 0;
}

#servicesphotos a { 
  color: #878686;
  text-decoration: none;
  border-bottom: 2px solid #878686;
}

#servicesphotos a:visited {
	color: #6E97BF;
}

#servicesphotos a:hover {
  color: #fff;
  background-color: #878686;
  border-bottom-color: #878686;
}

#signlist .signServices {
	margin-top: 20px;
	width: 65px;
	height: 30px;
	text-indent: -9999px;
	background-image: url(../images/nav/signs.jpg);
	background-repeat: no-repeat;
	background-position: 0 0px; /*sets bg of links*/
}

/*----------------------------------------CONTACT PAGE------------------------------------------*/

#contacttitle {
	margin-top: 20px;
	overflow: hidden;
}

#contacttitle h2 {
	background: url(../images/global/contactus.jpg) no-repeat;
	width: 131px;
	height: 22px;
	text-indent: -9999px;
}

#contactgreeting {
	margin-top: 20px;
}

#contactgreeting p {
	line-height: 150%;
}

#contactgreeting h2 {
	line-height: 150%;
	margin-bottom: 20px;
	font-size: 28px;
/*	font-weight: bold*/;
	color: #606060;
}

#contactform {
	position:relative;
	margin-top: 20px;
	/*background-image: url(images/global/gradientbg3.jpg);
	background-repeat: repeat-x;*/
}

#contactform p {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	line-height: 14px;
}

/* form styles */

form {
	width: 360px;
	text-align: left;
}

fieldset {
	margin: 0;
	border: 0;
	padding: 0;
}

legend {
	display: none;
}

form h3 {
	clear: both;
	padding: 5px 0px 10px 0px;
	font-size: 14px;
}

form label {
	display: block;
	width: 310px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #606060;
	line-height: 14px;
	padding: 0px 0px 12px 0px;
}

form input {
	display: block;
	margin-top: 3px;
}

form select {
	float: left;
	display: block;
}

form label.field-first,
form label.field-company
form label.field-address,
form label.field-city,
form label.field-email/*,
form label.field-message*/ {
	clear: left;
}


form label.field-first,
form label.field-last,
form label.field-city,
form label.field-email,
form label.field-phone/*,
form label.field-message*/ {
	float: left;
	margin: 0px 10px 0px 0px;
	width: 150px;
}

form label.field-first input,
form label.field-last input,
form label.field-email input,
form label.field-city input,
form label.field-phone input {
	float: left;
	width: 150px;
	padding: 0px;
}

form label.field-state {
	float: left;
	margin-right: 10px;
	width: 60px;
}

form label.field-state select {
	width: 60px;
	float: left;
	margin-top: 3px;
}

form label.field-zip {
	float: left;
	width: 80px;
}

form label.field-zip input {
	float: left;
	width: 80px;
}

form label.field-address,
form label.field-company/*,
form label.field-message*/ {
	float: left;
	width: 310px;
	margin: 0px 0px 0px 0px;
}

form label.field-address input,
form label.field-company input{
	float: left;
	width: 310px;
	padding: 0px;
}

textarea {
	display: block;
	float: left;
}

form textarea {
	margin-top: 3px;
}