@charset "UTF-8";
/*
    Tripoli is a generic CSS standard for HTML rendering. 
    Copyright (C) 2007  David Hellsing

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex { font: inherit; font-size: 1em; }
dfn, i, cite, var, address, em { font-style: normal; }
th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet { border: none; }
table {
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
}
caption, th, td, center { text-align: left; vertical-align: top; border: none; }
tr { border: none; }
body { line-height: 1; background: white; color: black; }
q { quotes: "" ""; }
ul, ol, dir, menu { list-style: none; }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; } /* we don't need a visual hr in layout */
font { color: inherit !important; font: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */

/* Generic CSS */
/* MAIN TYPOGRAPHY */

html { font-size: 62.5%; font-family:Helvetica, Arial, sans-serif }
strong, th, thead td, h1, h2, h3, h4, h5, h6 { font-weight: bold; }
cite, em, dfn { font-style: italic; }
code, kbd, samp, pre, tt, var, input[type='text'], textarea {
	font-size: 1.2em;
	font-family: georgia, monaco, "Lucida Console", courier, mono-space;
}
del { text-decoration: line-through; color: #666; }
ins, dfn { border-bottom: 1px solid #ccc; }
small, sup, sub { font-size: 85%; }
abbr, acronym { text-transform: uppercase; font-size: 85%; letter-spacing: .1em; }
a abbr, a acronym { border: none; }
abbr[title], acronym[title], dfn[title] { cursor: help; border-bottom: 1px solid #ccc; }
sup { vertical-align: super; }
sub { vertical-align: sub; }
img, img a {border:0;}

/* Clearing Class */
.clear_left { overflow: hidden; clear:left; height:0; margin:0; font-size: 1px; line-height: 0.1; display: block; }
.clear_right { overflow: hidden; clear:right; height:0; margin:0; font-size: 1px; line-height: 0.1; display: block; } 
#clear, .clear {
	overflow: hidden;
	clear:both;
	height:0;
	margin:0;
	font-size: 1px;
	line-height: 0.1;
	display: block;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clear_l { clear:left;}
.clear_r{ clear:right;}
.clear_a{clear:both;}

/* Body Styles */
body {
	color:#e86a10;
	background-color:#C4C5C5;
	height:100%;
}
	 

/* BASE SIZES */

p {
	font-size: 1.6em;
	line-height: 1.6em;
	margin: 0 0 1.4em 0;
}
h1 {
	font-size:3.0em;
	font-weight:normal;
	margin: 0 0 .8em 0;
}
h2 {
	font-size: 2.5em;
	font-weight:normal;
	margin: 0 0 .6em 0;
}
h3 { font-size: 2.4em; font-weight:normal; margin: 0 0 .6em 0; line-height: 1.3em;}
h4 { font-size: 2.0em; font-weight:normal; margin: 0 0 .6em 0;  line-height: 1.6em;}
h5 { font-size: 1.6em; font-weight:normal; margin: 0 0 .6em 0;  line-height: 1.6em;}
h6 { font-size: 1.3em; font-weight:normal; margin: 0 0 .6em 0;  line-height: 1.6em;}



a:link { /*text-decoration: underline;*/
	color: #e86a10; }
a:visited { /*text-decoration: underline;*/
	color: #e86a10; }
a:hover {
	text-decoration: underline;
	/*color: #000;*/
}


a:active, .content a:focus { text-decoration: underline; color: #e86a10; }
code, .content pre { color: #c33; } /* very optional, but still useful. W3C uses about the same colors for codes */
/* HR */

.content hr { display: block; background: #aaa; color: #aaa; width: 100%; height: 1px; border: none; }
#wrapper {
	width: 851px;
	margin: 20px auto 20px auto;
	position: relative;
	height: 100%;
}
#main_content {
	background-image: url(../images/whiteBOX_bgrnd.gif);
	background-repeat: repeat-y;
	height: 100%;
}
#bottom_shadow {
	position: absolute;
	bottom: 0px;
	padding: 0;
	height: 11px;
	width: 790px;
	left: 0px;
}
#top_shadow {
	position: absolute;
	top: 0px;
	width: 788px;
	height: 9px;
	left: 0px;
}
#logo_col {
	float:left;
	width:197px;
	position: relative;
}

#logo {
	position: absolute;
	top: 80px;
	left: 1px;
}
#main_col {
	width: 575px;
	margin: 0 0 0 240px;
}
#nav {
	margin:0 0 40px 0;
	text-align: left;
	height: 20px;
	color: #e86a10;
	padding: 50px 0 0 0;
}
#nav ul, #nav_portfolio ul {
	padding: 0;
	float: left;
	margin: 0;
	font-size: 1.3em;
}
			
			#nav li, #nav_portfolio li {
						display: inline;
						list-style-type:none;
						}
						
			#nav .selected { background-image:url(../images/square_solid_orng.gif);
						background-repeat: no-repeat;
						background-position: left;
						padding: 3px 20px 3px 20px;
						margin-left:0;}
						
			#nav li a { background-image:url(../images/square_outline_orng.gif);
						background-repeat: no-repeat;
						background-position: left;
						padding: 3px 20px 3px 20px;
						margin-left:0;}							
						
			#nav li a:hover { background-image:url(../images/square_gre_orngy.gif);
						background-repeat: no-repeat;
						background-position: left;
						margin-left:0;}
#footer {
	font-size: 1.2em;
	text-align: right;
	margin: 0 auto;
	padding: 2px 30px 30px 0;
	width: 821px;
	color: #000000;
	clear: both;
}

#portfolio_main_caption { margin: 5px 0 5px 0; }
#portfolio_main_caption h1 { font-size: 1.4em; }


