/********************************************/
/***               Reset                  ***/
/********************************************/
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {  
	margin: 0; padding: 0; border: 0; outline: none;
}

/********************************************/
/***               Global                 ***/
/********************************************/
body {font-size: 62.5%;color: #fff;font-family: Arial, Helvetica, sans-serif;background: url(../images/body_bg.jpg) repeat;text-align: center}
#mainConainer {width: 100%}
.innerContainer {margin: 0 auto;width: 960px;text-align: left}
.innerBannerContainer {margin: 0 auto;width: 960px;text-align: left;position: relative}
.innerVideoContainer {margin: 0 auto;width: 960px;text-align: left;position: relative}
.innerPortfolioContainer {margin: 0 auto;width: 960px;text-align: left;position: relative}

/*****  Headings  *****/
h1 {font-size: 2em}
h2 {font-size: 1.8em}
h3 {font-size: 1.6em}
h4 {font-size: 1.4em}
h5 {font-size: 1.2em}
h6 {font-size: 1em}

/*****  General  *****/
img.floatRight {margin: 10px 10px 10px 15px}
img.floatLeft {margin: 10px 15px 10px 0}
.clear {clear: both}
.displayNone {display:none}
.floatRight {float: right}
.floatLeft {float: left}

/*****  Links  *****/
a {color: #fff;text-decoration: underline}
a:visited {color: #fff;text-decoration: underline}
a:hover {color: #fff;text-decoration: none}

/*****  Paragraphs  *****/
p {padding-bottom: 20px;font-size: 1.4em;line-height: 1.8em}
p.textIndent {text-indent: 1.8em}

/*****  Un-Ordered Lists  *****/
ul {list-style-type: none;font-size: 1.3em}
ul li {padding: 0 0 4px 10px}
li.bullet {padding-left: 20px;background: url(../images/bullet.png) no-repeat;background-position: 0 5px}

/*****  Ordered Lists  *****/
ol {font-size: 1.3em}
ol li {margin-left: 30px;font-size: 1.3em;font-weight: bold;font-family: Georgia, "Times New Roman", Times, serif;color: #690101}
ol p {font-size: 13px;font-weight: normal;font-family: Arial, Helvetica, sans-serif;color: #333}

/*****  Blockquotes  *****/
blockquote {padding: 10px;display: block;width: 225px;text-align: right;color: #690101;font-family: Georgia, "Times New Roman", Times, serif;font-size: 20px;font-style: italic;letter-spacing: 1pt}
blockquote p {line-height: 23px}
blockquote em {color: #4c0101;font-size: 24px}
blockquote em.first {padding-right: 3px}
blockquote em.last {padding-left: 3px}
blockquote a {border-bottom: none}

/********************************************/
/***              Masthead                ***/
/********************************************/
#masthead {position: relative;height: 125px}
#logo {margin: 30px 0 0 15px}
#mainMenu {margin-right: 15px;float: right}
#mainMenu li {margin: 0;padding: 0;float: left}
#mainMenu li:hover {background: url(../images/menu_hover_bg.jpg) repeat-x}
#mainMenu a {margin: 0;padding: 25px 20px 20px 20px;display: block;color: #fff;background: url(../images/menu_seperator.jpg) no-repeat top left;text-decoration: none;border: none;font-size: 14px;letter-spacing: 1pt}
#mainMenu a.first {background: none}

/********************************************/
/***           Home Page Banner           ***/
/********************************************/
#banner {position: relative;height: 404px;background: url(../images/banner_bg.jpg) repeat-x}
.bannerContainer {}
.bannerRight {margin: 30px 0 0 0;float: right;width: 425px;height: 344px}
h2.banner {margin-bottom: 10px;color: #ddc8a9;font-size: 28px;font-weight: normal;letter-spacing: 2pt}
.bannerRight p{padding: 0}
.bannerRight a {margin: 10px 0 0 250px;width: 152px;height: 38px;display: block;text-indent: -999em;background: url(../images/view_video_button.jpg) no-repeat top left}
.bannerRight a:hover {background-position: bottom left}
.bannerLeft { width: 480px; height: 360px; display: block;}
.bannerVid {margin: 10px 0 0 15px}
#image1 {background:url(../images/splash6.jpg) no-repeat;display:block;width:480px;height:360px;text-align:center}
#image2 {background:url(../images/splash1.jpg) no-repeat;display:block;width:480px;height:360px;text-align:center}
#image3 {background:url(../images/splash5.jpg) no-repeat;display:block;width:480px;height:360px;text-align:center}

div.scrollable {position:relative;overflow: hidden;width: 960px !important;height:340px}
div.scrollable div.bannerContainer {width:960px}
div.scrollable div.items div.active {}

#prevBannerButton {position: absolute;left: 535px;top: 335px;z-index: 999}
#nextBannerButton {position: absolute;left: 559px;top: 335px;z-index: 998}
a.prev, a.prevPage {display: block;width: 24px;height: 26px;background: url(../images/portfolio_slider_left.jpg) no-repeat top left;margin: 0px;cursor: pointer}
a.next, a.nextPage {display: block;width: 24px;height: 26px;background: url(../images/portfolio_slider_right.jpg) no-repeat top left;margin: 0px;cursor: pointer}
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {background-position: bottom right}

#banner #navi {position: absolute;top: 335px;left: 595px;z-index: 997}
#banner #navi a {width: 18px;height: 20px;float:left;margin:3px;background:url(../images/portfolio_slider_pagination.png) no-repeat top left;cursor:pointer}
#banner #navi a:hover {background-position: top right}
#banner #navi a.activeSlide {background-position: top right}

/********************************************/
/***            Main Content              ***/
/********************************************/
#mainContent {
	margin: 0 25px 25px 0;
	padding: 55px 15px;
	position: relative;
	float: left;
	width: 535px
}
#mainContent2 h1 {margin-bottom: 10px;color: #ddc8a9;font-size: 24px;letter-spacing: 2pt}
#mainContent2 {
	margin: 0 25px 25px 0;
	padding: 55px 15px;
	position: relative;
	float: left;
	width: 575px
}
#mainContent h1 {margin-bottom: 10px;color: #ddc8a9;font-size: 24px;letter-spacing: 2pt}

#fpOtherWork {margin: 0 0 20px 60px;width: 960px;height: 200px}
#fpOtherWork .fpOtherWorkColumn {margin: 0 65px 0 0;width: 235px;height: 165px;float: left;position: relative}
#fpOtherWork .fpOtherWorkColumn a {display: block;text-indent: -999em}
#fpOtherWork .overlay {background: url(images/home_overlay_bg.jpg) repeat-x}

.fpThumbOverlay {width: 235px;height: 165px;position: absolute;top: 0;left: 0;background: url(../images/fp_other_work_overlay.png) no-repeat}

.fpThumbOverlay a.viewPortfolio {position: relative;margin: 60px 0 0 35px;width: 164px;height: 38px;float: left;text-indent: -5000px;background: url(../images/view_portfolio_button.jpg) no-repeat top left;z-index: 999}
.fpThumbOverlay a.viewPortfolio:hover {background-position: bottom left}

/********************************************/
/***              Sidebar                 ***/
/********************************************/
#sideBar {margin: 45px 0 25px 10px;padding: 10px;position: relative;float: left;width: 335px}
#sideBar h2 {margin: 0 0 15px 7px;color: #ffffff;font-size: 20px;letter-spacing: 2pt}

#latestBlogBox {width: 337px;background: url(../images/latestBlogBox.jpg) no-repeat top left}
#latestBlogBox ul {}
#latestBlogBox ul li {
	position: relative;
	margin: 0;
	padding: 0;
	width: 337px;
	height: 250px;
	background: url(../images/sidebar_spacer.jpg) no-repeat bottom left;
	overflow: hidden
}
#latestBlogBox h4 {margin: 0;padding: 7px 0 3px 7px;font-size: 13px;font-weight: bold;color: #cfbea2}
#latestBlogBox p {margin: 0 0 0 0;padding: 0 15px 0 7px;font-size: 12px;color: #c5c5c5}
#latestBlogBox a {font-size: 13px;font-weight: bold;color: #cfbea2;text-decoration: none}
#latestBlogBox a:hover {color: #7D1E00}

/********************************************/
/***               Footer                 ***/
/********************************************/
#footerContainer {background: url(../images/footer_bg.jpg) repeat-x}
#innerFooterContainer {margin: 0 auto;position: relative;clear: both;width: 960px;height: 241px;text-align: left}
h3.footer {color: #ddc8a9;font-size: 18px;letter-spacing: 2pt}
.footerLeft {padding: 45px 0 0 15px;width: 300px}
.footerLeft p {margin: 10px 0 10px 0;padding: 0;font-size: 13px}
.footerLeft ul {margin: 25px 0 0 0}
.footerLeft ul li {margin: 0 20px 0 0;padding: 0;display: inline}
.footerLeft ul li a {color: #fff;text-decoration: none;border-bottom: 1px solid #fff}
.footerLeft ul li a:hover {color: #7D1E00;border-bottom: 1px solid #7D1E00}
.footerRight {margin: 22px 0 0 15px;padding: 25px 0 0 65px;float: right;width: 560px;height: 150px;background: url(../images/footer_spacer.jpg) no-repeat top left}
.footerRight p {margin: 7px 0 3px 0;padding-right: 85px;padding-bottom: 7px}

/********************************************/
/***          Portfolio Player            ***/
/********************************************/
#portfolioSliderNavigation {width: 960px;position: relative}
#portfolioSlider {position: relative;height: 290px;background: url(../images/portfolio_slider_bg.jpg) repeat-x bottom left}
#portfolioSlider .sliderThumb {width: 185px;height: 182px}
.portfolioScroll div {width: 960px}
.portfolioScroll .one {position: relative}
.portfolioScroll .two {position: absolute;left: 230px; top: 0}
.portfolioScroll .three {position: absolute;left: 480px; top: 0}
.portfolioScroll .four {position: absolute;left: 730px; top: 0}
#portfolioSlider .sliderThumb a {width: 185px;display: block}

#portfolioVideoContainer {margin: 30px 0 35px 160px}
a#portfolioPlayer {width: 640px; height: 385px;display: block;cursor: pointer}

#portfolioVideoContainer .playButton {width: 83px;height: 83px;position: absolute;top: 275px;right: 875px;background: url(../images/play_large.png) no-repeat;cursor: pointer}

#portfolioVideoContainer img {margin-bottom: 10px}
#portfolioVideoContainer p {margin: 8px 0 5px 35px;padding: 0;font-size: 13px}
#portfolioVideoContainer p span {margin-right: 7px;font-size: 14px;color: #cba776}

.sliderThumb .playButton {position: absolute;width: 40px;height: 40px;background: url(../images/play.png) no-repeat top left;top: 45px;left: 70px;cursor: pointer}

div.portfolioScroll {position:relative;overflow: hidden;width: 960px;height:258px}
div.portfolioScroll {margin: 35px 15px 0 !important;width: 999em;clear:both}
div.portfolioScroll div.active {}

#portfolioSlider .prevPortfolioButton {position: absolute;right: 56px;top: 40px;z-index: 999;width: 24px;height: 26px}
#portfolioSlider .nextPortfolioButton {position: absolute;right: 33px;top: 40px;z-index: 998;width: 24px;height: 26px}
#portfolioSlider a.prev, #portfolioSlider a.prevPage {display: block;width: 24px;height: 26px;background: url(../images/portfolio_slider_left.jpg) no-repeat top left;margin: 0px;cursor: pointer}
#portfolioSlider a.next, #portfolioSlider a.nextPage {display: block;width: 24px;height: 26px;background: url(../images/portfolio_slider_right.jpg) no-repeat top left;margin: 0px;cursor: pointer}
#portfolioSlider a.prev:hover, #portfolioSlider a.next:hover, #portfolioSlider a.prevPage:hover, #portfolioSlider a.nextPage:hover {background-position: bottom right}

#portfolioSlider #navi {position: absolute;right: 99px;top: 40px}
#portfolioSlider #navi a {width: 18px;height: 20px;float:left;margin:3px;background:url(../images/portfolio_slider_pagination.png) no-repeat top left;cursor:pointer}
#portfolioSlider #navi a:hover {background-position: top right}
#portfolioSlider #navi a.activeSlide {background-position: top right}

/********************************************/
/***         Portfolio Other Work         ***/
/********************************************/
.otherThumbBlock {margin: 0 0 65px 0;position: relative}
h2.otherWork {margin: 0 0 20px 15px;font-size: 24px;color: #DDC8A9}
.thumbOtherPortfolio {width: 386px;height: 187px}
.thumbOverlay {width: 360px;height: 161px !important;position: absolute;top: 13px;left: 13px;background: url(../images/other_work_thumb_hover_bg.png) no-repeat;border: 1px solid #0B0B0B}
.thumbOverlayBG {}

.thumbOverlay h4 {margin: 40px 0 0 0;display: block;text-align: center;color: #a02700;font-size: 17px;font-weight: normal;letter-spacing: 1pt}
.thumbOverlay h4 span {margin-left: 15px;color: #c2c2c2;font-size: 12px;letter-spacing: 0}
.thumbOverlay a.moreInfo {margin: 30px 0 0 53px;width: 112px;height: 30px;float: left;text-indent: -5000px;background: url(../images/more_info_button.jpg) no-repeat top left}
.thumbOverlay a.viewSite {position: relative;margin: 30px 0 0 35px;width: 112px;height: 30px;float: left;text-indent: -5000px;background: url(../images/view_site_button.jpg) no-repeat top left;z-index: 999}
.thumbOverlay a.viewSite:hover, .thumbOverlay a.moreInfo:hover {background-position: bottom left}

#otherWorkContainer {margin: 45px 0 0 0}
.twoColLeft {margin: 0 0 0 15px;float: left;width: 390px}
.twoColRight {margin: 0 0 0 140px;float: left;width: 390px}
#twoColLeft {padding: 55px 0 55px 15px;width: 390px}
#image4, #image5, #image6{ width:235px;height:165px;text-align:center}
#image4 {background:url(../images/splash2.jpg) no-repeat}
#image5 {background:url(../images/splash3.jpg) no-repeat}
#image6 {background:url(../images/splash4.jpg) no-repeat}
.thickboxColumn img, .thickboxColumnLast img {margin-top: 60px}


div.otherWorkOverlay {background-image:url(../images/overlay/white.png);width:600px;height:470px;display:none;padding:55px}
div.otherWorkOverlay div.close {background-image:url(../images/overlay/close.png);position:absolute;right:5px;top:5px;cursor:pointer;height:35px;width:35px}

/********************************************/
/***            Contact Page              ***/
/********************************************/
.contactInfo {margin: 15px 0 30px 0;padding: 10px 0;width: 550px;background: #f2f2f2;border: 1px solid #e1e1e1}
.contactInfo li.title {color: #333;font-size: 14px;font-weight: bold;text-decoration: underline}
.address {padding-left: 25px}
.address li {padding: 2px 0}
.phoneRight {float: right;width: 225px}
.phoneRight li {padding: 2px 0}
.phoneRight .label {font-weight: bold}
.phoneRight .tollFree {padding-left: 55px}
.phoneRight .local {padding-left: 23px}
.phoneRight .fax {padding-left: 34px}
/************ Contact Form *****************/
.contactForm {margin: 0 0 30px 0;padding: 25px 0 3px 10px;width: 540px;background: #0f0f0f;border: 1px solid #1a1a1a}
.contactForm label {font-size: 13px;float: left;width: 120px;margin-left:1em;color: #fefefe}
.contactForm input {margin-bottom: 8px;padding: 4px 0 4px 3px;width: 370px;background: url(../images/textarea_bg.gif) no-repeat top left;border: 1px solid #aaa}
.contactForm textarea {padding-left: 3px;width: 370px;height: 130px;background: url(../images/textarea_bg.gif) no-repeat top left;border: 1px solid #aaa}
.contactForm select {margin: 0 0 8px 0;padding: 4px 0;width:375px}
.contactForm option {}
.contactForm #submitButton {margin: 15px 0 0 400px;width: 107px;height: 38px;background: url(../images/form_submit.jpg) no-repeat;cursor: pointer;text-indent: -999em;border: none}
.contactForm #submitButton:hover {background-position: bottom left}
/************ Success & Error Messages *****************/
.success {margin: 45px 32px 0 0;text-align: center;background: #D9E7CD;border: 1px solid #87C445}
.success h3 {margin: 0;padding: 12px 0 3px 0;font-family: 'Arial Black';font-size: 17px;color: #495E16;text-transform: uppercase;letter-spacing: 1pt;background: none;border: none}
.success p {color: #333}
.error {margin: 3px 0 1px 135px;color: #8f0101}
.phpError {padding-left: 5px;;color: #8f0101}
.required {padding-left: 3px;color: #8f0101;font-weight: bold}
.requiredNote p {margin: 20px 0 5px 0;padding: 0px;color: #fefefe;font-size: 12px}
.loading {margin: 0 0 0 260px}

#contactBox {width: 325px;}
#contactBox ul {margin: 7px 0 0 5px}
#contactBox li {padding: 0 0 8px 20px;background: url(../images/bullet.png) no-repeat;background-position: 0 5px}
#contactBox li.name {font-size: 15px;color: #D7C3A5}


h2.jqueryBeginnersHeading {margin-bottom: 7px;width: 360px;height: 35px;background: url(../images/jquery_beginners_heading.png) no-repeat;text-indent: -999em}
h2.divingPhpHeading {margin-bottom: 7px;width: 360px;height: 35px;background: url(../images/diving_php_heading.png) no-repeat;text-indent: -999em}
h2.wordpressDesignersHeading {margin-bottom: 7px;width: 399px;height: 35px;background: url(../images/wordpress_designers_heading.png) no-repeat;text-indent: -999em}