/* Copyright © Vindicated Design 2007 */
/* http://www.vindicate.us */


/* Page Basics
=====================================================================*/

body {
  margin: 0;
  padding: 0;
  background: #131313;
  text-align: center;
}
#wrapper {
  position: relative;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 800px;
  text-align: left;
  background: #222;
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #ccc;
}
#work {
  position: relative;
  background-color:#222;
  width: 708px;
  height: 210px;
  margin: 40px 0 0 46px;
}
#morework {
  position: absolute;
  top: 10px;
  right: 0;
  text-align: right;
  width: 200px;
  height: 20px;
  margin: 0;
  padding: 0;
}
#news {
  position: relative;
  background-color: #222;
  width: 335px;
  margin: 50px 0 80px 46px;
}
#news img {
  border: 0;
  float: left;
  margin: 5px 10px 3px 0; 
}
#box {
  position: absolute;
  top: 460px;
  left: 419px;
  background-color: #222;
  width: 335px;
}

#nav {
  position: relative;
  text-align: left;
  width: 800px;
  height: 150px;
  margin: 0;
  padding: 0;
}


/* Work
=====================================================================*/

#portfolio {
  position: relative;
  background-color:#222;
  width: 708px;
  margin: 40px 0 80px 46px;
  text-align: left;
}
#work p, #portfolio p {
  margin: 0 0 0 9px;
  padding: 0;
  width: 150px;
  line-height: 1.4;
}
#work table, #portfolio table {
  width: 709px;
  margin: 0;
  padding: 0;
  border: none;
  border-collapse: collapse;
}
td.comment {
  width: 160px;
  background-image: url(../images/work_bgr.gif);
  background-repeat: no-repeat;
  height: 50px;
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif; /* MSIE 5.5 */
  font-size: 12px;
  color: #ddd;
  font-weight: normal;
}
td.comment {
  width: 3px;
}
.pfImg {
  width: 175px;
  height: 120px;
  border: 0;
}





#footer {
  position: relative;
  margin: 0;
  width: 800px;
  height: 75px;
  text-align: center;
  background: #191919 ;
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  color: #ccc;
  line-height: 2;
  background-image: url(../images/footer.gif);
}
#valid {
  position: absolute;
  top: 52px;
  right: 10px;
  width: 80px
  height: 15px;
}
#footer.p {
  width: 500px;
  margin: 0 0 0 0;
}



/* Other pages
=====================================================================*/

#errorbox {
  position: relative;
  top: 10px;
  left: 46px;
  text-align: left;
  width: 460px;
  height: 250px;
  margin: 0;
  padding: 0 0 100px 0;
  margin-top: 0;
  background-image: url(../images/boxtop_bgr.gif);
  background-repeat:no-repeat;
}
#errorbox h1 {
  margin: 0 0 10px 20px;
  padding: 20px 0 0 0;
}
#errorbox p {
  margin: 0 0 10px 20px;
  width: 290px;
}



/* Boxes
=====================================================================*/

#box {
  width: 335px;
  margin: 0;
  padding: 0;
}
#boxtop {
  position: relative;
  text-align: left;
  width: 335px;
  height: 250px;
  margin: 0 0 30px 0;
  padding: 0;
  background: transparent;
  background-image: url(../images/boxtop_bgr.gif);
  background-repeat:no-repeat;
}
#boxbot {
  position: relative;
  text-align: left;
  width: 335px;
  height: 150px;
  margin: 0 0 30px 0;
  padding: 0;
  background: transparent;
  background-image:url(../images/boxbot_bgr.gif);
  background-repeat: no-repeat;
}
#boxbot form {
  margin: -10px 0 0 0;
  padding: 0;
}
#boxbot table {
  height: 20px;
  margin: 10px 0 0 0;
  padding: 0;
}
#box h1 {
  font-family: Georgia, Trebuchet MS, Verdana, Arial, sans-serif;
  font-size: 23px;
  color: #ffc230;
  font-weight: normal;
  margin: 0 0 2px 20px;
  padding: 7px 0 0 0;
}
#box input {
  font-size: 11px; 
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  color: #333;
  background-color: #eee;
  margin: 10px 0 7px 20px;
}
#box p {
  margin: 0 0 7px 20px;
  width: 300px;
}
#box hr {
  width: 93%;
  height: 0;
  border: 0;
  margin: -5px 0 10px 20px;
  padding: 0;
  border-top: 1px dotted #343434; 
}
#box hr.sep {
  width: 100%;
  height: 0;
  border: 0;
  margin: 10px 0 7px 10px;
  padding: 0;
  border-top: 3px solid #232323; 
}
#box ul {
  padding-top: 0;
  margin-top: 0;
  list-style-image: url(../images/bullet.gif);
}
#box li {
  padding: 0;
  margin: 0 0 0 -5px;
  list-style-image: url(../images/bullet.gif);
}



/* Quotes
=====================================================================*/

