@charset "utf-8";
/* -----------------  Global Settings and defaults ------------------------ */
* {margin:0; padding:0;}        
/* The following forces a vertical scrollbar.  This avoids the "page shift" problem that happens in Firefox and other browsers that don't have a scrollbar gutter for pages that don't have enough content to fill the screen.*/
html, body {
	height: 100%;
	margin-bottom: 1px;
}
body {
	font: .75em/1.5 Arial, Helvetica, sans-serif;
	background-color:#aaa; 
}
/* Set default font sizes for headings  */
h1 { font-size: 2em; margin: .67em 0; }
h2 { font-size: 1.5em; margin: .75em 0; }
h3 { font-size: 1.17em; margin: .83em 0; }
h4 { font-size: 1em; margin: 1em 0; }
h5 { font-size: .83em; margin: 1.5em 0; }
h6 { font-size: .75em; margin: 1.67em 0; }

p { 
	line-height: 1.15em;
	margin-bottom: 1.3em;
}
a {
	color: #004FC4;      /* blue  */
	text-decoration: none;
	font-weight: bold;
}
a:hover { text-decoration:underline;}
a img { border: none;}
.bold { font-weight: bold;}
.hasToolTip { border-bottom: 1px dotted; }
.emphasis { font-style: italic;}
.js  { display: none;}     /* used for elements that don't get shown when JavaScript is not enabled */
.IE6_only { display: none; }  /* use for elements that are for IE6 only; use conditional comments to turn the display back on.  */
div.moreContent  { 
	display: block;    /* set to none in the JavaScript */
	margin-left: 2em;	
	font-size: .9em;
}
span.moreContent {
	display: inline;	  /* set to none in the JavaScript */
}
/* The following are used to display a message that when clicked shows more content
   These messages are suppressed when JavaScript is not enabled.  The JavaScript for 
   this site, sets the display to inline */
.moreMsg, .lessMsg {
	color: #004FC4;	
	text-decoration: underline;
	display: none;    /* set to inline in the JavaScript */
}
.moreMsg {font-size: .9em;}
.IE6_only { display: none; } 
.centered { text-align: center;}
ul.linkList {list-style-type:none;}
.errorMessage { color: #F00; font-weight: bold;}
.severeErrorMessage { color:#FF0; font-weight: bold;}
.link { cursor:pointer;}
/* ---------------------  Tool Tip Styles ------------------- */
.tooltip, a.tooltip:hover {
    position:relative;
    z-index:24;
	font-weight:bold;
    text-decoration:none;
}
.tooltip .tip { 
	display: none; 
	position: relative;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height: 1.2em;
} 
/*background:; ie hack, something must be changed in a for ie to execute it*/
/* a.tool:hover{ z-index:25;} */
a.tooltip:hover .tip{
    display:block;
   	position:absolute;
    top:1.2em; left:0;
	padding: 5px;
	padding-right: 15px;
	width: 400px;
	color: #000;
	font-weight: normal;
	background: #fff url(../images/tooltipbg_pink.jpg) bottom right no-repeat;
	border: thin solid #aaa;
	border-bottom:none; border-right: none;
}
#homePage p#skills .tooltip span.tip:after {
	content:"(For more info, visit the Glossary page.)";
	font-style:italic;
	font-size: .85em;
	color: #00F;
}
#promo .ad {
	text-align: center;	
}
#promo .ad.color3 { 
	background-color:#A8FFDA;
	color:#096;
}
#promo .textad { padding: .5em;}

#promo #iStockPhotoAd img { width: 270px; height: 225px;}

/* ---------------------  end of Tool Tip Styles ------------------- */
/* --------------- Define page structure and outer containers ------------ */
/* Note.  Padding and borders are set on inner containers not here                */
#pageWrapper {
	background-color:#00854B;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	border: thin solid #333;
}
#header {
	height: 120px;     
	background:url(../images/headerbg.jpg) no-repeat; 
	position: relative;  /* set positioning context */
}
#headerInner {
}
div#socialMedia {
	width: 150px; 
	position: absolute; 
	right: 0px; top:15px;
	/*text-align: right; */
}
#nav {
	position: relative;
	top: -15px;
	background: url(../images/navbg.png) repeat-x;
	font-size: 1.2em;
	margin: 0 16px;
}
#twoColWrapper { clear: both;}
/* The use of two inner divs allows us to add the rounded corner backgrounds 
 */
