/*
==================================================
  RESET.CSS
  Clears all browser-applied styles
  Credits:
    Eric Meyer's reset.css,
    Thierry Koblentz's base.css
  Author:   Ruthie BenDor
  Updated:  2010-Mar-21
==================================================
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

:focus {
  outline: 0;
}

body {
  color: #333;
}

/* --- Lists ---------------------------------- */

ol        { list-style-type: decimal;     }
ol ol     { list-style-type: lower-alpha; }
ol ol ol  { list-style-type: lower-roman; }
ul        { list-style-type: square;      }
ul ul     { list-style-type: disc;        }
ul ul ul  { list-style-type: circle;      }

/* --- Tables --------------------------------- */

table {
  border-collapse: separate;
  border-spacing: 0;
}

/* --- Blockquotes ---------------------------- */

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* --- Images --------------------------------- */

img {
  -ms-interpolation-mode: bicubic;
  display: inline-block;
  vertical-align: bottom;
}

/* --- HTML5 Elements ------------------------- */

article, aside, dialog, figure, footer,
header, hgroup, menu, nav, section {
  display: block;
}
/*
==================================================
  TYPOGRAPHY.CSS
  Controls all typographic styles
  
  Author:   Ruthie BenDor
  Updated:  2010-Mar-21
==================================================

Hey, type nerd! The traditional typographic scale:
6,7,8,9,10,11,12,14,16,18,21,24,36,48,60,72

*/

@font-face {
  font-family: 'DroidSerifBold';
  src: url('/uisys/expressionengine/templates/default_site/fonts/droidserif-bold-webfont.eot');
  src: local('☺'),
       url('/uisys/expressionengine/templates/default_site/fonts/droidserif-bold-webfont.woff') format('woff'),
       url('/uisys/expressionengine/templates/default_site/fonts/droidserif-bold-webfont.ttf') format('truetype'),
       url('/uisys/expressionengine/templates/default_site/fonts/droidserif-bold-webfont.svg#webfonta2xCiJoC') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DroidSerifBoldItalic';
  src: url('/uisys/expressionengine/templates/default_site/fonts/droidserif-bolditalic-webfont.eot');
  src: local('☺'),
       url('/uisys/expressionengine/templates/default_site/fonts/droidserif-bolditalic-webfont.woff') format('woff'),
       url('/uisys/expressionengine/templates/default_site/fonts/droidserif-bolditalic-webfont.ttf') format('truetype'),
       url('/uisys/expressionengine/templates/default_site/fonts/droidserif-bolditalic-webfont.svg#webfonta2xCiJoC') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DroidSerifItalic';
  src: url('/uisys/expressionengine/templates/default_site/fonts/droidserif-italic-webfont.eot');
  src: local('☺'),
       url('/uisys/expressionengine/templates/default_site/fonts/droidserif-italic-webfont.woff') format('woff'),
       url('/uisys/expressionengine/templates/default_site/fonts/droidserif-italic-webfont.ttf') format('truetype'),
       url('/uisys/expressionengine/templates/default_site/fonts/droidserif-italic-webfont.svg#webfonta2xCiJoC') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DroidSerifRegular';
  src: url('/uisys/expressionengine/templates/default_site/fonts/droidserif-regular-webfont.eot');
  src: local('☺'),
       url('/uisys/expressionengine/templates/default_site/fonts/droidserif-regular-webfont.woff') format('woff'),
       url('/uisys/expressionengine/templates/default_site/fonts/droidserif-regular-webfont.ttf') format('truetype'),
       url('/uisys/expressionengine/templates/default_site/fonts/droidserif-regular-webfont.svg#webfonta2xCiJoC') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "DroidSerifRegular", "Georgia", serif;
  font-size: 14px;
  line-height: 24px; /* 24px */
}

pre, tt, code, kbd, samp, var {
  /* q: 'serif'? a: see http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ */
  font-family: "Courier New", "Courier", monospace, serif;
}

h1, h2, h3, h4, h5, h6, .h {
/*  font-family: "Helvetica Neue", "Tahoma", sans-serif; */
}

