html {
  
  -webkit-font-smoothing: antialiased;
  
  margin: 0;
  background-color: #44484d;
  background-repeat: repeat-x;
  
  background-image: -moz-linear-gradient(top, #2b2e32, #44484d); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2b2e32),color-stop(1, #44484d)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#2b2e32', EndColorStr='#44484d'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2b2e32', EndColorStr='#44484d')"; /* IE8 */
}

body {
  margin-top: 40px;
  text-align: center;
  color: #222;
  
  font-weight: 300;
  font-family: 'Museo Sans', museo-sans-1, museo-sans-2, 'Helvetica','Arial',serif;
}

h1 {
  color: #2b2e32;
  font-weight: 700;
  font-family: 'Museo Slab', museo-slab-1, museo-slab-2, 'Helvetica','Arial',serif;
  font-size: 2.75em;
  padding: 0 0 0 20px;
  margin: 0;
  text-shadow: 0px 1px 1px #fff, 0px -1px 0px rgba(0, 0, 0, 1);
}
h1 span {
  font-size: 1.2em;
}
h2 {
  font-weight: 500;
  font-family: 'Museo Slab', museo-slab-1, museo-slab-2, 'Helvetica','Arial',serif;
}
header h2 {
  background: #e4e4e4;
  padding: 2px 0 2px 20px;
  position: relative;
  top: -5px;
  margin: 0;
  font-size: 1.05em;
  font-weight: 300;
  font-family: 'Museo Sans', museo-sans-1, museo-sans-2, 'Helvetica','Arial',serif;
}


a { color: #d82812; text-decoration: none; }
a:hover { border-bottom: 1px dotted #d82812; }


.box_round, #body, #navigation li {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.box_shadow, #body, #navigation li {
     -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
          box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
}


#container {
  text-align: left;
  margin: 0 auto;
  position: relative;
  width: 550px;
  font-size: 95%;
}
#navigation {
  position: relative;
  width: 60px;
  float: left;
  top: 98px;
  overflow: hidden;
}
#navigation li a:hover { border: none; }
#navigation li {
  position: relative;
  display: block;
  z-index: 10;
  width: 55px;
  height: 50px;
  margin: 8px 0 8px 0;
  background: #ccc;
  left: 20px;
  
  background-image: -webkit-gradient(linear,left top,right top,color-stop(0, #cccccc),color-stop(0.8, #e1dfe2)); /* Saf4+, Chrome */
  background-image: -moz-linear-gradient(left, #cccccc, #e1dfe2); /* FF3.6 */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#e1dfe2'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#e1dfe2')"; /* IE8 */
}
#navigation li.active {
  background: #f4f4f4;
  z-index: 200;
  left: 10px;
  
  background-image: -webkit-gradient(linear,left top,right top,color-stop(0, #e1dfe2),color-stop(0.8, #f4f4f4)); /* Saf4+, Chrome */
  background-image: -moz-linear-gradient(left, #e1dfe2, #f4f4f4 80%); /* FF3.6 */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#e1dfe2', EndColorStr='#f4f4f4', GradientType=1); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e1dfe2', EndColorStr='#f4f4f4', GradientType=1)"; /* IE8 */
}

#navigation li.about img    { margin: 13px 0 0 12px; }
#navigation li.networks img { margin: 10px 0 0 10px; }
#navigation li.contact img  { margin: 11px 0 0 7px; }




#content > div dl:after,
#about .section:after,
#inquiries:after,
#networks:after,
#contact:after,
#body:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}


#body {
  float: left;
  z-index: 100;
  width: 450px;
  background: #f4f4f4;
  position: relative;
  
  padding-bottom: 20px;
  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.98, #f4f4f4), color-stop(1, #cccccc));
  background-image: -moz-linear-gradient(top, #f4f4f4 98%, #cccccc 100%);
}

#content {
  overflow: hidden;
  position: relative;
}
#content:after {
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(1, #e1dfe2),color-stop(0.1, #f4f4f4)); /* Saf4+, Chrome */
  background-image: -moz-linear-gradient(left, #cccccc, #f4f4f4); /* FF3.6 */
}
#content > div {
  margin: 0 20px 20px 20px;
}
#content > div.inactive {
  opacity: 0.4;
}
#content > div.active {
  opacity: 1;
}



#about .section {
  border-top: 1px solid #e4e4e4;
  padding: 1.2em 0 0 0;
  margin: 15px 0 0 0;
  position: relative;
  overflow: visible;
}
#about .section:first-child {
  border-top: none;
  margin-top: 0;
}
#about .section h2 {
  display: inline;
  position: relative;
  left: 60px;
  margin: 0;
}
#about .section img { position: absolute; left: 0; }
#about .section p { padding-left: 60px; margin-bottom: 0; }
#about .section .site {
  font-size: 90%;
  color: #888;
  position: relative;
  display: block;
  left: 60px;
  top: -2px;
}
#about ul { list-style: none; margin: 0; }
#about ul li { margin: 0; line-height: 1.7em; }
#about dl dt { position: absolute; width: 50px; text-align: right; }
#about dl dd { position: relative; left: 50px; top: 0; margin-left: 10px; }