#content {
	width: 580px;
	margin: 10px 16px; 
	background: url(../images/boxbg/rcWhite580px/rc_middle.jpg) top left repeat-y;
}
#promo {
	float: right;
	margin: 10px 16px;
	width: 270px;
	color: #fff;
}

/* ---------------------- Overrides for Variations on the page structure  ------------ */
/* Styles for pages with the promo col on the left */
body.promoLeft #promo {
	float: left;	
	margin-right: 0;
	margin-left: 16px;
}

body.promoLeft #content {
	float: left;	
}
/* ---- End of Page Structure for Promo on the left  --------*/
/* Styles for pages with a single main column */
body.singleCol #content {
	width: 868px;
	margin: 10px 16px; 
	background: url(../images/rcWhite868px/rc_middle.jpg) top left repeat-y;
	border: none;
}
body.singleCol #contentInner {
	background: url(../images/rcWhite868px/rc_top.jpg) top left no-repeat;	
}
body.singleCol #contentInnerInner {
	background: url(../images/rcWhite868px/rc_bottom.jpg) bottom left no-repeat;
}
/* -------------- end of page structure section ------------ */
/*  */
/* ---------------- Page Heading Styles           -------------*/
#header { padding-top: 10px;}
/*  Use image replacement for header text */
#header h1, #header h2 {
		margin-left: auto; margin-right: auto;  /* center the images */
		color: #033;
}
#header h1 a { color: #033;}
#header h1 {
	padding: 35px 0 0 0;
	height: 0 !important; 
	width: 328px;
	overflow:  hidden;
	background: url(../images/tripp-web-solutions.png) no-repeat;
	margin-bottom: 10px;
	margin-top: 10px;
}
#header h2 { 
	padding: 16px 0 0 0;
	height: 0 !important;
	width: 279px;
	overflow: hidden;
	background: url(../images/byline.png) no-repeat;
}

/* -------------------------------- Navigation Styling          ---------------------------- */
#navInner {
	border: thin solid #000;
	border-top: none;
}
div#nav ul { 
	list-style-type:none;
}

/* Force the nav div to expand to the height of it's content: */
#nav:after, #navInner:after { 
	content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; 
} 

div#nav li { 
	float: left;		  
	position: relative;  /* set positioning context */
	z-index: 100;   /* force it to appear above other content */
}
/* Position the submenu and hide it */
div#nav ul ul {
	position: absolute;   
	display: none;						
	left: -1px;							/* adjustment for parent's border   */
	border: none;
}	

div#nav a {display: block;		 /* makes the clickable area for the link expand to fit its container (except for IE)*/
	padding: .2em 15px;
	text-decoration:none;	
	color: #F1F5F8; 
	border: none;
	border-right: 1px solid #04bc6b;
	border-left: 1px solid #111;  
}  

/* Add styling for pop-up menus */
#nav li.submenu a {
	padding-right: 30px;  /* leave room for arrow image */
}
#nav li.submenu li a { padding-right: 0;}  	/* don't need an arrow on lower levels */
div#nav li.submenu li {                   
	width: 12em;							/* make all the submenu items the same width */
}
/*  Displays he second-level menu when it's parent list item is hovered:  */
div#nav li.submenu:hover ul	{
	display: block;
}

/* Change the background when hovering over a link.
   Use the same background for the top level (of an item that has a submenu)
   when hovering over it or any of its child links */