/* --- Headers -------------------------------- */

h1, .h1 { font-size: 36px; line-height: 48px; }
h2, .h2 { font-size: 24px; line-height: 24px; padding: 12px 0; }
h3, .h3 { font-size: 21px; line-height: 24px; padding: 12px 0; }
h4, .h4 { font-size: 18px; line-height: 24px; padding: 12px 0; }
h5, .h5 { font-size: 16px; line-height: 24px; padding: 12px 0; }
h6, .h6 { font-size: 16px; line-height: 24px; padding: 12px 0; }

/* --- Paragraphs ----------------------------- */

p {
  text-indent: 0;
  padding-bottom: 12px;
}

/* --- Blockquotes ---------------------------- */

blockquote {
  padding-left: 10px;
}

blockquote > p {
  border-left: 3px solid #CCC;
  padding-left: 7px;
}

/* --- Inline Elements ------------------------ */

abbr   { border-bottom: 1px dotted #333; }

strong { font-family: "DroidSerifBold", "Georgia", serif; }
em     { font-family: "DroidSerifItalic", "Georgia", serif; }

strong > em,
em > strong { font-family: "DroidSerifBoldItalic", "Georgia", serif; }

ins    { text-decoration: none; }
del    { text-decoration: line-through; }

sub    { vertical-align: sub; }
sup    { vertical-align: super; }

/* --- Links ---------------------------------- */

a {
  background: transparent;
  color: #003399;
}

a:hover, a:active {
  text-decoration: none;
}

/* --- Lists ---------------------------------- */

ul, ol {
  margin-left: 1em;
}

ins {
  border-bottom: 3px double #333;
}

dl {line-height:0;}
dt {line-height:24px;}
dd { line-height:24px; padding-bottom: 12px; }

/* --- Forms ---------------------------------- */

label {
  display: block;
}

textarea {
  width: 580px;
  height: 188px;
}

.checkbox_wrapper {
  display: block;
  padding: 6px 10px;
}



/*
==================================================
  GRID.CSS
  Based on 960 Grid System
  http://960.gs/
  Licensed under GPL and MIT.
  
  Author:   Ruthie BenDor
  Updated:  2010-Mar-21
==================================================
*/

.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

.grid_1,  .grid_2,  .grid_3,  .grid_4,
.grid_5,  .grid_6,  .grid_7,  .grid_8,
.grid_9,  .grid_10, .grid_11, .grid_12,
.grid_13, .grid_14, .grid_15, .grid_16 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

.alpha { margin-left: 0;  }
.omega { margin-right: 0; }

/* --- Grid ----------------------------------- */

.container_16 .grid_1   { width: 40px;  }
.container_16 .grid_2   { width: 100px; }
.container_16 .grid_3   { width: 160px; }
.container_16 .grid_4   { width: 220px; }
.container_16 .grid_5   { width: 280px; }
.container_16 .grid_6   { width: 340px; }
.container_16 .grid_7   { width: 400px; }
.container_16 .grid_8   { width: 460px; }
.container_16 .grid_9   { width: 520px; }
.container_16 .grid_10  { width: 580px; }
.container_16 .grid_11  { width: 640px; }
.container_16 .grid_12  { width: 700px; }
.container_16 .grid_13  { width: 760px; }
.container_16 .grid_14  { width: 820px; }
.container_16 .grid_15  { width: 880px; }
.container_16 .grid_16  { width: 940px; }

/* --- Prefix Columns ------------------------- */

.container_16 .prefix_1   { padding-left: 60px;  }
.container_16 .prefix_2   { padding-left: 120px; }
.container_16 .prefix_3   { padding-left: 180px; }
.container_16 .prefix_4   { padding-left: 240px; }
.container_16 .prefix_5   { padding-left: 300px; }
.container_16 .prefix_6   { padding-left: 360px; }
.container_16 .prefix_7   { padding-left: 420px; }
.container_16 .prefix_8   { padding-left: 480px; }
.container_16 .prefix_9   { padding-left: 540px; }
.container_16 .prefix_10  { padding-left: 600px; }
.container_16 .prefix_11  { padding-left: 660px; }
.container_16 .prefix_12  { padding-left: 720px; }
.container_16 .prefix_13  { padding-left: 780px; }
.container_16 .prefix_14  { padding-left: 840px; }
.container_16 .prefix_15  { padding-left: 900px; }

/* --- Suffix Columns ------------------------- */

.container_16 .suffix_1   { padding-right: 60px;  }
.container_16 .suffix_2   { padding-right: 120px; }
.container_16 .suffix_3   { padding-right: 180px; }
.container_16 .suffix_4   { padding-right: 240px; }
.container_16 .suffix_5   { padding-right: 300px; }
.container_16 .suffix_6   { padding-right: 360px; }
.container_16 .suffix_7   { padding-right: 420px; }
.container_16 .suffix_8   { padding-right: 480px; }
.container_16 .suffix_9   { padding-right: 540px; }
.container_16 .suffix_10  { padding-right: 600px; }
.container_16 .suffix_11  { padding-right: 660px; }
.container_16 .suffix_12  { padding-right: 720px; }
.container_16 .suffix_13  { padding-right: 780px; }
.container_16 .suffix_14  { padding-right: 840px; }
.container_16 .suffix_15  { padding-right: 900px; }

/* --- Push Space ----------------------------- */

.container_16 .push_1   { left: 60px;  }
.container_16 .push_2   { left: 120px; }
.container_16 .push_3   { left: 180px; }
.container_16 .push_4   { left: 240px; }
.container_16 .push_5   { left: 300px; }
.container_16 .push_6   { left: 360px; }
.container_16 .push_7   { left: 420px; }
.container_16 .push_8   { left: 480px; }
.container_16 .push_9   { left: 540px; }
.container_16 .push_10  { left: 600px; }
.container_16 .push_11  { left: 660px; }
.container_16 .push_12  { left: 720px; }
.container_16 .push_13  { left: 780px; }
.container_16 .push_14  { left: 840px; }
.container_16 .push_15  { left: 900px; }

/* --- Pull Space ----------------------------- */

.container_16 .pull_1   { left: -60px;  }
.container_16 .pull_2   { left: -120px; }
.container_16 .pull_3   { left: -180px; }
.container_16 .pull_4   { left: -240px; }
.container_16 .pull_5   { left: -300px; }
.container_16 .pull_6   { left: -360px; }
.container_16 .pull_7   { left: -420px; }
.container_16 .pull_8   { left: -480px; }
.container_16 .pull_9   { left: -540px; }
.container_16 .pull_10  { left: -600px; }
.container_16 .pull_11  { left: -660px; }
.container_16 .pull_12  { left: -720px; }
.container_16 .pull_13  { left: -780px; }
.container_16 .pull_14  { left: -840px; }
.container_16 .pull_15  { left: -900px; }

/* --- Clear Floated Elements ----------------- */

/* Option 1: 
   Requires <[div||span] class="clear"></[div||span]>
   http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* Option 2:
   http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/*
==================================================
  SCREEN.CSS
  Sets layout styles for screen

  Author:   Ruthie BenDor
  Updated:  2010-Apr-17
==================================================
*/

body {
  background: #FFF url("/images/site_image_assets/page_bg.1269218667.png") repeat 0 2px;
}

#page {
  position: relative;
  border-top: 4px solid #003399;
}