#quotes {
  height: 150px;
  margin: 0 0 45px 0;
  background-color: transparent;
}
.quote {
  font-family: "Times New Roman", Times, serif; 
  font-size: 25px;
  color: #ffc230;
  font-weight: normal;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
.textToChange {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #ccc;  
}
p.testimonial {
  width: 335px;
  margin: 20px 0 10px 0;
  padding: 0 0 0 0;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
  color: #ddd;
}
p.signature {
  width: 290px;
  margin: 10px 0 10px 0;
  padding: 0 0 0 0;
  color: #aaa;
  font-size: 13px;
}
hr.quotes {
  width: 325px;
  height: 0;
  border: 0;
  margin: 0 0 15px 0;
  padding: 0;
  border-top: 1px solid #292929; 
}




/* About
=====================================================================*/

#about {
  position: relative;
  top: 40px;
  left: 290px;
  text-align: left;
  width: 460px;
  margin: 0 0 140px 0;
  padding: 0;
  margin-top: 0;
}
#services ul {
  margin: 0 16px 0 0;
  padding: 0;
  list-style-image: url(../images/bullet.gif);
}
#services li {
  margin: 0 10px 0 0;
  padding: 0;
  list-style-image: url(../images/bullet.gif);
}
#services table {
  width: 450px;
  border: 0;
  margin: 0 0 30px 47px;
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif; /* MSIE 5.5 */
  font-size: 12px;
  line-height: 1.6;
  color: #ccc;
}
#services td.left {
  width: 190px;
  vertical-align: top;
}
#services td.right {
  width: 240px;
  vertical-align: top;
}
#leftabout {
  position: absolute;
  top: 197px;
  left: 46px;
  text-align: left;
  width: 180px;
  height: 600px;
  margin: 0;
  padding: 0;
  /* background-image: url(images/testimonial_bgr.gif); */
  background-repeat: repeat-x;
}
.quote {
  font-family: "Times New Roman", Times, serif; 
  font-size: 25px;
  color: #ffc230;
  font-weight: normal;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
.textToChange {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #ccc;  
}
p.testimonial {
  width: 160px;
  margin: 12px 0 7px 11px;
  padding: 0 0 0 0;
}
p.about {
  width: 200px;
  margin: 8px 0 50px 0;
  padding: 0 0 0 0;
  line-height: 1.5;
}

#about h2 {
  margin: 0 20px 9px 28px;  
}
#services {
  text-align: left;
  margin: 0;
  padding: 0;
  background-image: url(../images/services_bgr.gif);
  background-repeat: no-repeat;
  width: 460px;
  height: 400px;
}
#services hr.light {
  width: 87%;
  height: 0;
  border: 0;
  margin: 0 0 9px 30px;
  padding: 0;
  border-top: 1px solid #292929; 
}



/* Contact
=====================================================================*/

#contact {
  position: relative;
  text-align: left;
  width: 460px;
  height: 600px;
  margin: 40px 0 0 290px;
  padding: 0;
}
#leftcontact {
  position: absolute;
  top: 197px;
  left: 46px;
  text-align: left;
  width: 180px;
  height: 535px;
  margin: 0px;
  padding: 0px;
}


/* --- Table --- */

#contact table {
  margin: 20px 0 0 42px;
}
#contact table td.single {
  height: 30px;
  vertical-align: bottom;
}
#contact table td.double {
  height: 75px;
  vertical-align: bottom;
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #ccc;
}
#contact table td.email {
  height: 50px;
  vertical-align: bottom;
}
#contact table td.msg {
  vertical-align: bottom;
  height: 175px;
  margin-top: 0;
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #ccc;
}
#contact table td.send {
  height: 40px;
  vertical-align: bottom;
}


/* --- Form --- */

legend {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: #ffc230;
  font-weight: normal;
  margin: 0 0 0 10px;
  padding: 0;
}
fieldset {
  float: left;
  clear: both;
  width: 100%;
  margin: 0;
  height: 540px;
  padding: 0;
  border: 1px solid #292929;
  background-color: #222222;
  background-image: url(../images/fieldset_bgr.jpg);
  background-repeat: no-repeat;
}
.margLeft {
  margin: 0 10px 0 30px;
}
fieldset.submit {
  float: none;
  width: auto;
  border-style: none;
  margin: 0 0 0 30px;
  background-color: transparent;
  background-image: none;
}
fieldset.select {
  float: none;
  width: auto;
  border-style: none;
  background-color: transparent;
  background-image: none;
}
label {
  float: left;
  width: 100px;
  margin: 0;
  padding: 0;
  text-align: left;
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif; /* MSIE 5.5 */
  font-size: 12px;
  line-height: 1.6;
  color: #ccc;
}
.field {
  width: 273px;
  margin: 0;
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  color: #333;
  background-color: #eee;
  border: 1px solid #ddd; 
}
.fieldshort {
  width: 200px;
  margin: 0;
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  color: #333;
  background-color: #eee;
  border: 1px solid #ddd; 
}
.fieldlong {
  width: 100%;
  margin: 0;
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  color: #333;
  background-color: #eee;
  border: 1px solid #ddd; 
}



/* Text
=====================================================================*/

