/* ----------------------------------------
------------- HTML and Body ---------------
----------------------------------------- */

* {
margin: 0;
}

body {
background-image:url('bg.jpg');
background-color: white;
margin-top: 0;
margin-bottom: auto;
font-family: arial, helvetica, sans-serif !important;
font-size: 12px;
text-decoration: none !important;
line-height: 20px;
}

body a {
text-decoration: none;
color: #0195ff;
}

/* ----------------------------------------
----------------- Header ------------------
----------------------------------------- */

#headerBG {
position: relative;
top: 0;
width: auto;
height: 182px;
background-color: #f4f4f4;
text-align: right;
border-bottom:1px solid #d2d2d2;
background-image: url("images/headerTitle.gif");
background-repeat: no-repeat;
background-position: top center;
}

#navWrapper {
position: relative;
width: 960px;
height: 30px;
margin-left: auto;
margin-right: auto;
text-align: right;
background-color: #f4f4f4;
top:152px;
}

/* ----------------------------------------
--------------- Nav Menus -----------------
----------------------------------------- */

#navHome {
position: absolute;
right: 308px;
width: 72px;
height: 30px;
background-image: url("images/navHome.gif");
background-repeat: no-repeat;
padding-right: 60px;
}

#navHomeActive {
position: absolute;
right: 308px;
width: 72px;
height: 30px;
background-image: url("images/navHome.gif");
background-repeat: no-repeat;
padding-right: 60px;
background-position: 0 -36px;
}

#navAbout {
position: absolute;
right: 236px;
width: 72px;
height: 30px;
background-image: url("images/navAbout.gif");
background-repeat: no-repeat;
padding-right: 45px;
}

#navAboutActive {
position: absolute;
right: 236px;
width: 72px;
height: 30px;
background-image: url("images/navAbout.gif");
background-repeat: no-repeat;
background-position: 0 -36px;
padding-right: 45px;
}

#navPortfolio { 
position: absolute;
right: 144px;
width: 92px;
height: 30px;
background-image: url("images/navPortfolio.gif");
background-repeat: no-repeat;
padding-right: 30px;
}

#navPortfolioActive { 
position: absolute;
right: 144px;
width: 92px;
height: 30px;
background-image: url("images/navPortfolio.gif");
background-repeat: no-repeat;
padding-right: 30px;
background-position: 0 -36px;
}

#navBlog {
position: absolute;
right: 72px;
width: 72px;
height: 30px;
background-image: url("images/navBlog.gif");
background-repeat: no-repeat;
padding-right: 15px;
}

#navBlogActive {
position: absolute;
right: 72px;
width: 72px;
height: 30px;
background-image: url("images/navBlog.gif");
background-repeat: no-repeat;
padding-right: 15px;
background-position: 0 -36px;
}

#navContact {
position: absolute;
right: 0;
width: 72px;
height: 30px;
background-image: url("images/navContact.gif");
background-repeat: no-repeat;
}

#navContactActive {
position: absolute;
right: 0;
width: 72px;
height: 30px;
background-image: url("images/navContact.gif");
background-repeat: no-repeat;
background-position: 0 -36px;
}

#navHome:hover, #navAbout:hover, #navPortfolio:hover, #navTestimonials:hover, #navBlog:hover, #navContact:hover {
background-position: 0 -36px;
}

/* ----------------------------------------
----------------- Footer ------------------
----------------------------------------- */

 #footer {
position: relative;
clear: both;
bottom: 0;
height: 160px;
width: auto;
margin-left: auto;
margin-right: auto;
background-color: #d5d5d5;
text-align: center;
border-top: 1px solid #434343;
border-bottom: 35px solid black;
}

#footerContainer {
width: 960px;
margin-left: auto;
margin-right: auto;
height: 150px;
}

/* ----------------------------------------
--------- Footer Content - IE6 ------------
----------------------------------------- */

#footerLeft {
position: relative;
display: inline-block;
float: left;
width: 300px;       
vertical-align: top;
text-align: left;
}