div#nav li a:hover,
div#nav li.submenu:hover,  
div#nav li.submenu a:hover { 
	background-image: url(../images/navbg_hover.png);  
}
/* The following changes the text color for all a elements being hovered
and for the child a element of the li being hovered (i.e. the top level and not its submenu items).  The second selector doesn't work in IE6 */
div#nav a:hover, div#nav li:hover > a {
	color: #000;
}
/* Show the arrow for top level menu items that have submenu items */
div#nav li.submenu:hover a.hasChildren , div#nav li.submenu a.hasChildren:hover  {
	background: url(../images/downArrow.gif) 94% 50% no-repeat;
	border-left: 1px solid #04bc6b;  /* make left border blend with submenu */
}
/* The following styles the submenu -- You only see this when their parent is hovered */
#nav li.submenu ul {
	border-top: 1px solid #04bc6b;  
}
#nav li.submenu li {
	background: #000 url(../images/submenuItembg.jpg);
	border: 1px solid #04bc6b;
	border-top: none; 
}
div#nav li.submenu li a {
	border: none;			/* remove the border for the submenu link */
	font-size: .8em;		/* make the font  smaller */
}

/* Highlight the nav item for page that we are on.   
   It's not necessary to keep the highlight when hovering an area that has 
   a submenu
*/
#homePage li#navHome, #homePage li#navHome a:hover,  
#contactPage li#navContact, #contactPage li#navContact a:hover,
.aboutPage li#navAbout, .aboutPage li#navAbout a:hover,
.servicePage li#navServices, 
.resourcePage li#navResources, 
.portfolioPage li#navPortfolio
{
	background: #fff;
}

/* Give the link text a contrasting color  */
#homePage li#navHome a, 
.aboutPage li#navAbout a,
#contactPage li#navContact a, 
body.servicePage li#navServices > a,    /* The child selector targets the top level in all but IE6*/
body.resourcePage li#navResources > a,
body.portfolioPage li#navPortfolio > a
{
	color: #030;	        
}
/* ------------------------ End of Navigation Styling ------------------------------------ */
/* Local Nav Styling -- For future use   */
.localNav { 
	font-size: 1.2em; 
	font-weight: bold;
	margin-bottom: 15px;
}
.localNav h1 {
	font-size: 1.25em;	
	color: #FFC18A;
}
.localNav a { color: #FFD2AA;}
.localNav ul {
	list-style-type:none;	
	border: none;
}
localNav li { margin: 0 0 .8em 1em;}
.localNav li { 
	margin: 0;
}
.localNav ul a { 
	display: block; /* make it expand to fit its container */
	padding: .5em 0 .5em 1em;
	text-decoration:none;		
	border: 1px #ABCDCA outset;
	background-color: #004F2E;
}
.localNav a:hover { color: #000; text-decoration: none;}
.localNav ul a:hover { 
	background-color:#3F6; 
}
/* -------------------   Inner Container Backgrounds  ------------------------------ */
/* backgrounds for rounded corners  */
#contentInner {
	background: url(../images/boxbg/rcWhite580px/rc_top.jpg) top left no-repeat;	
}
#contentInnerInner {
	background: url(../images/boxbg/rcWhite580px/rc_bottom.jpg) bottom left no-repeat;
}

