@charset "utf-8";
/*
Theme Name: Interspeed Creative Design
Description: a-brief-description
Author: SamB
Version: 1
.
Color Hints
--------------
Border Color ( light grey): #2C2C2C
Body Text ( grey): #919191
h1 BG (dark Grey ): #1A1A1A
Dark Red: #820000
.


[Table Of Contents] 

    0- Reset
    1- Global
    2- Links
    3- Headings
    4- Header 
    5- Navigation
    6- Middle 
    7- Forms
    8- Extras
    9- Footer 

*/

/* =0 Reset
----------------------------------------------------------------------------------------------------------------

/* =1 Global
---------------------------------------------------------------------------------------------------------------- */

html {
   /*  background: #1F1F1F;	*/

}
body {
    line-height: 1;
    font: normal 62.5% Arial, Helvetica, sans-serif;
    vertical-align: top;
    color: #9ba29e;
    margin:0;
    padding:0;
    background:#191919;
}
.right {
    float: right;
}
.left {
    float: left;
}
.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}
.align-center {
    text-align:center;
}
.justify {
    text-align:justify;
}
.hide {
    display: none;
}
.clear {
    clear: both;
}
.bold {
    font-weight:bold;
}
.italic {
    font-style:italic;
}
.white { color:white; }
.quote { 
   font-family: Georgia,"Times New Roman",Times,serif;
   font-style: italic;
}
a img { border: none }

p.blocktext {
    line-height: 1.8em;	
}

.underline {
    border-bottom:1px solid;
}
.highlight {
    background:#ffc;
}
img.border { border: 1px solid #2C2C2C; padding:5px; }
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignleft {
    float:left;
    margin:4px 10px 4px 0;
}
img.alignright {
    float:right;
    margin:4px 0 4px 10px;
}

.small { font-size: 1.1em; }
.medium { font-size: 1.3em; }

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}
/* =2 Links
---------------------------------------------------------------------------------------------------------------- */
#page a:link, #page a:visited {
    color: #FFF;
    background: #1A1A1A;
    border-bottom:1px solid #2C2C2C;
    text-decoration: none;
}
#page a:hover, #page a:active  {
    color: #FFF;
   /* background: #2C2C2C; */
    border-bottom:1px solid #666C68;
}
/* =3 Headings
---------------------------------------------------------------------------------------------------------------- */
h1 {
    font-size: 2.8em;
    color: #FFF;
    text-transform: uppercase;
    font-weight: normal;
    line-height: 1.6em;
    margin: .30em 0 ;
}


h1 strong {
    	background: #1A1A1A;
    	border-bottom: #2C2C2C;
    	padding-top:3px;
    	font-weight: normal;
    	border-bottom:1px solid #2C2C2C;
}
h2 {
    font-size: 1.6em;
    text-transform: uppercase;
    font-weight: normal; 
    margin: .75em 0 ;
}
h3 {
    font-size: 1.6em;
    text-transform: uppercase;
    font-weight: normal;    
    margin: .83em 0;
}
h3 a {
	text-decoration: none;
    border-bottom:1px solid #2C2C2C;
    padding:6px 0px 3px 4px;
    width:217px;
    display: block;
    margin: .83em 0;
}

div.section h2 a img.arrow, h3 a img.arrow  {
    padding:0 0 0 5px;
}
h4 {
    font-size: 1.8em;
    color: #FFF;
    font-weight: normal;
    margin-bottom: 0px;
    margin-top:15px;
}
h5 {
    font: bold 0.9em;
}
p {
    font-size: 1.5em;	
    margin: 1.12em 0;
}
ul.arrow_list  { margin-left:40px; list-style-type: disc; }
ul.arrow_list li  { font-size:1.5em; padding-bottom:3px; }
/* =4 Header
---------------------------------------------------------------------------------------------------------------- */
.wrapper {
    width: 960px;
    margin: 0 auto;	
}

#header { 
    
}
#header img#logo{
	   float:left;
	   z-index:10;
	   padding:18px 0 0 9px;
}