#footerCenter {
position: relative;
display: inline-block;
float: left;
width: 300px;
vertical-align: top;
margin-left: 22px;
text-align: left;
}

#footerRight {
position: relative;
display: inline-block;
float: right;
width: 300px;    
vertical-align: top;
margin-left: 22px;
text-align: left;
}

/* Footer Text */

#footerLeft p {
font-size: 12px;
font-weight: bold;
}

#footerLeft span {
color: #0195ff;
font-weight: bold;
}

#footerCenter p {
font-size: 12px;
font-style: italic;
font-weight: bold;
}


/* -----------------------------------------
---- Footer Content - Other Browsers -------
----------------------------------------- */

html>body #footerLeft {
position: relative;
display: inline-block;
float: none;
width: 300px;       
vertical-align: top;
text-align: left;
}

html>body #footerCenter {
position: relative;
display: inline-block;
float: none;
width: 300px;
vertical-align: top;
margin-left: 22px;
text-align: left;
}

html>body #footerRight {
position: relative;
display: inline-block;
float: none;
width: 300px;    
vertical-align: top;
margin-left: 22px;
text-align: left;
}

/* Footer Text */

html>body #footerLeft p {
font-size: 12px;
font-weight: bold;
}

html>body #footerLeft span {
color: #0195ff;
font-weight: bold;
}

html>body #footerCenter p {
font-size: 12px;
font-style: italic;
font-weight: bold;
}

/* -----------------------------------------
---------------- Content BG ----------------
----------------------------------------- */

#wrapper {
min-height: 800px;
height: auto !important;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
width: 960px;
background-color: transparent !important;
}

#content {
min-height: 800px;
height: auto !important;
height: 100%;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;
height: 1000px;
width: 950px;
background-color: transparent !important;
color: #656565;
line-height: 20px;
}

/* -----------------------------------------
-------- Main Page Image SlideShow ---------
----------------------------------------- */

#portfolioDisplay {
width: 950px;
height: 380px;
clear: both;
}

#portfolioControls {
width: 950px;
height: 25px;
clear: both;
}

/* -----------------------------------------
-------- Three Column Layout - IE6 ---------
----------------------------------------- */

#left {
position: relative;
display: inline-block;
float: left;
width: 300px;       
vertical-align: top;
text-align: justify;
}

#center {
position: relative;
display: inline-block;
float: left;
width: 300px;
vertical-align: top;
margin-left: 22px;
text-align: justify;
}

#right {
position: relative;
display: inline-block;
float: right;
width: 300px;    
vertical-align: top;
margin-left: 22px;
text-align: justify;
}

/* -----------------------------------------
--------- Two Column Layout - IE6 ----------
----------------------------------------- */

#twoColLeft {
margin-top: 50px;
float: left;
position: relative;
display: inline-block;
width: 460px;       
vertical-align: top;
}

#twoColRight {
margin-top: 50px;
float: right;
position: relative;
display: inline-block;
padding-left:16px;
width: 470px;       
vertical-align: top;
}

/* ---- Two Column Layout Text ---- */

#twoColRight span {
color: #0195ff;
}

#twoColRight p {
font-weight: bold;
}

#twoColRight h1 {
size: 20px;
font-style: italic;
}

/* -----------------------------------------
---------- Portfolio Layout - IE6 ----------
----------------------------------------- */

#portfolioFull {
width: 950px;
color: #6e6e6e;
font-size: 12px;
}

#portfolioInfo {
width: 950px;
color: #6e6e6e;
}

#portfolioInfoLeft {
position: relative;
display: inline-block;
float: left;
width: 460px;       
vertical-align: top;
}

#portfolioInfoRight {
position: relative;
display: inline-block;
padding-left:16px;
width: 470px;       
vertical-align: top;
}

/* ---- Portfolio Layout Text ---- */

#portfolioInfoRight p {
font-size: 12px;
}

