@import "/resources/common/css/reset.css";

body {
  font-family: "Georgia", serif;
  font-size: 14px;
  line-height: 25px;
  margin: 0;
  padding: 0;
  color: #000;
  background: #fff;	
}

/* fonts */

/*@font-face {
  font-family: 'MgOpen Cosmetica';
  src: url(/fonts/MgOpenCosmeticaRegular.eot);
  src: local('MgOpen Cosmetica Regular'), local('MgOpen Cosmetica'), url(/fonts/MgOpenCosmeticaRegular.ttf) format('truetype');
}
*/

/* common text styling 
****************************************************************************/

h1, h2, h3, h4, label {
  font-family: "Georgia", serif;
  font-weight: normal;
}
span.fancy {
  font-family: "Baskerville", "Constantia", "Palatino", "Palatino Linotype", "Book Antiqua", "Georgia", serif;
  font-style: italic;
  color: #BF003B;
  font-weight: normal;
  text-transform: lowercase;
}
span.delimeter {
  font-family: "Baskerville", "Constantia", "Palatino", "Palatino Linotype", "Book Antiqua", "Georgia", serif;
  position : relative;
  color: #BF003B;
}
span.bullet {
  font-family: "Baskerville", "Constantia", "Palatino", "Palatino Linotype", "Book Antiqua", "Georgia", serif;
  font-size: 22px;
  position : relative;
  top : 0.10em;
  padding-right: 4px;
  color: #BF003B;
}
h1, h2, p, ul, ol, table {
  margin-bottom: 25px;
}

/* layout
****************************************************************************/

.wrap {
  width: 960px;
  margin: 0 auto;
  position: relative;
  text-align: left;	
}

/* bar
****************************************************************************/

#bar {
  position: relative;
  background: #25262E url(../imgs/bg.gif);
  border-bottom: 4px solid #010312;
  padding-top: 4px;
}

/* logo
****************************************************************************/

#bar a#logo {
  position: absolute;
  top: 0;
  right: 0;
  padding-left: 25px;
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  line-height: 50px;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Verdana", sans-serif;
}
a#logo span.mk {
/*  color: #E70052;*/
}

/* nav
****************************************************************************/

ul#nav {
  margin-bottom: 0;
  
}
ul#nav li {
  float: left;
  margin-right: 20px;  
}
ul#nav a {
  font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Verdana", sans-serif;
  display: block;
  text-decoration: none;
  font-size: 14px;
  line-height: 26px;
  margin: 12px 0 12px 0;
  color: #fff;		
  border: none;
}
ul#nav li.last a {
  padding: 0 12px;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -khtml-border-radius: 13px;
  border-radius: 13px;
  background: #000;
}
ul#nav a:hover,
ul#nav a:focus {
  -webkit-transition: color .2s ease-in;
  color: #BF003B;
}
ul#nav li.active a:hover,
ul#nav li.active a:focus  {
  color: #fff;
}
ul#nav li.active a {
  padding: 0 12px;
  font-weight: bold;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -khtml-border-radius: 13px;
  border-radius: 13px;
  background: #BF003B;
}

/* intro
****************************************************************************/

#intro  { 
  background: #F3F7FA url(../imgs/striped.png) repeat top left;
  border-bottom: 4px solid #E8EDF1;
}
#intro h1 { 
  font-size: 42px;
  margin-bottom: 0;
  padding: 40px 0 50px 0;
  width: 80%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: #25262E;
  line-height: 50px;
/*  margin-top: -500px;*/
}

/* content
****************************************************************************/