div.promoBox {
	background: url(../images/boxbg/rcGreen270px/rc_middle.jpg) top left repeat-y;	
}
div.promoBox .innerDiv {
	background: url(../images/boxbg/rcGreen270px/rc_top.jpg) top left no-repeat;
}
div.promoBox .innerInnerDiv {
	background: url(../images/boxbg/rcGreen270px/rc_bottom.jpg) bottom left no-repeat;	
	padding: 10px 0; 
}
/* use classes to change the backgrounds */
div.promoBox.color2 {
	background: url(../images/boxbg/rcBlue270px/rc_middle.jpg) top left repeat-y;	
}
div.promoBox.color2 .innerDiv {
	background: url(../images/boxbg/rcBlue270px/rc_top.jpg) top left no-repeat;	
}
div.promoBox.color2 .innerInnerDiv {
	background: url(../images/boxbg/rcBlue270px/rc_bottom.jpg) bottom left no-repeat;	
}
/* change styles for specific boxes */
body#homePage div.promoBox ul { font-weight: bold;}
body#homePage div.promoBox ul { font-weight: bold;}
div.promoBox.color3 {
	background-image: url(../images/boxbg/rcPaleGreen270px/rc_middle.jpg);	
	color:#096;
}
div.promoBox.color3  .innerDiv {
	background-image: url(../images/boxbg/rcPaleGreen270px/rc_top.jpg);		
}
div.promoBox.color3  .innerInnerDiv {
	background-image: url(../images/boxbg/rcPaleGreen270px/rc_bottom.jpg);	
}
div.promoBox.color4 {
	background-image: url(../images/boxbg/rcPaleYellow270px/rc_middle.jpg);	
	color:#096;
}
div.promoBox.color4  .innerDiv {
	background-image: url(../images/boxbg/rcPaleYellow270px/rc_top.jpg);		
}
div.promoBox.color4  .innerInnerDiv {
	background-image: url(../images/boxbg/rcPaleYellow270px/rc_bottom.jpg);	
}
/* end of backgrounds for rounded corners */
/* overrides for square corners */
/* We can use background images here for more interest  */
div.promoBox.square3 {
	background-image: none;
	background-color: #6F9;
}

div.promoBox.square3  .innerDiv {
	background-image: none	
}

div.promoBox.square3  .innerInnerDiv {
	background-image: none;
	border: thin solid #EAFFEA;
}
/* end of overrides for square corners  */
#contentInnerInner {
	padding: 1em;	
}
#content h1, #content h2{
	color: #033;
	margin: .25em 0;
}
#content h2 { color: #033;}
#content h1 { margin-top: 0; }
#content h1 span { 
	font-size: .85em;
	color: #004FC4;
}
#content .highlight {
	font-weight: bold;
	color: #00663A;     
}
#content p {
}
#content ul {
	margin-left: 1em;
}

#promo h2 {
	font-size: 1.4em;	
}
#promo p { 
	margin-bottom: 35px;
}
#promo ul {
	/* list-style-image:url(images/bullet.png); */
	/* list-style-type:square; */
	margin-left: 3em;
}
div.promoBox { margin-bottom: 1em;}
div.promoBox .innerInnerDiv { padding: .25em 1em 1em 1em;}
#footer {
	color: #fff;
	font-size: .75em;
	text-align:center;
	border-top: 1px solid #033;
	background-color:#004F2E;
}



/* ----------------------------------------- Styles That Apply to Specific Pages -------------------------------------- */
body#linksPage ul { 
	list-style-type:none;
	margin-left: 0;
}
body#linksPage img { 
	padding-right: 1em;
}
/*  Image replacement for Page Headings */
/*
#content h1 {
	height: 0px;
	overflow: hidden;
	background-repeat: no-repeat;
	padding: 37px 0 0 0 
}

#homePage #content h1 { 
	background:url(images/pageHeadings/home.jpg) no-repeat;
}
#servicesPage #content h1 { 
	background:url(images/pageHeadings/services.jpg) no-repeat;
}
#servicesProgramming #content h1 { 
	background:url(images/pageHeadings/servicesProgramming.jpg) no-repeat;
}
#servicesDesign #content h1 { 
	background:url(images/pageHeadings/servicesDesign.jpg) no-repeat;
}
#portfolioPage #content h1 { 
	background:url(images/pageHeadings/portfolio.jpg) no-repeat;
}
#portfolioDesign #content h1 { 
	background:url(images/pageHeadings/portfolioDesign.jpg) no-repeat;
}
#portfolioPHP #content h1 { 
	background:url(images/pageHeadings/portfolioPHP.jpg) no-repeat;
}
#portfolioJavaScript #content h1 { 
	background:url(images/pageHeadings/portfolioJavascript.jpg) no-repeat;
}
#resourcePage #content h1 { 
	background:url(images/pageHeadings/resources.jpg) no-repeat;
}
#glossaryPage #content h1 { 
	background:url(images/pageHeadings/glossary.jpg) no-repeat;
}
#linksPage #content h1 { 
	background:url(images/pageHeadings/links.jpg) no-repeat;
}
#contactPage #content h1 { 
	background:url(images/pageHeadings/contact.jpg) no-repeat;
}
*/
/* -----------------------------------------  Contact Form Styles ----------------------------------------------------- */
form {
	width:600px;
	font-size:1.1em;
	line-height:1.5em;
	margin-top: 0;

}
#contactFlash {
	 width: 220px; 
	 position: absolute;
	 top: 8em;
	 right: 0px;
}
#contactPage #middleContainer {
	position: relative;  /* set positioning context */	
}
fieldset {
	padding: 0px 0 25px 30px;
	margin: 10px 0 0 0;
	border: thin solid #006633;
}
legend {
	font-size:1em;
	font-weight: bold;
	padding: 0 5px;
	color:#006633;
}
label {
	display:block;
	margin: 5px 0 5px 0;
}