.nav { margin: 5px 0 }
#nav_portfolio a {
	margin: 0 5px;
	padding: 1px 3px;
	border: 3px solid #e86a10;
	background: #e86a10;
	text-decoration: none;
	color:#FFF;
	font-weight:bold;
	display: block;
	width: 5px;
	text-align: center;
	float: left;
}
#nav_portfolio a.activeSlide { background: #FFF; border:3px solid #e86a10; color: #e86a10; }
#nav_portfolio {
	margin: 0px;
	padding: 0;
	height: 20px;
}
#portfolio_slug {
	margin: 10px 0 0 0;
	width: 385px;
}
#portfolio h3 {
	font-size: 1.0em;
	color: #333333;
	margin: 0px;
	padding: 0px;
}

#portfolio h2 {
	font-size: 1.8em;
	font-weight: bold;
	color: #E86A10;
}

#portfolio p {
	font-size: 1.4em;
	color: #E86A10;
	width: 60%;
}
#site_link { width: 150px; }
#portfolio_links {
	font-size: 1.2em;
	position: relative;
	width: 175px;
	float: right;
	margin: 25px 0 0 0;
}
#site_link img, #other_porjects img {
	float: left;
	margin-right: 7px;
	padding-top: 1px;
}
#portfolio {
	margin-bottom: 25px;
	padding-bottom: 25px;
}
#portfolio_main_image {
	height: 353px;
	overflow: hidden;
}
#other_porjects {
	width: 175px;
	margin: 0 0 15px 0;
}

/*.popup {
	width: 198px;
	font-size: 0.9em;
	position: absolute;
	background-image: url(../images/bubble_box.png);
	background-repeat: no-repeat;
	z-index:50;
	height: 80px;
	overflow: visible;
	
}
.popup a {
	color: #E86A10;
	line-height: 1.2em;
}
.popup div { padding: 15px 0 15px 20px; }*/

/* TOOL TIP  CSS*/
#JT { position: absolute;
	z-index:100;
	border: 4px solid #999;
	background-color: #000;
}

#JT_copy{
	padding:10px 10px 10px 10px;
	color:#999;
	background-color:#FFF;
}

#JT_copy p{
		margin:3px 0;
		color:#800000;
		font-size:10px;
		}

#JT_copy h1{
		font-size:16px;
		color:#800000;
		padding:0;
		margin:2px 0;
		}
#JT_copy h2{
		font-size:12px;
		padding:0;
		margin:2px 0;
		color:#800000;}

#JT_copy h3{
		font-size:11px;
		padding:0;
		margin:2px 0;}

#JT_copy img{
		padding: 1px;
		border: 1px solid #CCCCCC;}

.jTip{ }
/* END TOOL TIP CSS*/	  

#thumb_grid { height:355px; margin: 0 0 40px 0;}
			
			.thumb_image { float:left;
						margin:0 6px 6px 0;
						position: relative;
}
#info_box {
	text-align: left;
	margin: 0 0 20px 0;
}
 #info_box h2 {
	font-size: 14px;
	padding: 0;
	margin: 10px 0;
}

#info_box h1 {
	font-size:16px;
	padding: 0;
	margin: 10px 0;
	font-weight: bold;
}
				
				
#info_box h3 {
	font-size:12px;
	padding: 0;
	margin: 7px 0 2px 0;
}

#info_box p {
	padding:0;
	margin: 5px 0;
	width: 525px;
}

#info_box ul {
	list-style-type: square;
	list-style-position:inside;
	margin: 0 0 10px 0;
	padding: 0px;
}
#info_box li {
	padding-left:5px;
	margin-left: 5px;
	margin-bottom: 3px;
	line-height: 1.2em;
}
#info_box fieldset {
	padding:0;
	margin:0;
}
#info_box label {
	padding-left: 15px;
	font-size: 1.2em;
}
#info_box input {
	margin:5px 0 10px 10px;
}
#info_box textarea {
	margin:5px 0 10px 10px;
}

#nameFS {
	width: 215px;
	text-align:left;
	border:0;
}


#emailFS {
	float: right;
	width: 350px;
	text-align:left;
	border:0;
}

#info_box legend {
	padding-bottom:10px;
}
#pinfo {border:0;
margin:0; padding:0;}
#index #main_content { height: 600px; }
#other_porjects div {
	font-size: 0.9em;
	margin: 10px 0 2px 16px;
	background: url(../images/orgn_outline_bullet.gif) no-repeat left top;
	padding-left: 13px;
	width: 145px;
}
#contact #wrapper { height: 600px; }
#KT_Custom1 { }
#client_logo {
	float: right;
	margin: 0 0 0 20px;
	display: block;
}
#sample_list, #sample_list_right {
	clear: right;
}
#sample_list {
	padding: 0 0 0 0;
}

#sample_list h3, #sample_list_right h3 {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 10px;
}
#sample_list h4 {
	font-size: 1.2em;
	font-weight: bold;
	color:gray;
}

#sample_list ul, #sample_list_right ul { margin: 10px 10px 10px 10px; }

#sample_list li, #sample_list_right li {
	background: url(../images/orgn_outline_bullet.gif) no-repeat 3px;
	padding: 0 0 0 15px;
	margin: 0 0 5px 0;
}
#sample_list a, #sample_list_right a { font-size: 1.3em; }
#portfolio #sample_list_right {
	float: right;
	width: 300px;
}
#space {
	height: 250px;
	min-height: 300px;
}
#noble  #main_content { height: 625px; }

#johnsbyrne #main_content {
	min-height: 625px;
}

#johnsbyrne #sample_list {
	margin-top: 40px;
}
#sample_list li.ad_header {
	list-style: none;
	margin: 10px; 0 0 0;
}