@import "reset.css";
/* ========================================================================= */
/* UNIVERSAL STYLES                                                          */
/* ========================================================================= */

.clear{clear:both;} 
.clearer { clear: both;  display: block;  overflow: hidden;  visibility:hidden;  width: 0;  height: 0; } 
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }   
* html .clearfix {height: 1%;} 
img {border:none;}
hr {height:5px; border:0; border-bottom:2px solid #efefef; margin: 0 0 20px 0; clear:both;}
a,a:visited, a:focus {color:#0d729b; text-decoration:none; outline:none;}
a:hover, a:active {color:#333;}
h1, h2, h3, h4{ color: #0d729b; margin: 0 0 1em 0;}
h1{font-size:16px; margin: 0 0 1em 0;}
h2{ font-size:14px; }
h3{ font-size:12px; }
p{color:#666; margin-bottom:15px; line-height: 1.5em; font-size:11px;}
ul, ol{margin:1em 0;}
li{margin:0 0 0 2em; line-height: 1.5em;}
ul li{ list-style-type:none;}

/* ========================================================================= */
/* MAIN STYLES                                                               */
/* ========================================================================= */

* { font-family: Lucida Grande, Helvetica, Arial, sans-serif; font-size: 1 }
html, body { line-height: 150%;  color: #777777; font-size:12px; margin:0; padding:0;
}
#home{background: #fff url(headerBg.jpg) repeat-x;}
#interior{background: #fff url(interiorBg.jpg) repeat-x;}
#header{width:960px;margin:0 auto;height: 93px;}
#header h1{float: right;text-indent:-9999px;background: url(theDesignPortfolio.png) no-repeat;width: 298px;height:17px;display:block;margin: 25px 10px 0 0;}
#logo {background: url(logo.png) no-repeat;height: 32px;width: 168px;display: block;margin: 20px 0 0 10px;float:left;}

/* ========================================================================= */
/* NAV STYLES                                                                */
/* ========================================================================= */

#navClearer{ clear:right;display: block;  overflow: hidden;  visibility:hidden;  width: 0;  height: 0; }
#nav {list-style: none;float: right;margin: 15px 0 0 0;clear: both;}
#nav li {margin: 0 0 0 10px;float: left; list-style:none;}
#nav #mainNavActive a,#nav a:hover{background: #0d729b;color:#fff;}
#nav a {height:24px;line-height: 24px;color: #666;font-size: 10px;font-weight: bold;display: block;text-transform: uppercase;text-decoration: none;padding: 0 10px;}

/* ========================================================================= */
/* HOMEPAGE STYLES                                                           */
/* ========================================================================= */

#tagline{background: url(tagline.jpg) no-repeat;width:960px;height:96px;display:block;text-indent:-9999px;margin: 0 auto 20px;}
#homeCopy{width:960px;margin:0 auto;}
#homeContentWrapper{background: url(taglineBg.jpg) repeat-x;margin: 20px 0;text-align: justify;}
#homepageAbout{float:left;width: 500px;}
#services,#hireMe{float:left;width:200px;margin: 0 0 0 30px;}
#services li{list-style:none;margin: 0 0 0 0;}

/* ========================================================================= */
/* SLIDER STYLES                                                             */
/* ========================================================================= */

.coda-slider { width: 604px; height:349px; margin: 0 0 0 10px;border:1px solid #ccc; } 
.panel{width: 606px; height:351px; }
.coda-nav ul{ border-top:1px solid #ccc;clear: both; display: block; margin:0;padding:0; overflow: hidden;float:left;width:344px;}
#topProject, #topProject a{height:85px;}
.coda-nav ul li {width:344px;height:87px;border-bottom:1px solid #ccc;list-style:none;margin:0;*margin-bottom: -3px!important;padding:0;display:block;line-height:1!important;}
.coda-nav ul li a { display: block;width:344px;height:87px;text-decoration: none}
.coda-nav img{float: left;margin: 10px 0 0 10px;}
.projectTitle{float: left;font-size: 12px;margin: 10px 0 0 10px;font-weight: bold;  }
.projectDesc{float: left;font-size: 10px;margin: 2px 0 10px 10px;color:#666;width: 200px;line-height: 14px;}
.coda-nav ul li a:active, .coda-nav ul li a:focus { outline:0; } 
.coda-nav ul li a.current, .coda-nav ul li a:hover { background: #efefef; color:#666; }
.coda-slider-wrapper { width: 960px; clear: both; overflow: hidden; margin:20px auto 0; }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left; height:349px; }
.coda-slider .panel-container { position: relative }

/* ========================================================================= */
/* FOOTER STYLES                                                             */
/* ========================================================================= */

#footer {width: 960px;margin: 0 auto;border-top: dotted 1px #666;padding: 10px 0;height: 23px; clear:both;}
#footer a{ line-height:23px; }
#footer p{line-height:23px; margin: 0 0 0 20px;}
#footer *{float:left;}
#footer #psLogo{color:#666;float:right;width: 180px;display:block;height: 23px;background:url(psLogo.jpg) no-repeat top right;line-height: 14px;margin: 3px 20px 0 0;}
#footer img{margin: 0 2px 0 20px;}

/* ========================================================================= */
/* INTERIOR STYLES                                                           */
/* ========================================================================= */

#contentWrapper{width:980px;margin: 0 auto; background: url(contentWrapper.png) repeat-y;}
#content{width: 630px; padding:20px 0 0 40px; float:left;}
#content p{text-align: justify; font-size:12px; }
#bio{margin: 0 0 10px 20px; padding: 10px; background:#efefef; border:1px solid #ccc;}
#sideBar{float:right; width: 230px; margin: 20px 40px 20px 0; padding: 0 0 0 20px; border-left:1px solid #ccc; }
#sideBar h2{border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; background:#efefef; padding: 4px 10px; margin: 10px 0 10px 0;}
#sideBar p span{font-size:12px; font-weight:bold; color:#0d729b;}
#sideBar p a{color:#666;}
#sideBar p{margin: 0 0 5px 10px;}
#sideBar #h2Top{margin: 0 0 10px 0}
#contentWrapper h1{float:left; margin:20px 0 0 40px;}
#contentWrapper h3{font-size:12px; float:right; color:#666; margin:20px 40px 0 0;}
#contentWrapper hr{margin: 0 40px 0 40px;}

/* ========================================================================= */
/* PORTFOLIO STYLES                                                          */
/* ========================================================================= */

.portfolio #content{width: 920px; float:none; }
.portfolio #content h1{float:left; margin:0}
.portfolio #content h3{font-size:12px; float:right; color:#666; margin:0 18px 0 0;}
.portfolio #content hr{margin: 0 18px 0 0;}
.clientContainer{width:193px; height: 180px; float:left; background:#efefef; border:1px solid #ccc; padding: 10px; margin: 0 14px 14px 0; list-style:none;}
.clientContainer h2 a{font-size:12px; font-weight:bold; color:#0d729b;  }
.clientContainer h2{margin: 0 0 2px 0; }
.clientContainer a{font-size: 10px; color:#666; }
.clientContainer p{ line-height: 14px; text-align:left!important;}
.clientContainer:hover{background:#dfdfdf;}
#portItemContent{float:left; width: 640px; margin: 20px 20px 0 0;}
.clientDescription{margin: 10px 0 10px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding: 10px 0;}
#recentClients{float:right; width: 215px; margin: 20px 20px 0 0;}
#recentClients .clientContainer{margin: 0 0 10px 0; height: 105px;}
.clientInfoTitle{font-weight:bold; color:#0d729b;}
#clientInfo p{font-size: 12px; margin: 0 0 5px 0;}
#clientInfo a{color: #666;}
#portReturn{color:#666; margin: 0 0 0 5px; font-size:11px;}
#portReturn:hover{color:#0d729b}
#addItemControl{clear:both; margin: 20px 0;}
  #addItemControl a{color:#ffffff;  background:#1582b0; width:120px; display:block; padding: 5px 0; text-align:center; }
.divEditControls{margin: 10px 0;}