/*
Colors:
Background fallback: #E6E5CD
Header BG fallback: #ADAD9C
Content BG: #F3F2E7
Text: #3A3A39
Title text: #FFF
*/

@import url("../js/fancybox/jquery.fancybox-1.3.4.css");

HTML {
  color: #3A3A39;
  font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", "Trebuchet MS", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
}

BODY {  margin: 0; padding: 0; background: #E6E5CD url(../img/main-bg.png) repeat;}

/******** Typography Stuff *********/
p {
  margin-left: 15px;
  margin-right: 15px;
  line-height: 1.4em;
  /*text-shadow: #FFF 1px 1px 0px;*/
}

h1, h2, h3, h4, h5, h6 {font-family: "chaparral-pro-1","chaparral-pro-2", Georgia, serif;  /*text-shadow: #FFF 1px 1px 0px;*/}
h1                     {font-size: 2em;}
a                      {color: #000; font-style: italic;}
/* This one gives us a button-like feel on links. Via css-tricks.com */
a:active               {position: relative; top: 1px;}
a, a img                  {border: none; outline: none;}
a:hover                {color: #666;}

header, #header {
  background: transparent url(../img/header-bg.png) repeat;
  display: block;
  width: 100%;
  height: 64px;
  margin: 0;
  padding: 0;
}

/******** Top nav *********/
.nav {
  width: 294px;
  margin: 0 auto;
  height: 64px;
  padding-left: 50px;
}

.nav ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 14px 0;
  height: 64px;
}

.nav ul li {
  display: inline;
  width: 36px;
  height: 36px;
}

.nav ul li a{
  width: 36px;
  height: 36px;
  float: left;
  margin-right: 20px;
  background-image: url(../img/socmed-sprite.png);
}

.nav ul li a img   { border: none; outline: none;}

.home a               {background-position: -144px 0px;}
.home a.selected      {background-position: -144px 36px;}
.home a:hover         {background-position: -144px 36px;}
.twitter a            {background-position: 0px 0px;}
.twitter a:hover      {background-position: 0px 36px;} 
.flickr a             {background-position: -36px 0px;}
.flickr a:hover       {background-position: -36px 36px;}
.behance a            {background-position: -72px 0px;}
.behance a:hover      {background-position: -72px 36px;}
.email a              {background-position: -108px 0px;}
.email a:hover        {background-position: -108px 36px;}
.album a                {background-position: -180px 0px;}
.album a.selected      {background-position: -180px 36px;}
.album a:hover          {background-position: -180px 36px;}



/******** Container - 700px wide, centered, holds everything but the header and footer *********/

DIV#container {
  max-width: 700px;
  min-width: 480px;
  background: transparent;
  margin: 20px auto;
}

DIV#containerWide {
  max-width: 960px;
  min-width: 480px;
  background: transparent;
  margin: 20px auto 40px auto;
}

.banner {
  padding: 0;
  margin: 0;
}

.banner img {
  max-width: 100%;
  display: block;
}  

.slider {
  padding: 0;
  margin: 30px auto;
  width: 800px;
  border: 15px solid #ADAD9C;
  height: 500px;
}

/******** Content Areas these have the off-white background and box shadow *********/

.contentBox {
  width: 100%;
  background: transparent url(../img/content-bg.png) repeat;
  margin: 30px auto;
  padding: 7px;
  -moz-box-shadow: 3px 3px 3px #777777; /* Firefox 3.6 and earlier */
  -webkit-box-shadow: 3px 3px 3px #777777; /* Safari and Chrome */
  box-shadow: 3px 3px 3px #777777;
}

.contentBox span {
  color: #FFF;
  height: 30px;
  padding: 0 20px;
  line-height: 30px;
  background-color: #ADAC9B;
  margin-left: -7px;
  margin-top: 10px;
  float: left;
  font-family: "chaparral-pro-1","chaparral-pro-2", Georgia, serif;
  font-style: italic;
}


.contentBox > span + p{  margin-top: 60px;}

.contentBox p {
  width: 86%;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8em;
}


/******** Recent Work *********/

