/* 
------------------------------
 Standard Elements 
------------------------------
*/

body { margin: 0; padding: 0; font-size: 1.0em; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; background: #333333; color: #494949; }
* { margin: 0; padding:0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

img { border: 0px; }
.l { float:left; }
.r { float:right; }
.clear { clear: both; width: 100%; height: 1px; font-size: 1px; }
ul { margin: 0px; padding: 0px; }
ul li { margin: 0px; padding: 0px; list-style: none; background: none; }

ul.bullet { margin: 10px 0; }
ul.bullet li { list-style: disc; margin-left: 20px; }

a { color: #58A1D1; text-decoration: underline; }
a:hover { color: #1271AD; text-decoration: underline; }

table th { vertical-align: top; text-align: left; }

table td { vertical-align: top; text-align: left; }
fieldset { border: 0px; }

p { line-height: 160%; font-size: 1.0em; }



/* 
------------------------------
 Design Elements 
------------------------------
*/

.fixedWrap { width: 800px; margin: 0 auto; height: auto; overflow: hidden; }

#navWrap { background: url('test/images/nav-bg.png') repeat-x; 
height: 47px; }
#navWrap #navPhone { float: left; width: 140px; color: #FFCC00; font-size: 0.8em; padding: 10px 0 0 0; }
#navWrap #navList { }
#navWrap #navList ul { float: right; font-size: 0.75em; color: #FFFFFF; font-weight: bold; }
#navWrap #navList ul li { float: left; margin: 0 5px; height: 35px; padding-top: 12px; }
#navWrap #navList ul li a { text-decoration: none; color: #FFFFFF; text-transform: uppercase; }
#navWrap #navList ul li a:hover { text-decoration: none; color: #FFCC00; }
#navWrap #navList ul li.on { background: url(images/nav-on.png) no-repeat center; }

#bannerWrap { background: #FFFFFF url(images/banner-bg.png) repeat-x center top; }
#bannerWrap #banner #leftColumn { float: left; width: 267px; }
#bannerWrap #banner #leftColumn #logo { padding: 12px 0 20px 0; }
#bannerWrap #banner #leftColumn #intro { padding: 5px 5px 10px 5px; font-size: 0.95em; line-height: 160%; }
#bannerWrap #banner #leftColumn #intro p { padding: 6px 0 6px 0; }
#bannerWrap #banner #leftColumn #intro p a { font-size: 1.2em; font-weight: bold; }
#bannerWrap #banner #rightColumn { float: left; width: 533px; }
#bannerWrap #banner #rightColumn #photoFrame { margin: 20px 0 0 35px; }
#bannerWrap #banner #rightColumn #multiPhotos { padding: 15px 0 0 46px; }
#bannerWrap #banner #leftColumn h1 { font-size: 1.3em; color: #0D89D6; padding: 5px 0 8px 0; }

#preFooterWrap { background: url(images/prefooter-bg.png) repeat-x; border-top: 1px solid #333333; border-bottom: 1px solid #FFFFFF; text-align: center; color: #FFFFFF; font-weight: bold; font-size: 1.2em; padding: 6px 0;  }
#preFooterWrap .break { padding: 0 40px; }
#preFooterWrap a { color: #FFFFFF; text-decoration: none; }
#footerWrap { background: #333333; }
#footerWrap #footer { font-size: 0.75em; color: #999999; padding: 30px 0; }
#footerWrap #footer a { color: #999999; text-decoration: none; } 
#footerWrap #footer a:hover { color: #FFFFFF; text-decoration: underline; } 



/* 
------------------------------
 Content Elements
------------------------------
*/

#contentWrap { background: #E8E8E8 url(images/content-tear.png) repeat-x center top; padding: 20px 0;}
#contentWrap #content {	text-align: center;
}
#contentWrap #content #box3 { float: left; width: 257px; margin: 0 4px; }
#contentWrap #content #box2 { float: left; width: 257px; margin: 0 4px; }
#contentWrap #content #box1 { float: left; width: 257px; margin: 0 4px; }
#contentWrap #content #box3 {margin: 0 0 0 5px; }
#contentWrap #content .boxBottom { height: 10px; width: 257px; float: left; }
#contentWrap #content .boxTop { height: 10px; width: 257px; float: left; }
#contentWrap #content .box2 .boxContent { float: left; width: 237px; padding: 0 10px 10px 10px; font-size: 0.8em; }
#contentWrap #content .box1 .boxContent { float: left; width: 237px; padding: 0 10px 10px 10px; font-size: 0.8em; }
#contentWrap #content .box1 .boxContent { background: #E0E0E0 url(images/box-bottom.png) no-repeat bottom; }
#contentWrap #content .box2 .boxContent { background: #F3F3F3 url(images/box2-bottom.png) no-repeat bottom; }
#contentWrap #content .boxContent h2 { text-align: center; font-size: 1.3em; color: #0D8CD9; padding: 10px 0; }
#contentWrap #content .boxContent p { padding: 10px 0 0 0; }
#contentWrap #content .boxContent p.link { text-align: center; }
#contentWrap #content .homePic { width: 237px; text-align: center; }

#contentWrap #content #contentLeft { float: left; width: 523px; padding: 0 10px 0 0; font-size: 0.85em; }
#contentWrap #content #contentLeft p { padding: 0 0 20px 0;
	color: #1271AD;
}
#contentWrap #content #contentLeft .highlight { color: #0D89D6; }
#contentWrap #content #contentLeft h2 { font-size: 1.1em; color: #0D8CD9; padding: 5px 0; }
#contentWrap #content #contentRight { float: left; width: 267px; }
#contentWrap #content #contentRight #youTubeVideo { margin-bottom: 10px; }
#contentWrap #content #contentRight #actionForm { width: 247px; height: 300px; text-align: center; background: url(images/sidebar-bg.png) no-repeat; padding: 10px; color: #FFFFFF; font-size: 0.75em; }
#contentWrap #content #contentRight #actionForm h3 { font-size: 1.4em; color: #FFCC00; margin: 4px 0 1px; text-align: center; }
#contentWrap #content #contentRight #actionForm p { margin-bottom: 5px; text-align: left; }
#contentWrap #content #contentRight #actionForm label { display: none; }
#contentWrap #content #contentRight #actionForm input { width: 180px; margin: 4px 0; font: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; padding: 4px 6px;  }
#contentWrap #content #contentRight #actionForm textarea { width: 180px; height: 75px; margin: 4px 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; padding: 4px 6px; }
#contentWrap #content #contentRight #actionForm input.button { width: 100px; margin: 4px 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; padding: 1px 6px; margin: 2px 0 0 0; }

#contentWrap #content #contentLeft blockquote.contact { padding: 0 0 0 10px; }
#contentWrap #content #contentLeft blockquote.quote { font-style: italic; padding: 10px 0 0; }
#contentWrap #content #contentLeft blockquote.quote .bubbleTop { height: 8px; }
#contentWrap #content #contentLeft blockquote.quote .bubbleBottom { height: 24px;  }
#contentWrap #content #contentLeft blockquote.quote p { padding: 6px 20px 2px 20px; width: 475px; text-align: justify; line-height: 200%; background: url('images/bubble-bg.png') repeat-y;
}
#contentWrap #content #contentLeft p.signature { color: #0D8CD9; text-align: right; padding-right: 10px; font-size: 0.95em; }