/* --- Masthead ----------------------------- */

#masthead {
  background: transparent url("/images/site_image_assets/masthead_sprites.1274157017.png") no-repeat 0 bottom;
  height: 36px;
  left: 0;
  position: absolute;
  top: 156px;
  width: 960px;
  z-index: 1000;
}

#masthead h1 {
  background: transparent url("/images/site_image_assets/masthead_sprites.1274157017.png") no-repeat 0 0;
  height: 84px;
  left: 0;
  position: absolute;
  text-indent: -999em;
  top: -96px;
  width: 960px;
}

#masthead #logo {
  background: transparent url("/images/site_image_assets/masthead_sprites.1274157017.png") no-repeat -990px -50px;
  height: 158px;
  left: 441px;
  position: absolute;
  top: -144px;
  width: 79px;
}

/* --- Navigation ----------------------------- */

#nav {
  height: 192px;
  left: 10px;
  position: absolute;
  top: 0;
  width: 940px;
  z-index: 500;
}

#nav ul {
  height: 156px;
  list-style: none;
  margin-left: 0;
}

#nav li, #nav a {
  display: block;
  float: left;
}

#nav li {
  background: transparent;
  height: 144px;
  margin-right: 20px;
  padding-top: 12px;
}

#nav_home,       #nav_home a      { width: 40px;  }
#nav_projects,   #nav_projects a  { width: 100px; }
#nav_services,   #nav_services a  { width: 100px; }
#nav_about,      #nav_about a     { width: 100px; }
#nav_blog,       #nav_blog a      { width: 100px; }
#nav_contact,    #nav_contact a   { width: 100px; }
#nav_clients,    #nav_clients a   { width: 160px; }