/* -----------------------------------------
--- Three Column Layout - Other Browsers ---
----------------------------------------- */

html > body #left {
position: relative;
display: inline-block;
float: none;
width: 300px;       
vertical-align: top;
text-align: justify;
}

html > body #center {
position: relative;
display: inline-block;
float: none;
width: 300px;
vertical-align: top;
margin-left: 22px;
text-align: justify;
}

html > body #right {
position: relative;
display: inline-block;
float: none;
width: 300px;    
vertical-align: top;
margin-left: 22px;
text-align: justify;
}

/* -----------------------------------------
---- Two Column Layout - Other Browsers ----
----------------------------------------- */

html > body #twoColLeft {
margin-top: 50px;
position: relative;
display: inline-block;
float: none;
width: 460px;       
vertical-align: top;
}

html > body #twoColRight {
margin-top: 50px;
position: relative;
display: inline-block;
float: none;
padding-left:16px;
width: 470px;       
vertical-align: top;
}

/* ---- Two Column Layout Text ---- */

html > body #twoColRight span {
color: #0195ff;
}

html > body #twoColRight p {
font-weight: bold;
}

html > body #twoColRight h1 {
size: 20px;
font-style: italic;
}

/* -----------------------------------------
---- Portfolio Layout - Other Browsers -----
----------------------------------------- */

html > body #portfolioFull {
width: 950px;
color: #6e6e6e;
font-size: 12px;
}

html > body #portfolioInfo {
width: 950px;
color: #6e6e6e;
}

html > body #portfolioInfoLeft {
position: relative;
display: inline-block;
float: none;
width: 460px;       
vertical-align: top;
}

html > body #portfolioInfoRight {
position: relative;
display: inline-block;
float: none;
padding-left:16px;
width: 470px;       
vertical-align: top;
}

/* Portfolio Layout Text */

html > body #portfolioInfoRight p {
font-size: 12px;
margin-top: -5px;
}

/* -----------------------------------------
-------------- Image Classes ---------------
----------------------------------------- */

.noBorder {
border: none;
}

.imgLeft {
float: left;
}

.imgRight {
float: right;
}

.bordered {
border: 1px solid black;
}

/* -----------------------------------------
----------- General Text Classes -----------
----------------------------------------- */

p {
margin-bottom: 10px;
margin-top: 5px;
line-height: 20px;
}

h1 { /* Size 20 Black Italicized Text Used in See the clients I've worked for heading */
font-style: italic;
margin-bottom:20px;
}

h1 span {
color: #0195ff;
}

html>body h1 { /* Size 20 Black Italicized Text Used in See the clients I've worked for heading */
size: 20px;
font-style: italic;
margin-bottom:12px;
}

h2 { /* Footer Header Text */
color: #01aad5;
font-size: 20px;
font-style: italic;
margin-top: 10px;
margin-bottom: 5px;
}

h3 { /* Portfolio Main Header - See some of the creative solutions */
font-size: 20px;
font-style: italic;
margin-top: 15px;
margin-bottom: 15px;
}

.centeredText { /* Header Text Applied to an H3 - I offer creative Solutions */
font-family: georgia!important;
margin-left: 25px;
}

h3 span {
color: #0195ff;
font-weight: bold;
}

h4 { /* Portfolio Page Main Header - Woodward Skateparks */
color: #01aad5;
font-size: 18px;
margin-bottom: -1px;
padding-bottom: 3px;
margin-top: 10px;
}

h5 { /* Home Page 3 Column Headers */
font-size: 18px;
font-style: italic;
color: #0195ff;
margin-top: 15px;
margin-bottom: 15px;
}

hr {
border: 1px solid #bbb;
margin-top: 3px;
margin-bottom: 15px;
}

.subHeading {  /* Portfolio Page Sub Header Applied to H4  */
font-size: 13px;
margin-bottom: -4px;
}

.center {
margin-left: 20%;
}

.centered {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: -40px;
}

strong {
color: #0195ff;
line-height: 25px;
}