/*   
Theme Name: JWC Graphics
Author: Blaker Design
Author URI: http://www.blakerdesign.com
Description: A fully custom Wordpress theme for JWC Graphics
*/

body {
  margin-top:20px;
  font-family:Arial,sans-serif;
  font-size:12px;
}

/*Theme Stylings */

body.orange,
.home #primary-navigation li.orange a,
#primary-navigation li.current_nav_item.orange a,
#primary-navigation li.orange a:hover {
  background-color:#f58025;
}

body.blue,
.home #primary-navigation li.blue a,
#primary-navigation li.current_nav_item.blue a,
#primary-navigation li.blue a:hover {
  background-color:#0097ce;
}

body.brown,
.home #primary-navigation li.brown a,
#primary-navigation li.current_nav_item.brown a,
#primary-navigation li.brown a:hover {
  background-color:#726658;
}

body.green,
.home #primary-navigation li.green a,
#primary-navigation li.current_nav_item.green a,
#primary-navigation li.green a:hover {
  background-color:#78a22f;
}

body.purple,
.home #primary-navigation li.purple a,
#primary-navigation li.current_nav_item.purple a,
#primary-navigation li.purple a:hover {
  background-color:#744a7a;
}

.orange h1,
.orange h2,
.orange h3,
.orange h4,
.orange h5,
.orange h6,
.orange #content-area .highlight,
.orange #content-area a,
#primary-navigation li.orange a:hover span {
  color:#f58025;
}

.blue h1,
.blue h2,
.blue h3,
.blue h4,
.blue h5,
.blue h6,
.blue #content-area .highlight,
.blue #content-area a,
#primary-navigation li.blue a:hover span {
  color:#0097ce;
}

.brown h1,
.brown h2,
.brown h3,
.brown h4,
.brown h5,
.brown h6,
.brown #content-area .highlight,
.brown #content-area a,
#primary-navigation li.brown a:hover span {
  color:#726658;
}

.green h1,
.green h2,
.green h3,
.green h4,
.green h5,
.green h6,
.green #content-area .highlight,
.green #content-area a,
#primary-navigation li.green a:hover span {
  color:#78a22f;
}

.purple h1,
.purple h2,
.purple h3,
.purple h4,
.purple h5,
.purple h6,
.purple #content-area .highlight,
.purple #content-area a,
#primary-navigation li.purple a:hover span {
  color:#744a7a;
}

/* Content Tag Stylings */

h1, h2, h3, h4, h5, h6 {
  font-size:16px;
  margin:0 0 5px 0;
  font-family: 'Play', sans-serif;
}

h1, h2 {
  font-size:22px;
}

p {
  font-size:16px;
  color:#726658;
  line-height:26px;
  margin:0 0 15px 0;
  font-family:Arial,sans-serif;
}

ul {
  font-family:Arial,sans-serif;
  font-size:16px;
  line-height:18px;
  color:#726658;
  margin-bottom:25px;
}

fieldset {
  border:none;
  padding:0;
  margin-bottom:13px;
  position:relative;
}

input[type="text"] {
  width:244px;
  height:26px;
  border:1px solid #c7b5a3;
  padding-left:5px;
  font-family:Arial,sans-serif;
  color:#a99c92;
  font-size:14px;
}

textarea {
  width:244px;
  height:115px;
  border:1px solid #c7b5a3;
  font-family:Arial,sans-serif;
  color:#a99c92;
  font-size:14px;
  padding:5px 0 0 5px;
}

input[type="submit"] {
  background-color:#745279;
  font-family: 'Play', sans-serif;
  font-size:18px;
  color:#fff;
  border:none;
  height:31px;
  width:106px;
}

/* Global Classes */

.left-column {
  float:left;
  margin-right:7px;
}

.right-column {
  float:right;
}

.under-column {
  clear:both; 
}

label.error {
  display:block;
  width:250px;
  text-align:right;
  margin-top:3px;
  font-size:11px;
  color:#744A7A;
}

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden;	
}

.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

/* Level One Containers */

#container {
  width:880px;
  min-height:650px;
  background-color:#fff;
  padding:30px;
  margin:0 auto 15px auto;
  position:relative;
}

footer {
  font-family: 'Play', sans-serif;
  color:#fff;
  text-align:center;
  width:940px;
  margin:0 auto;
  position:relative;
}