#header div.wrapper {
	position: relative;
}
	
#header div.wrapper #icon {
	z-index:100;
	position: absolute;
	top:0;
	left:-220px;
	width: 230px;
	height: 100px;
    background: url(../images/bg_icon.gif) top right no-repeat;	
}

#page {
	background: #1F1F1F;
	border-bottom:1px solid #2C2C2C;
	border-top:1px solid #2C2C2C;
	clear: both;
	}
	
	#page div.cornerBG {
	    padding:22px 0;
	}

/* =5 Navigation
---------------------------------------------------------------------------------------------------------------- */

#navigation {
	float: right;
	height: 93px;
}
	#navigation ul {
	    margin:0;	
	}
		#navigation li {
			  display: block;
			  float: left;
			  height: 93px;	
		}
			#navigation li.active {
			    background: url(../images/nav_active_bg.png) center bottom repeat-x;    
			}
			#navigation li.active a {
			    color: white;
			    background: url(../images/nav_active_triangle.png) center bottom no-repeat;	
			}
			#navigation li a { 
			    font-size: 1.8em;	
			    display: block;
			    text-decoration: none;
			    color: #BDBFBF;
			    padding:55px 14px 16px 14px;
			    text-transform: lowercase;
			}
/* =6 Middle
---------------------------------------------------------------------------------------------------------------- */
#page div.wrapper {
    background: url(../images/2border_bg.png) right bottom repeat-y;
}

	#page.wide div.wrapper {
	    background: url(../images/1border_bg.png) right bottom repeat-y;	
	}
		#cornerBG {
		    background: url(../images/nav_col_bg.png) right bottom no-repeat;	
		}

#main-col, #more-info-col, #nav-col {
    float: left;
}

.col-wrap {
    padding:0px 10px;	
}

#main-col {
	width: 480px;
}

	#page.wide  #main-col {
	    width: 720px;
	    background: #1F1F1F;
	}
 

#more-info-col {
    width: 240px;    
}

	#page.wide  div#more-info-col {
	    display: none;
	}

#nav-col {
	width: 240px;
}



#main-col h2 { color: white; }

table.addressTable td {
	font-size: 1.5em;
	line-height: 1.5em;
}
table.addressTable strong {
	color: white;
	font-weight: normal;
}
#porfolio_section h2,#porfolio_listing_section h2 {
	text-transform: none;
	color: #919191;
	font-size:1.3em;
	margin-top: -10px;    	
}

	#porfolio_section h3 { 
		color: white; 
		font-family: Georgia,"Times New Roman",Times,serif; 
		font-size: 1.9em;
		text-transform: none;
		margin-top:0;
		margin-bottom:0px;
	}

#porfolio_content, #service_container { margin-top:15px; }
#porfolio_content { width:49%; padding-right:10px; float: left; }
#porfolio_content p { font-size: 1.3em; margin-top:0; }
#service_container{ width:49; padding-right:10px; float: left; }
#service_container strong { font-size: 1.5em; color: white; font-weight: normal; }
div.arrowLink { 
	padding-left: 17px; 
	display: block; 
	background: transparent url(../images/grey_arrow_right.gif) no-repeat scroll 3px 6px;
	padding-bottom:18px;
}
div.arrowLink a { 
	font-size:1.3em;
	text-transform: lowercase;
	padding:0 3px;
} 

/* =7 Form
---------------------------------------------------------------------------------------------------------------- */
#contactform label, #contactform legend {
    color: #919191;
    font-size: 1.3em;
    text-transform: lowercase;
}
#contactform fieldset, #contactform legend {     
    margin:0px 0;
    padding:2px 0;
} 
#contactform input, #contactform  textarea, #contactform  select  {
    width: 210px;
    border:1px solid #2C2C2C; 
    background: #191919;
    color: #FFF;
    margin:2px 0;
}
#contactform  textarea {
    height: 113px;
}