#content {
/*  background: url(../imgs/line.png) 50% top repeat-x;*/
/*border-top: 1px solid #CDCFCF;*/
  padding: 39px 0 75px 0; 
  border-top: 4px solid #E8EDF1;
}
#content.with-intro {
  border-top: 1px solid #D4D9DC;
    padding-top: 50px; 
}
#content h1 {
  font-size: 30px;
}
#content h2 {
  font-size: 26px;
  color: #717C83;
}
#content h3 {
  color: #717C83;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#content a {
  color: #BF003B;
  text-decoration: none; 
  border-bottom: 1px dotted #FF4F7E;
}
#content a:hover {
  -webkit-transition: color .2s ease-in;
  color: #9DA2AC;
  background: #f7f7f7;
  border-bottom: 1px solid #fff;
}
#content a.button {
  display: block;
  float: left;
  background: #25262E url(../imgs/bb.jpg) 50% 50% no-repeat;
  color: #fff;
  line-height: 26px;
  font-size: 14px;
  text-decoration: none;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -khtml-border-radius: 13px;
  border-radius: 13px;
  padding: 0 13px;
  font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Verdana", sans-serif;  
  border: none;
  margin-bottom: 25px;
}
#content a.button:hover {
  -webkit-transition: background-color .2s ease-in;
  background-color: #BF003B;
  background-image: none;
}
#content a.button-alt {
  margin-bottom: 25px;
  display: block;
  float: left;
  background: #959EA4;
  color: #fff;
  line-height: 26px;
  font-size: 14px;
  text-decoration: none;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -khtml-border-radius: 13px;
  border-radius: 13px;
  padding: 0 13px;
  font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Verdana", sans-serif;  
  border: none;
}
#content a.button-alt:hover {
  -webkit-transition: color .2s ease-in;
  -webkit-transition: background-color .2s ease-in;
  background: #BF003B;
  color: #fff;
}
#content a.button-attn {
  margin-bottom: 25px;
  display: block;
  float: left;
  background: #BF003B;
  color: #fff;
  line-height: 26px;
  font-size: 14px;
  text-decoration: none;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -khtml-border-radius: 13px;
  border-radius: 13px;
  padding: 0 13px;
  font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Verdana", sans-serif;  
  border: none;
}
#content a.button-attn:hover {
  -webkit-transition: color .2s ease-in;
  -webkit-transition: background-color .2s ease-in;
  background: #25262E;
  color: #fff;
}
#content .notes .inner {
  margin-left: 25px;
  background: url(../imgs/sep.gif) -5px top repeat-x;
}
#content .notes .section {  
  padding: 25px 0 1px 0;
  background: url(../imgs/sep.gif) -5px bottom repeat-x;
}
#content #title {
  margin-bottom: 25px;
}
#content #title h2 {
  float: left;
  margin-bottom: 0;
}
#content #title a {
  margin-bottom: 0;
  margin-left: 10px;
}

/* work
****************************************************************************/

#project {
  position: relative;
}
#project #screenshots {
  display: block;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0px 4px 12px #ccc;
  -moz-box-shadow: 0px 4px 12px #ccc;
  margin-bottom: 25px;
  width: 718px;
}
#project #screenshots img {
  display: block;
}
#project #transport {
  position: absolute;
  top: 0;
  left: 75%;
  padding-left: 25px;
}
#project #transport a.button {
  margin-bottom: 0;
  margin-right: 12px;
}
#project .text {
  width: 75%;
}
#project .notes {
  float: right;
  width: 25%;
  position: absolute;
  top: 81px;
  right: 0;  
}
#project h2 {
  line-height: 25px;
  color: #717C83;
  width: 75%;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* homepage
****************************************************************************/

#featured {
  margin-left: -50px;
}
* html #featured {
  width: 1010px;
}
#featured .project {
  width: 50%;
  float: left;
}
#featured .project .inner {
  margin-left: 50px;
}
#featured a.screenshot {
  display: block;
  padding: 0;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0px 4px 12px #ccc;
  -moz-box-shadow: 0px 4px 12px #ccc;
} 
#featured a.screenshot img {
  display: block;
}
#featured h3 {
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 15px;
  font-weight: normal;
  font-size: 26px;
  line-height: 26px;
  float: left;
  color: #000;    
}
#featured div.text {
  clear: left;
  color: #717C83;
  font-size: 13px;
}

/* cols
****************************************************************************/

#cols {
  margin-left: -25px;
}
* html #cols {
  width: 985px;
}
#cols .col .inner {
  padding-left: 25px;
}
#cols:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

/* contact page
****************************************************************************/