#nav_about {
  margin-right: 140px !important;
}

#nav_clients {
  margin-right: 0 !important;
}

#nav a {
  font-size: 18px;
  line-height: 24px;
  padding: 6px 0;
  text-align: center;
  text-decoration: none;
}

#nav a:link, #nav a:visited {
  background: transparent url("/images/site_image_assets/diagonal_stripes.1269217210.png") repeat-x 0 0;
}

#nav a:focus, #nav a:hover, #nav a:active {
  background-color: #FFF;
}

.home #nav_home,          .home #nav_home a,
.projects #nav_projects,  .projects #nav_projects a,
.services #nav_services,  .services #nav_services a,
.about #nav_about,        .about #nav_about a,
.blog #nav_blog,          .blog #nav_blog a,
.contact #nav_contact,    .contact #nav_contact a,
.clients #nav_clients,    .clients #nav_clients a {
  background: #003399;
  color: #FFF;
}

#nav_home a {
  text-indent: -999em;
}

#nav_home a span {
  background: transparent url("/images/site_image_assets/nav_home_icon.1273533837.png") no-repeat 50% 2px;
  display: block;
}

.home #nav_home a span {
  background-position: 50% -30px;
}

/* --- Main ----------------------------------- */

#main {
  padding-top: 192px;
}

#main-inner {
  background: #FFF;
  border-bottom: 0.25em solid #CCC;
  overflow: auto;
  position: relative;
  padding-bottom: 1.5em;
}

#main .aside-inner {
  margin-top: 12px;
  padding: 0 10px;
  background: #EEE;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

.aside-inner h2 {
  padding: 17px 0 6px 0;
  border-bottom: 1px solid #FFF;
}

.intro {
  font-family: 'DroidSerifBoldItalic', Georgia, serif;
  padding-top: 12px;
}

.image {
  border: 5px solid #CCC;
  display: inline-block;
  padding: 5px;
}

.image.right {
  float: right;
  margin: 16px 0 48px 10px;
}

.comment_entries {
  border-top: 5px solid #CCC;
}

#comment_form {
  background: #EEE;
  padding: 0 10px;
}

/* --- Footer ----------------------------------- */

#footer {
  overflow: auto;
  padding: 12px 10px;
  position: relative;
  border-bottom: 1px dotted #CCC;
}

/*** Positioning ***/

#footer .timeline,
#footer .photostream,
#footer .elsewhere {
  float: left;
}

#footer .elsewhere,
#footer .timeline {
  padding-right: 20px;
}

#footer .timeline     { width: 460px; }
#footer .photostream  { width: 240px; }
#footer .elsewhere    { width: 200px; }

/*** Typographic adjustments ***/

#footer h4 {
  padding: 0;
}

#footer h5 {
  padding-bottom: 0;
}

#footer p,
#footer ul {
  font-size: 12px;
  line-height: 24px;
}