.radioLabel {
	padding: 0 10px 0 2px;
}
input#realname, input#email, input#phone, input#companyName {
	width:18em;
}
input#phone { width: 8em; }
input#ext { width: 5em;}
input#websiteUrl { width: 15em;}
textarea {
	width: 80%;
	height:150px;
}
select {
	width:10em;
}	
fieldset#feedback input{
	margin-right: .5em;
	margin-left: 2em;
}
fieldset#feedback .firstItem {
	margin-left: 0;
}
.inline { display: inline;}
label.supplemental, label span.supplemental { 
	font-size: .7em;
	color: #03C;
	margin-left: 1em;
}
form p.footnote {
	text-align: center;	
}
input.button {
	display: block;
	font-size: 1.3em;
	background-color: #093;
	color: #FFF;
	border: 2px #9cf outset;
	margin-left: auto; margin-right: auto;
	margin: .5em auto;
}
input.button:hover { 
	background-color:#3C6;
}
.fieldError { color: #ff0000; }
fieldset#feedback {
	padding-top: 5px;	
}
/* The following are temporary.  I need to convert the success page to a css layout */
td.col_label { width: 10em; vertical-align:top;}
#contactPage #errorMessage2 { color: #F00; text-align: center;}
#contactPage p#errorMessage { margin: 0; padding: 0;}
/* ------ end of form styles ------ */
/* ------ Styles for Portfolio Page  --- */
div.portfolioItem { 
	clear: both;
	border: thin solid #999;
	margin-bottom: 15px;
	padding: 5px;
	overflow: auto;  /* force div to expand to enclose content */
}
div.portfolioItem div.imageWrapper {
	float: left;
	width: 210px;
}
div.portfolioItem img {
	
}
div.portfolioItem div.portfolioText {
	margin-left: 210px;	
}
div.portfolioItem h2 {
	line-height: 1em;
	font-size: 1.3em;
}
/* ------ Styles for about page --- */
#aboutBackgroundPage #content img {
	float: right;
}
/* ------  Styles for glossary page  ----- */
#glossaryPage .item h3 { font-size: 1.25em;}
#glossaryPage #content li { line-height: 1.1em;} 
/* ------  end of glossary page styles ---- */
/*  Hacks  */
/* Force wrapper div2 to expand to the height of it's content: */
/* #twoColWrapper { overflow: auto;} */
#twoColWrapper:after,
div.portfolioItem:after
{ 
	content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; 
} 

/* Styles for Pausing Scroller */
div.pauseScroll {
	padding: 0; margin: 0;
}
#pscroller1.pauseScroll {
	position: relative; 
	overflow: hidden;
}
#pscroller1 .scrollInnerDiv p{
	margin: 1em;
}
#pscroller1{
width: 100px;;
width: auto;
height: 200px;
padding: 5px;
}

#pscroller2{
width: 350px;
height: 20px;
}
.someclass{ /*class to apply to scroller */
}

/* End of Styles for Pausing Scroller */