#networks ol li {
  list-style-type: none;
  margin-left: 0;
}
#networks ol a {
  height: 32px;
  padding-left: 42px;
  margin-bottom: 1em;
  color: #343434;
  text-decoration: none;
  background-repeat:  no-repeat;
  background-attachment: scroll;
  background-position: 0 -48px;
  display: block;
  float: left;
  width: 160px;
  background-image: url(../images/icons.png);
}
#networks ol a:hover { border: none; }
#networks ol a strong { font-size: 1.2em; display: block; line-height: 1.2em; }
#networks ol a span   { display: block; font-size: 0.8em; }

#networks #twitter         { background-position: 0 -544px; }
#networks #twitter:hover   { background-position: 0 -512px; color: #9de7ea; }
#networks #linkedin        { background-position: 0 -224px; }
#networks #linkedin:hover  { background-position: 0 -192px; color: #3399CC;}
#networks #flickr          { background-position: 0 -288px; }
#networks #flickr:hover    { background-position: 0 -256px; color: #ff0c8a;}
#networks #facebook        { background-position: 0 -352px; }
#networks #facebook:hover  { background-position: 0 -320px; color: #3B5998;}
#networks #lastfm          { background-position: 0 -160px; }
#networks #lastfm:hover    { background-position: 0 -128px; color: #D51007;}
#networks #github          { background-position: 0 -608px; }
#networks #github:hover    { background-position: 0 -576px; color: #4183C4;}
#networks #gowalla         { background-position: 0 -96px; }
#networks #gowalla:hover   { background-position: 0 -64px; color: #ff7616;}
#networks #delicious       { background-position: 0 -480px; }
#networks #delicious:hover { background-position: 0 -448px; color: #6394d9;}
#networks #dribbble        { background-position: 0 -416px; }
#networks #dribbble:hover  { background-position: 0 -384px; color: #de7a9f;}
#networks #forrst          { background-position: 0 -32px; }
#networks #forrst:hover    { background-position: 0 0; color: #1e4d20;}


#networks small {
  clear: both;
  display: block;
  font-size: 0.8em;
}


#contact h2 { border-bottom: 1px solid #e4e4e4; }
#contact .column { display: block; float: right; width: 205px; }
#contact #inquiries { border-right: 1px solid #e4e4e4; width: 204px; }
#contact #getintouch h2,
#contact #getintouch > div { padding-left: 10px; }
#contact #getintouch > div { margin-bottom: 0.8em; }
#contact #getintouch > div strong { display: block; }
#contact label { display: block; }




#footer {
  clear: both;
  font-size: 0.8em;
  color: #aaa;
  padding: 10px 20px 5px 20px;
  margin: 0;
  position: relative;
  left: 50px;
}
#footer a { color: #d34f43; border-color: #d34f43; }