#details {
  float: right;
  width: 24%;
}
#contact-form {
  float: left;
  width: 75%;
  background: #F3F4F5;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
}
#contact-form form {
  margin: 25px 30px !important;
}
#contact-form .errors {
  color: #FF0056;
  border-top: 3px solid #FFCBDC;
  border-bottom: 3px solid #FFCBDC;
  padding: 10px;
  margin-bottom: 25px;
  background: #FFF2F6;
}
#contact-form .errors h4 {
  font-size: 18px;
  padding-bottom: 5px;
}
#contact-form .errors ul {
  margin-bottom: 0;
}
#contact-form .errors li {
  margin-left: 20px;
  list-style: disc;
}
#contact-form form ol {
  margin-bottom: 0;
}
#contact-form form legend {
  display: block;
  font-size: 22px;
  color: #717C83;
  padding: 5px 0 ;
  width: 100%;        
  display: none;
}
#contact-form form label em {
  color: #FF0056;
}
#contact-form form fieldset {
  margin: 0;
}
#contact-form form {
  margin: -5px 0;
}
#contact-form form li {
  padding: 5px 0;
}     
#contact-form form label {
  display: block;
  font-size: 16px;
  padding-bottom: 1px;
  color: #717C83;
}
#contact-form form input.text {
  width: 50%;
}
#contact-form form textarea {
  width: 100%;
}
#contact-form form input.text,
#contact-form form textarea,
#contact-form form select {    
  line-height: 22px;
  margin: 0;
  font-size: 14px;
  font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Verdana", sans-serif;
  margin-bottom: 10px;
}
#contact-form form div.prompt {        
  font-style: italic;
}
#contact-form input.button {
  margin: 25px 0 30px 0;
  display: block;
  float: left;
  background: #25262E url(../imgs/bb.jpg) 50% 50% no-repeat;
  color: #fff;
  line-height: 36px;
  font-size: 16px;
  text-decoration: none;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  -khtml-border-radius: 18px;
  border-radius: 18px;
  padding: 0 18px;
  font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Verdana", sans-serif;  
  border: none;
  cursor: pointer;
}
#contact-form input.button:hover {
  -webkit-transition: background-color .2s ease-in;
  background-color: #BF003B;
  background-image: none;
}

/* projects
****************************************************************************/

#projects {
  margin-left: -45px;
}
* html #projects {
  width: 1005px;
}
#projects .project {
  float: left;
  width: 33.33333%;
  padding-bottom: 40px;    
}
#projects .project .inner {
  margin-left: 45px;
}
#projects a.screenshot {
  display: block;
  border: 1px solid #ddd;    
  -webkit-box-shadow: 0px 2px 6px #bbb;
  -moz-box-shadow: 0px 2px 6px #bbb;
}
#projects a.screenshot img {
  display: block;
}
#projects h2 {
  font-size: 16px;
  color: #717C83;
  margin-bottom: 6px;
  line-height: 26px;
  font-weight: normal;
}

/* legal
****************************************************************************/

#legal {
  font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Verdana", sans-serif;
   background: #25262E url(../imgs/bg.gif);
   border-top: 4px solid #010312;
   color: #fff;
   font-size: 13px;
}
#legal .wrap {  
/*  background: url(../imgs/sep-wide.gif) top left repeat-x;*/
  padding-top: 22px;
}
#legal a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dotted #ccc;
}
#legal .credits {
  float: left;
}
#legal .copy {
  float: right;
}

/* self-clearing floats
****************************************************************************/

/* compliant browsers */
.wrap:after,
.section:after,
ul#nav:after,
#featured:after,
#title:after,
#projects:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

/* ie5+6/win only */
* html .wrap,
* html .section,
* html ul#nav, 
* html #featured,
* html #title,
* html #projects {
	height: 1%;
}

/* ie7/win only */
*:first-child+html .wrap,
*:first-child+html .section,
*:first-child+html ul#nav,
*:first-child+html #featured,
*:first-child+html #title,
*:first-child+html #projects {
	min-height: 1px;
}

/* stick footer to bottom
****************************************************************************/

html, body {    
  height: 100%; 
}
#container {
  min-height: 100%;
  margin-bottom: -79px;
  position: relative;
  height: auto !important; /* Everything except IE6 */
  height: 100%; /* IE6 */
}
.clearfooter {
  height: 79px; /* 75px + 4px border */
  clear: both;
}
#legal {
  height: 75px;
  position: relative;
}