#contentWrap #content #contentLeft ol li { padding: 10px 0; font-size: 0.95em; line-height: 150%; }

#contentWrap #content #contentLeft.siteMap { }
#contentWrap #content #contentLeft.siteMap ul { padding: 12px 5px 5px 30px; }
#contentWrap #content #contentLeft.siteMap li { list-style-type: disc; padding: 5px 0 5px 0; }
#contentWrap #content #contentLeft.siteMap a { padding: 2px 10px; text-decoration: none; border-bottom: 0;}
#contentWrap #content #contentLeft.siteMap a:hover { text-decoration: underline; }

/* 
------------------------------
 Glider Styles 
------------------------------
*/

#myGlider { margin-bottom: 100px;}
/* modify width and height of scrolling section if necessary	*/		
#myGlider div.scroller { width: 521px; height: 307px;	overflow: hidden; border: 0 solid #cccccc;	}
/* modify width and height of each section as needed (should match the size of the scroller window)	*/		
#myGlider div.scroller div.section { width:521px;	height:307px; overflow:hidden; float:left; padding:0; }
#myGlider div.scroller div.content { width: 10000px;
	text-align: center;
}

#pf1 { background: url(images/1.jpg) no-repeat center; }
#pf2 { background: url(images/2.jpg) no-repeat center; }
#pf3 { background: url(images/3.jpg) no-repeat center; }
#pf4 { background: url(images/4.jpg) no-repeat center; }
#pf5 { background: url(images/5.jpg) no-repeat center; }
#pf6 { background: url(images/6.jpg) no-repeat center; }
#pf7 { background: url(images/7.jpg) no-repeat center; }
#pf8 { background: url(images/8.jpg) no-repeat center; }
#pf9 { background: url(images/9.jpg) no-repeat center; }
#pf10 { background: url(images/10.jpg) no-repeat center; }
#pf11 { background: url(images/11.jpg) no-repeat center; }
#pf12 { background: url(images/12.jpg) no-repeat center; }
#pf13 { background: url(images/13.jpg) no-repeat center; }
#pf14 { background: url(images/14.jpg) no-repeat center; }
#pf15 { background: url(images/15.jpg) no-repeat center; }
#pf16 { background: url(images/16.jpg) no-repeat center; }
#pf17 { background: url(images/17.jpg) no-repeat center; }
#pf18 { background: url(images/18.jpg) no-repeat center; }
#pf19 { background: url(images/19.jpg) no-repeat center; }
#pf20 { background: url(images/20.jpg) no-repeat center; }
#pf21 { background: url(images/21.jpg) no-repeat center; }
#pf22 { background: url(images/22.jpg) no-repeat center; }
#pf23 { background: url(images/23.jpg) no-repeat center; }
#pf24 { background: url(images/24.jpg) no-repeat center; }
#pf25 { background: url(images/25.jpg) no-repeat center; }
#pf26 { background: url(images/26.jpg) no-repeat center; }
#pf27 { background: url(images/27.jpg) no-repeat center; }
#pf28 { background: url(images/28.jpg) no-repeat center; }
#pf29 { background: url(images/29.jpg) no-repeat center; }
#pf30 { background: url(images/30.jpg) no-repeat center; }