input, textarea, a.button {
  font-size: 1.1em;
  padding: 0.3em;
  width: 180px;
  border: 1px solid #bbb;
  margin-bottom: 10px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
input:focus, textarea:focus, input:hover, textarea:hover, a.button:hover {
  border: 1px solid #d82812;
     -moz-box-shadow: 0px 0px 3px rgba(216, 40, 18, 0.5);
  -webkit-box-shadow: 0px 0px 3px rgba(216, 40, 18, 0.5);
          box-shadow: 0px 0px 3px rgba(216, 40, 18, 0.5);
  
}
textarea { height: 150px; }
input.error, textarea.error { background-color: #ffefef; }

input[type=submit], a.button {
  width: 190px;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc')"; /* IE8 */
}
input[type=submit]:hover {
  cursor: pointer;
}

input[type=submit]:focus,
input[type=submit]:active {
  background-image: -moz-linear-gradient(top, #cccccc, #eeeeee); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #cccccc),color-stop(1, #eeeeee)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#eeeeee'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#eeeeee')"; /* IE8 */
}

#error { color: #d34f43; margin-bottom: 10px; font-weight: 500; }
.field_error { color: #d34f43; font-weight: 500; }

#throbber {
  width: 100%;
  text-align: center;
}
#throbber img {
  display: block;
  margin-top: 120px;
  margin-left: 40%;
}
#throbber #thankyou {
  margin-top: 120px;
}


.ie-shadow {
    display: block;
    position: absolute;
    width: 102px; /* match target width */
    height: 102px; /* match target height */
    z-index: 50; /* between #body and #nav li */
    left: 50px;
    top: 0px;
    background: #000;
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.80');
}

#modal-overlay {
  position: fixed;
  z-index:1000;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
}

#modal-box {
  position: fixed;
  z-index: 1001;
  top: 0px;
  left: 35%;
  width: 400px;
  background: #eee;
  display: none;
  border-bottom: 1px solid #000;
  padding: 20px;
  font-size: 0.9em;

  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #eeeeee)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee')"; /* IE8 */
}
#modal-box h2 {
  margin: 0;
}
#modal-box .text {
  margin-bottom: 2em;
}
#modal-box .text p {
  text-align: left;
  margin-bottom: 0.2em;
}
#modal-box h3 {
  font-weight: 500;
  font-family: 'Museo Slab', museo-slab-1, museo-slab-2, 'Helvetica','Arial',serif;
}
#modal-box .browsers {
  padding-left: 12%;
}
#modal-box .browsers a {
  float: left;
  border-bottom: 1px dotted #eee;
  margin-right: 10px;
}
#modal-box .browsers a:hover {
  border-color: #d82812;
}
#modal-box .browsers .clear {
  clear: left;
}
#modal-box a.button {
  display: block;
  width: 200px;
  margin: 10px auto 0px auto;
}






@media screen and (max-width: 480px) {
  html {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
  }
  body {
    margin-top: 5px;
  }
  #container {
    width: 310px;
    margin: 0 auto;
  }
  #navigation {
    display: none;
  }
  #body {
    width: 310px;
    position: static;
    height: 100%;
  }
  #networks, #contact, #inquiries {
    border-top: 5px solid #e4e4e4;
  }
  #networks, #about, #contact {
    display: block !important;
  }
  
  #networks ol a {
    width: 260px;
  }
  
  #footer {
    left: 0;
  }
  h1 {
    font-size: 2em;
    padding: 0;
    padding-left: 5px;
    width: 305px;
  }
  header h2 {
    font-size: 0.76em;
    padding: 4px 0 3px 5px;
  }
  #content {
    overflow: visible;
    position: static;
    height: 100% !important;
  }
  #content > div {
    margin-left: 5px;
    margin-right: 0;
    width: 300px;
/*    margin-right: 5px;*/
  }
  #content > div.inactive {
    opacity: 1;
  }
  
  #about dl { margin-top: 10px; }
  #about dl dt { display: none; }
  #about dl dd { left: 0; /*font-size: 0.76em;*/ margin: 0; }
  #about .section img { width: 32px; }
  
  #about .section h2,
  #about .section .site {
    left: 40px;
  }
  #about .section h2 { font-size: 1.2em; line-height: 1.2em; }
  #about .section p { padding-left: 0; /*font-size: 0.76em;*/ margin-top: 10px; }
  #about .section.no-img h2 { left: 0; }
  
  #contact h2, #networks h2 { border: none; margin-bottom: 10px; margin-top: 5px; }
  #contact #inquiries { border-right: none; width: 300px; }
  #contact .column { float: none; width: 300px; }
  #contact #getintouch h2,
  #contact #getintouch > div { padding-left: 0; }
  
  input,
  textarea {
    width: 290px;
  }
  input[type=submit] {
    width: 300px;
  }
}


@media screen and (max-width: 320px) {
  body {
    margin-left: 5px;
/*    width: 310px;*/
  }
/*  #container {
    width: 310px;
    margin: 0;
  }
  #body {
    width: 310px;
*/
}