#contactform fieldset label {
	 font-size: 1.2em;
	 line-height: 1.8em;
	 height: 11px;

	 float: left;
	 margin-left:2px; 

}

#contactform #services_needed-element dl { border:1px solid #2C2C2C; background: #191919; padding: 2px 0 4px 2px ;} 
 #contactform fieldset dl input { 
	width: 15px;
	float: left;
    text-align: left;
    padding-left:0;
    margin-left:0;
    font-size: 1.1em; 
    border:none;
    background: none;
        
}
#contactform fieldset dl dd {  clear: left; }

#contactform  #submit { 
	background: #252525;
	width: 85px; 
	padding: 5px 0; 
	margin-left:0;
}

#contactform ul.errors li { color: #993300; font-weight: bold; font-size: 1.1em; padding-bottom:10px; }
#services_needed-label { display:none; }
#services_needed-element { padding-bottom:5px; }

form.landingContactForm { margin-top:15px; }
/* =8 Extra
---------------------------------------------------------------------------------------------------------------- */

#page #siteLink, #page #siteLink:hover { 
	   text-align: none;
	   border-bottom: none;
	   background: none;
	}
div.backLink {
    padding-bottom:10px;	
}
div.backLink a {
	   margin:5px 0;
	   font-size:1.3em;
}

#googleMap { border: 1px solid #2C2C2C; padding:5px; margin:10px 0; }
#googleMap small a { display: none; }
ul.arrowList {	
	list-style: none;
	padding-left:0px;
	margin:0;
}
	ul.arrowList li {
	    margin:5px 0;
	    padding-left:16px;
	    background: url(../images/red_arrow_left.png) no-repeat 2px 6px;	
		font-size: 1.3em;
	}
		#page ul.arrowList li a {
		    
		    line-height: 1.4em;	
		    letter-spacing: .05em;
			color:#B3B9B6;
		} 

ul.taglist {
	margin: 0;
	padding: 0;
	list-style: none;    	
}
	ul.taglist li {
		
		}
	
		
	
	#page ul.taglist li a {
	    font-size: 1.3em;
	    color: #B3B9B6;
	    text-decoration: none;
	    display: block;
	    padding: 6px 2px;
	    background: #1F1F1F;	
	}
	
	#page ul.taglist li a:hover {
	    border-color: #2C2C2C;	
	    color: white;
	    background: #1A1A1A;
	}
	#page ul.taglist li.active a { color: white; } 

ul.service-list {	
	list-style: none;
	margin:0;
	padding:10px 0 0 0;
}
#page ul.service-list li { height: 2.4em; }
#page ul.service-list li a { 
    color: #919191;	
    padding:2px 2px;
    margin-top:2px;
    text-transform: lowercase;
    font-size: 1.3em;
}
	#page ul.service-list li a:hover { color: white; }







div.scrollable {
	width: 460px;
	height: 350px;
	overflow:hidden;
	position:relative;
}
div.short { 
	height: 400px;	
}

div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
}

div.scrollable div.items div.group { width: 460px; float: left; }
/* prev, next, prevPage and nextPage buttons */
#page a.prev, #page a.next {
    display:block;
    width:31px;
    height:31px;
    background:transparent url(/asset/images/nav_buttons.png) no-repeat top right;
    float:right;
    margin:0px 10px 10px 10px;
    cursor:pointer;
    font-size:1px;
    border:none;
}
 #page a.next {
    
 }
 #page a.next:hover {
    background-position:   bottom right;
 }
 
#page a.prev {background-position:  top left ; }

#page a.prev:hover { background-position:bottom left; }


#page a.disabled { display: none; }