.pfContent { background: url(images/portfolio-frame.png) no-repeat center; height: 47px; width: 501px; color: #FFFFFF; font-size: 0.9em; padding: 260px 10px 0 10px;  }
.pfHighlight { color: #0D8CD9; font-weight: bold; }
.pfLeft { float: left; width: 270px; text-align: left; }
.pfRight { float: right; widows: 230px; text-align: right; }
#pfLeft { position: absolute; margin: 115px 0 0 -15px; }
#pfRight { position: absolute; margin: 115px 0 0 474px; }

#myGlider2 { }
/* modify width and height of scrolling section if necessary	*/		
#myGlider2 div.scroller { width: 486px; height: 277px;	overflow: hidden; border: 0 solid #cccccc;	}
/* modify width and height of each section as needed (should match the size of the scroller window)	*/		
#myGlider2 div.scroller div.section { width:486px;	height:277px; overflow:hidden; float:left; padding:0; }
#myGlider2 div.scroller div.content { width: 10000px; }

#pfh1 { background: url(images/project_image.png) no-repeat center; }
#pfh2 { background: url(images/design_image.png) no-repeat center; }
#pfh3 { background: url(images/demo_image.png) no-repeat center; }
#pfh4 { background: url(images/improvement_image.png) no-repeat center; }
.pfhContent { background: url(images/portfolio-frame-home.png) no-repeat center; height: 44px; width: 466px; color: #FFFFFF; padding: 233px 10px 0 10px; text-align: center;  }
.pfhContent h3 { font-size: 1.5em; }


/* 
------------------------------
 Form Elements
------------------------------
*/