/* Header Elements */

header {
  position:relative;
  margin-bottom:60px;
  display:block;
}

header > a {
  float:left;
}

header > a img {
  border:none;
}

#primary-navigation {
  float:right;
}

#primary-navigation ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

#primary-navigation li {
  float:left;
  margin-right:23px;
}

#primary-navigation li:last-child {
  margin-right:0;
}

#primary-navigation li a {
  width:82px;
  padding-top:82px;
  border:1px solid #978a7b;
  display:block;
  background-color:#c7b5a3;
  text-decoration:none;
  font-family: 'Play', sans-serif;
  font-size:13px;
}

#primary-navigation li a span {
  height:36px;
  display:block;
  text-align:center;
  background-color:#fff;
  color:#978a7b;
  line-height:36px;
}

/* Content Area */

#content-area {
  padding:0 30px;
}

#capabilities {
  padding-top:25px;
}

#capabilities > div {
  width:300px;
  padding-top:10px;
}

#capabilities .column-1 {
  float:left;
}

#capabilities .column-2 {
  float:right;
}

#capabilities ul {
  list-style-type:none;
  margin:0 0 15px 0;
  padding:0;
  font-size:12px;
}

#client-list {
  padding-top:15px;
}

#client-list h2 {
  margin-bottom:10px;
}

.client-column {
  width:250px;
  float:left;
  margin-bottom:25px;
}

#client-list .column-3 {
  margin:0 32px 25px 32px;
}

.client-column {
  list-style-type:none;
  margin:0;
  padding:0;
}

.client-column li {
  font-size:14px;
  line-height:22px;
}

.project-details {
  min-height:500px;
}

#descriptions {
  position:relative;
}

#descriptions .description {
  opacity:0;
  position:absolute;
  top:0;
  left:0;
}

#descriptions h3 {
  font-family:Arial,sans-serif;
  font-size:14px;
  margin:0 0 10px 0;
}

#descriptions h3 a {
  color:#726658;
}

#descriptions p {
  font-size:12px;
  line-height:16px;
}

.descriptions-vat {
  display:none;
}

#testimonials {
  margin:0;
  padding:25px 0 0 0;
}

#testimonials dt {
  display:block;
  float:left;
  width:22px;
  height:22px;
  background:transparent url('./img/testimonial-arrows.png') left top no-repeat;
  position:relative;
  top:3px;
  clear:left;
  cursor:pointer;
}

#testimonials dt.active {
  background-position:right top;
}

#testimonials dd {
  float:left;
  margin-left:20px;
  width:750px;
  padding-bottom:15px;
  margin-bottom:25px;
  border-bottom:1px solid #c7b5a3;
  cursor:pointer;
}

#testimonials dd h3 {
  color:#0099d1;
  font-family:Arial,sans-serif;
  font-weight:normal;
}

#testimonials .toggle {
  font-size:12px;
  text-decoration:none;
  margin-bottom:10px;
  display:inline-block;
  color:#78A22F;
  font-weight:bold;
  padding-right:10px;
  background:transparent url('./img/green-arrow.png') right center no-repeat;
}

#testimonials .content {
  display:none;
}

#contact-form {
  padding-top:10px;
  margin-bottom:15px;
}

#contact > .left-column {
  width:530px;
}

#contact > .right-column {
  width:230px;
}

#contact-form #file-upload-button {
  width:82px;
  height:22px;
  background:transparent url('./img/select-file.png') left top no-repeat;
  display:inline-block;
  cursor:pointer;
  position:absolute;
  top:12px;
  left:260px;
}

#contact-form #file-upload-button label.error {
  position:absolute;
  left:-105px; 
  top:27px;
}

#contact-form #file-upload-button input[type="file"] {
  opacity: 0.0;
  -moz-opacity: 0.0;
  filter: alpha(opacity=00);
  cursor:pointer;
}

/* Footer */

footer span {
  padding: 0 10px;
}



/*match placeholder/watermark padding to border+padding for input element*/
label.placeholder {
cursor: text;
padding: 4px 4px 4px 4px;
color: #999999;
}
/* html5 placeholder support */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color:#999999;
}
input:placeholder, textarea:placeholder {
color:#999999;
}