.recent-work {width: 86%; margin: 60px auto 20px auto;}

.recent-work ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.recent-work ul li {

  display: inline;
}

.recent-work ul li a {
  opacity:.90; 
  filter:alpha(opacity=90); 
  background: transparent url(../img/work-bg.png) no-repeat center top; 
  [if IE] background: transparent url(../img/work-bg.gif) no-repeat center top;
  float: left;
  margin: 5px 0 5px 34px;   
  width: 252px;
  height: 160px;
}


.recent-work ul li a img    {margin: 0;}

.hidden {
  display: none;
}

/******** Project Pages *********/
.projectNav {
  width: 552px;
  margin: 15px auto;
}

.projectNav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.projectNav ul li {
  display: inline;
}

.projectNav ul li a {
  float: left;
  background-image: url(../img/project-buttons.png);
  width: 184px;
  height: 50px;
}

.previous a         {background-position: 0px 0px;}
.previous a:hover   {background-position: 0px 50px;}
.home-work a             {background-position: -184px 0px;}
.home-work a:hover       {background-position: -184px 50px;}
.next a             {background-position: -368px 0px;}
.next a:hover       {background-position: -368px 50px;}

/******** Contact *********/

DIV#contact {
  width: 100%;
  margin: 30px auto 0 auto;
  border-top: 2px dashed #AB4E29;
  background: transparent;
  padding: 7px;
}

DIV#contact p   {width: 90%; margin: 15px 0;}
.twoColumns     {width: 100%; margin: 30px auto;}

.leftColumn {
  width: 50%;
  margin: 0;
  padding: 0;
  float: left;
}

.rightColumn {
  width: 40%;
  margin: 0;
  padding: 0;
  float: right;
}

/******** Stuff on right column of Contact area *********/
.meetGabe       {width: 100%; text-align: center;}
.meetGabe span  {margin: 0; width: 100%;  display: block;}
.meetGabe img   {margin-top: 30px;}

/******** Latest Tweet Box *********/
.tweetBoxTop {
  width: 262px;
  height: 32px;
  padding: 0;
  margin: 15px auto 0 auto;
  background: transparent url(../img/twitter-box-top.png) no-repeat center top;
}

.tweetBoxBottom {
  width: 262px;
  min-height: 50px;
  padding: 0 0 20px 0;
  margin: 0 auto 15px auto;
  background: transparent url(../img/twitter-box-bottom.png) no-repeat center bottom;
}

DIV#tweets ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tweetBoxBottom p {
  font-family: "chaparral-pro-1","chaparral-pro-2", Georgia, serif;
  font-size: 1em;
  padding: 5px 10px 10px;
  margin: 0 !important;
  font-style: italic;
}

/******** Footer *********/
footer {
  background: transparent url(../img/header-bg.png) repeat;
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding-top: 14px;
  padding-bottom: 0;
}

.footerContainer {
  margin: 0 auto;
  width: 740px;
  padding: 0;
}

.footerContainer h4 {
  color: #FFF;
  text-align: right;
  font-style: italic;
  font-weight: normal;
  float: right;
  margin: 0;
  padding: 0;
  line-height: 36px;
  font-size: 1.1em;
}

.footerContainer h4 > span {
  font-size: .8em;
}

.footerContainer img {
  float: left;
  display: inline;
  padding: 0;
  margin: 0;
}

/******** Clearfix *********/

.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}

/******** jCapSlide Styles *********/

.ic_container{
    vertical-align:baseline;
    margin:6px;
    position:relative;
}
.overlay{
    opacity:0.3;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.ic_caption{
    position:absolute;    
    opacity:0.6;   
    overflow:hidden;
    margin:0px;
    padding:0px;
    left:0px;
    right:0px;
    cursor:default;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.ic_category{
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:3px;
    padding:5px;
    margin:0px;
}
.ic_caption h3{
    padding:0px 5px 5px 5px;
    margin:0px;
    font-size:18px;
}
.ic_text{
    padding:5px;
    margin:0px;
    text-align:justify;
    font-size:11px;

}