#footer h4 {
  font-size: 14px;
  line-height: 24px;
}

#footer .tweet .timestamp,
#footer .photo .photo-title {
  font-size: 12px;
  padding-top: 4px;
  line-height: 24px;
}

#footer .tweet .status {
  padding-bottom: 2px;
}

/*** Headers ***/

#footer h4 a {
  background: transparent url("/images/site_image_assets/diagonal_stripes.1269217210.png") repeat-x 0 0;
  display: block;
  padding: 4px 10px;
  text-decoration: none;
}

#footer h4 a:link,
#footer h4 a:visited {
  background-color: transparent;
}

#footer h4 a:hover,
#footer h4 a:active {
  background-color: #FFF;
}

/*** Twitter Timeline & Flickr Photostream ***/

#footer .tweet,
#footer .photo {
  margin-top: 4px;
}

#footer .tweet-link {
  text-decoration: none;
}

#footer .tweet-link:link,
#footer .tweet-link:visited,
#footer .photo-link:link,
#footer .photo-link:visited {
  color: #333;
}

#footer .tweet-link:hover,
#footer .tweet-link:active,
#footer .photo-link:hover,
#footer .photo-link:active {
  background: rgba(255,255,255,0.5);
  color: #003399;
}

#footer .tweet .timestamp,
#footer .tweet .status,
#footer .photo .photo-title,
#footer .photo .photo-wrapper {
  background: inherit;
  cursor: pointer;
}

#footer .tweet .timestamp,
#footer .tweet .status,
#footer .photo .photo-title {
  padding-left: 10px;
  padding-right: 10px;
}

#footer .tweet .timestamp,
#footer .photo .photo-title {
  color: #999;
}

#footer .photo .photo-wrapper {
  width: 240px;
  height: 184px;
  overflow: hidden;
}

/*** Elsewhere ***/

#footer .elsewhere p {
  padding: 8px 0 8px 10px;
}

#footer .availability {
  margin-top: 24px;
}

#footer .social {
  list-style: none;
  overflow: auto;
  margin-left: 0;
  position: relative;
}

#footer .social li {
  display: block;
  float: left;
  width: 40px;
}

#footer .social a {
  background-image: url("/images/site_image_assets/sprited_social_icons_web.1271636446.png");
  background-repeat: no-repeat;
  display: block;
  height: 36px;
  text-indent: -9999em;
  width: 40px;
}

#footer #slideshare a  { background-position: 0px 0;    }
#footer #github a      { background-position: -40px 0;  }
#footer #meetup a      { background-position: -80px 0;  }
#footer #dribbble a    { background-position: -120px 0; }
#footer #linkedin a    { background-position: -160px 0; }

#footer #slideshare a:hover, #footer #slideshare a:active { background-position: 0 -50px;       }
#footer #github a:hover,     #footer #github a:active     { background-position: -40px -50px;   }
#footer #meetup a:hover,     #footer #meetup a:hover      { background-position: -80px -50px;   }
#footer #dribbble a:hover,   #footer #dribbble a:hover    { background-position: -120px -50px;  }
#footer #linkedin a:hover,   #footer #linkedin a:hover    { background-position: -160px -50px;  }

@media print {
  /* Place all print-specific styles in here.
  /* Works in IE5+ (test case 4 on http://www.codestyle.org/css/media/print-BrowserSummary.shtml) */
  /*
==================================================
  PRINT.CSS
  
  Author:   Ruthie BenDor
  Updated:  2010-May-24
==================================================
*/

@media print {
  /* Place all print-specific styles in here. */
  /* Works in IE5+ (test case 4 on http://www.codestyle.org/css/media/print-BrowserSummary.shtml) */
}
}

@media only screen and (max-device-width: 480px) and (orientation:portrait) {
  /* Styles for iPhone 1/2/3/3GS in portrait mode */
}

@media only screen and (max-device-width: 480px) and (orientation:landscape) { 
  /* Styles for iPhone 1/2/3/3GS in landscape mode */
}