.portfolio_listing {
    float: left;
    padding: 4px;
    margin-bottom:14px;
    border: 1px solid #2C2C2C;	
    cursor: auto; 
}
div.hoverer { border-color: #666C68; }

	.portfolio_listing_right {
		margin-left:14px;
	}
	.portfolio_wrapper {
		background: #0C0C0C;
		padding: 4px;
		}
	.portfolio_listing div.portfolio_thumb {
		width: 205px;
		height: 120px;
		overflow: hidden;	
	}
		#page .portfolio_listing a {
		    	font-size: 1.3em;
		    	display: block;
		    	background: #0C0C0C;
		    	border: none;
		    	padding: 2px 1px;
		}
		
		#page .col-wrap .portfolio_listing a {
		  color: #999999;
		}

        #page .col-wrap .hoverer  a {
          color: white;
        }
		
		#page .portfolio_listing a:hover {
		    color:white;	
		}
#accordion {
    width: 100%;
	margin-bottom:20px;
}

#accordion h2 {
    border-top:1px solid #2C2C2C;
    padding:10px 0 10px 7px;
    margin:0px;
    text-transform: lowercase;
    font-size: 2em;
    background:url(../images/arrow_down.gif) no-repeat 97% 40%;
    cursor: pointer;
	color: #919191;
}

#accordion h2.current {
    background: #191919 url(../images/arrow_up.gif) no-repeat 97% 40%;
    color: #FFF;	
}
/* accordion pane */
#accordion div.pane {
    display:none;
    padding:0 15px;
    background: #191919;
}

#accordion div.pane p {
	margin:0px;
	padding-bottom: 10px;
	font-size:1.3em;	
}


#sections { 
	
}
#sections h2 { 
	margin:0;
}
#sections p { 
	margin-top:3px;
	margin-bottom:5px;
}
#sections div.section {
	border-bottom:#2C2C2C 1px solid;
	margin-bottom:20px;
	padding-bottom:5px;
}


ul.options { 
	padding-left:15px;
}
ul.options li {
	padding-left:15px;
    background: url(/asset/images/red_arrow_right.gif) no-repeat left 5px;	
}

/* root element for tabs  */
ul.tabs {  
    margin:0 !important; 
    padding:0;
    height:30px;
    border-bottom:1px solid #666;       
}

/* single tab */
ul.tabs li {  
    float:left;  
    padding:0; 
    margin:0;  
    list-style-type:none;   
}

/* link inside the tab. uses a background image */
#page ul.tabs a { 
    float:left;
    font-size:13px;
    display:block;
    padding:5px 25px;   
    text-decoration:none;
    border:1px solid #666;  
    border-bottom:0px;
    height:18px;
    background-color:#3F3F3F;
    color:#777;
    margin-right:2px;
    position:relative;
    top:1px;    
}


ul.tabs a:hover {
    background-color:#F7F7F7;
    color:#333;
}
    
/* selected tab */
#page ul.tabs a.current {
    background-color:#2F2F2F;
    border-bottom:2px solid #2F2F2F;   
    color:#FFF; 
    cursor:default;
}

    
/* tab pane */
div.panes div {
    display:none;
    border:1px solid #666;
    border-width:0 1px 1px 1px;
    min-height:150px;
    padding:15px 20px;
    background-color:#2F2F2F;  
}

div.panes div ul { 
	padding-left: 30px;
	list-style: disc;
}

div.panes div ul li { 
    font-size:1.4em;
    padding-bottom:3px;
}
div.panes div h3 {
    color:white;

}
div.panes div td { font-size:1.3em; padding:3px; }
/* =9 Footer
---------------------------------------------------------------------------------------------------------------- */
#footer { 
	background: #191919;
	color: #727272;
	font-size:1.1em;
	line-height: 1.3em;
	
}
#footer div.wrapper {   
    background: url(../images/footer_bg.png) -1px bottom no-repeat #1F1F1F;
    height: 46px;
    
}
#footer ul {
	padding-top:10px;
	margin:0;
	float: right;	
}
#footer ul li {
    width: 227px;
    list-style: none;
    float: left;
    padding-left:13px;
    	
}
#footer p {
	padding-top:10px;
	   margin:0px;
	   float: left;
	   font-size:1em;
	} 
#footer a, #footer strong {
	color: white;
	font-weight: normal;
	text-decoration: none;
}
#footer a:hover { text-decoration: underline; }