h1 {
  font-family: Georgia, Trebuchet MS, Verdana, Arial, sans-serif;
  font-size: 23px;
  color: #ffc230;
  font-weight: normal;
  margin: 0 0 2px 0;
  padding: 0;
}
h2 {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: #ffc230;
  font-weight: normal;
  margin: 0 0 4px 0;
  padding: 0;
}
h3 {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: #ffc230;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
h4 {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: #ddd;
  font-weight: normal;
  margin: -1px 0 2px 0;
  padding: 0;
}
.date {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  color: #777;
  margin: 0;
  padding: 0;
}
.yellow {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  color: #ffc230;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
.small {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif; /* MSIE 5.5 */
  font-size: 12px;
  color: #777;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
hr {
  width: 100%;
  height: 0;
  border: 0;
  margin: -5px 0 15px 0;
  padding: 0;
  border-top: 1px dotted #333; 
}
hr.light {
  width: 100%;
  height: 0;
  border: 0;
  margin: 0 0 15px 0;
  padding: 0;
  border-top: 1px solid #292929; 
}




/* Links
=====================================================================*/

a {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #cccccc;
  text-decoration: none;
}
a:link, a:active, a:visited {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  color: #cccccc;
  text-decoration: none;
}
a:hover {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  color: #ffc230;
  text-decoration: none;
}
a.dotted:link {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #cccccc;
  text-decoration: none;
  background-color: transparent;
  border-color: #555555;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
  border-style: dotted;
}
a.dotted:active, a.dotted:visited {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #999999;
  text-decoration: none;
  background-color: transparent;
  border-color: #555555;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
  border-style: dotted;
}
a.dotted:hover {
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #ffc230;
  text-decoration: none;
}



/* Images
=====================================================================*/

.img {
  margin-bottom: 12px;
}
.leftimg {
  float: left;
  margin-right: 15px;
}
.tmrg {
  margin-left: 20px;
}



/* Lightbox
======================================================================================================================*/

#lightbox{
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  line-height: 0;
}
#lightbox a img {
  border: none; 
}
#outerImageContainer { /* This goes around the image itself, don't add border it will create a gap between img and comment underneath */
  position: relative;
  background-color: #fff;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}
#imageContainer { /* Increasing this will put the image out of position */
	padding: 10px;
}
#loading {
  position: absolute;
  top: 40%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}
#hoverNav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
#imageContainer>#hoverNav {
  left: 0;
}
#hoverNav a {
  outline: none;
}
#prevLink, #nextLink {
  width: 49%;
  height: 100%;
  background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
  display: block;
}
#prevLink {
  left: 0; float: left;
}
#nextLink {
  right: 0; float: right;
}
#prevLink:hover, #prevLink:visited:hover { 
  background: url(../images/prevlabel.gif) left 15% no-repeat; 
}
#nextLink:hover, #nextLink:visited:hover { 
  background: url(../images/nextlabel.gif) right 15% no-repeat; 
}
#imageDataContainer { /* Change height to add space underneath the image */
  font: 11px "Lucida Grande", Geneva, Verdana, sans-serif;
  color: #555;
  height: 40px;
  background-color: #fff;
  margin: 0 auto 12px;
  line-height: 1.4em;
}
#imageData {
  padding:0 10px;
}
#imageData #imageDetails {
  width: 85%; float: left; text-align: left; 
}	
#imageData #caption {
  font-weight: normal;
}
#imageData #numberDisplay {
  display: block; clear: left; padding-bottom: 1.0em;	
}			
#imageData #bottomNavClose { 
  width: 66px; float: right;  padding-bottom: 0.7em;	
}	
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 500px;
  background-color: #000;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
	}
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html>body .clearfix {
  display: inline-block; 
  width: 100%;
}
* html .clearfix {
  /* Hides from IE-mac \*/
  height: 1%;
  /* End hide from IE-mac */
}	



/* Tab Box
=====================================================================================================================*/
.opacitylayer {
  height: 130px;
}

.shadetabs{
  padding: 3px 0;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  font: 12px "Lucida Grande";
  color: #ddd;
  list-style-type: none;
  text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.shadetabs li{
  display: inline;
  margin: 0;
}
.shadetabs li a{
  text-decoration: none;
  padding: 3px 7px;
  margin: 0 0 0 1px;
  border: none;
  color: #ff0000;
  background: #333;
}
.shadetabs li a:visited{
  color: #ddd;
}
.shadetabs li a:hover{
  text-decoration: underline;
  color: #ddd;
}
.shadetabs li.selected{
  position: relative;
  top: 0;
}
.shadetabs li.selected a{ /*selected main tab style */
  color: #ff0000;
}
.shadetabs li.selected a:hover{ /*selected main tab style */
  text-decoration: none;
}
#tabcontentstyle{ /*style of tab content container*/
  width: 180px;
  height: 140px;
  margin-bottom: 10px;
  padding: 0;
  font: 12px "Lucida Grande";
  color: #ddd;
  background-color: transparent;
}
#tabs {
  position: absolute;
  top: 163px;
  width: 180px;
  height: 20px;
  margin:0;
  padding: 0;
  font: 12px "Lucida Grande";
  color: #ddd;
  background-color: transparent;
}
.tabcontent{
  display:none;
}

@media print {
.tabcontent {
  display:block!important;
}
}