/**
 * HTML5 ✰ Boilerplate
 *
 * style.css contains a reset, font normalization and some base styles.
 *
 * Credit is left where credit is due.
 * Much inspiration was taken from these projects:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 */


/**
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }

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

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

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

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }


/**
 * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
 */

body { font:13px/1.231 'SourceSansProRegular' sans-serif; *font-size:small;} /* Hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }

/* Normalize monospace sizing:
   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }


/**
 * Minimal base styles.
 */

/* Always force a scrollbar in non-IE */
html { overflow-y: scroll; }

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }

small { font-size: 85%; }
strong, th { font-weight: bold; }

td { vertical-align: top; }

/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  padding: 15px;
}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

.ie6 legend, .ie7 legend { margin-left: -7px; } 

/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }

/* Colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
   border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }


/* These selection declarations have to be separate
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink! */
::-moz-selection{ background: #000; color:#fff; text-shadow: none; }
::selection { background:#000; color:#fff; text-shadow: none; }

/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #000; }

/* Make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

/* Bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }

/**
 * You might tweak these..
 */

body, select, input, textarea {
  /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
  color: #444;
  /* Set your base font here, to apply evenly */
  /* font-family: Georgia, serif;  */
}

/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }

a, a:active, a:visited { color: #666;}
a:hover { color: #000; }


/**
 * Primary styles
 *
 * Author: 
 */

 #nav{
  z-index: 100;
 }

 @font-face {
    font-family: 'SourceSansProExtraLight';
    src: url('SourceSansPro-ExtraLight-webfont.eot');
    src: url('SourceSansPro-ExtraLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-ExtraLight-webfont.woff') format('woff'),
         url('SourceSansPro-ExtraLight-webfont.ttf') format('truetype'),
         url('SourceSansPro-ExtraLight-webfont.svg#SourceSansProExtraLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansProExtraLightItalic';
    src: url('SourceSansPro-ExtraLightIt-webfont.eot');
    src: url('SourceSansPro-ExtraLightIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-ExtraLightIt-webfont.woff') format('woff'),
         url('SourceSansPro-ExtraLightIt-webfont.ttf') format('truetype'),
         url('SourceSansPro-ExtraLightIt-webfont.svg#SourceSansProExtraLightItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansProLight';
    src: url('SourceSansPro-Light-webfont.eot');
    src: url('SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-Light-webfont.woff') format('woff'),
         url('SourceSansPro-Light-webfont.ttf') format('truetype'),
         url('SourceSansPro-Light-webfont.svg#SourceSansProLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansProLightItalic';
    src: url('SourceSansPro-LightIt-webfont.eot');
    src: url('SourceSansPro-LightIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-LightIt-webfont.woff') format('woff'),
         url('SourceSansPro-LightIt-webfont.ttf') format('truetype'),
         url('SourceSansPro-LightIt-webfont.svg#SourceSansProLightItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansProRegular';
    src: url('SourceSansPro-Regular-webfont.eot');
    src: url('SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-Regular-webfont.woff') format('woff'),
         url('SourceSansPro-Regular-webfont.ttf') format('truetype'),
         url('SourceSansPro-Regular-webfont.svg#SourceSansProRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansProItalic';
    src: url('SourceSansPro-It-webfont.eot');
    src: url('SourceSansPro-It-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-It-webfont.woff') format('woff'),
         url('SourceSansPro-It-webfont.ttf') format('truetype'),
         url('SourceSansPro-It-webfont.svg#SourceSansProItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansProSemibold';
    src: url('SourceSansPro-Semibold-webfont.eot');
    src: url('SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-Semibold-webfont.woff') format('woff'),
         url('SourceSansPro-Semibold-webfont.ttf') format('truetype'),
         url('SourceSansPro-Semibold-webfont.svg#SourceSansProSemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansProSemiboldItalic';
    src: url('SourceSansPro-SemiboldIt-webfont.eot');
    src: url('SourceSansPro-SemiboldIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-SemiboldIt-webfont.woff') format('woff'),
         url('SourceSansPro-SemiboldIt-webfont.ttf') format('truetype'),
         url('SourceSansPro-SemiboldIt-webfont.svg#SourceSansProSemiboldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansProBold';
    src: url('SourceSansPro-Bold-webfont.eot');
    src: url('SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-Bold-webfont.woff') format('woff'),
         url('SourceSansPro-Bold-webfont.ttf') format('truetype'),
         url('SourceSansPro-Bold-webfont.svg#SourceSansProBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansProBoldItalic';
    src: url('SourceSansPro-BoldIt-webfont.eot');
    src: url('SourceSansPro-BoldIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-BoldIt-webfont.woff') format('woff'),
         url('SourceSansPro-BoldIt-webfont.ttf') format('truetype'),
         url('SourceSansPro-BoldIt-webfont.svg#SourceSansProBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansProBlack';
    src: url('SourceSansPro-Black-webfont.eot');
    src: url('SourceSansPro-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-Black-webfont.woff') format('woff'),
         url('SourceSansPro-Black-webfont.ttf') format('truetype'),
         url('SourceSansPro-Black-webfont.svg#SourceSansProBlack') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SourceSansProBlackItalic';
    src: url('SourceSansPro-BlackIt-webfont.eot');
    src: url('SourceSansPro-BlackIt-webfont.eot?#iefix') format('embedded-opentype'),
         url('SourceSansPro-BlackIt-webfont.woff') format('woff'),
         url('SourceSansPro-BlackIt-webfont.ttf') format('truetype'),
         url('SourceSansPro-BlackIt-webfont.svg#SourceSansProBlackItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}


h1.fontface {font: 60px/68px 'SourceSansProRegular', Arial, sans-serif;letter-spacing: 0;}

p.style1 {font: 18px/27px 'SourceSansProExtraLight', Arial, sans-serif;}
p.style2 {font: 18px/27px 'SourceSansProExtraLightItalic', Arial, sans-serif;}
p.style3 {font: 18px/27px 'SourceSansProLight', Arial, sans-serif;}
p.style4 {font: 18px/27px 'SourceSansProLightItalic', Arial, sans-serif;}
p.style5 {font: 18px/27px 'SourceSansProRegular', Arial, sans-serif;}
p.style6 {font: 18px/27px 'SourceSansProItalic', Arial, sans-serif;}
p.style7 {font: 18px/27px 'SourceSansProSemibold', Arial, sans-serif;}
p.style8 {font: 18px/27px 'SourceSansProSemiboldItalic', Arial, sans-serif;}
p.style9 {font: 18px/27px 'SourceSansProBold', Arial, sans-serif;}
p.style10 {font: 18px/27px 'SourceSansProBoldItalic', Arial, sans-serif;}
p.style11 {font: 18px/27px 'SourceSansProBlack', Arial, sans-serif;}
p.style12 {font: 18px/27px 'SourceSansProBlackItalic', Arial, sans-serif;}



.project {
	width: 980px;
  height: 140px;
  padding-bottom: 120px;
  padding-top: 40px;
  float: left;
	text-decoration:none;
  position: relative;
  display: block;
  border-bottom:1px #CCC solid;

  -webkit-transition:  all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out; 
  transition: all .4s ease-out; 
}
.project:hover{
background: -moz-linear-gradient(top,  rgba(234,234,234,0.65) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,0.65)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(234,234,234,0.65) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6eaeaea', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */


}

.projecttxt{
  float:right;
  margin: 10px;
  width: 460px;
  font-size:1.8em;
  font-family: 'SourceSansProRegular', Arial, sans-serif;
  margin-bottom: 10px;
  position: relative;
  top: -60px;
  text-align: justify;
}
.ptleft{
padding-left: 30px;
width: 460px;
font-size:1.8em;
font-family: 'SourceSansProRegular', Arial, sans-serif;
text-align: justify;

}

.projectright{
 position: absolute;
 bottom: 0;
 right:0;
 z-index: 1;

}

.projectleft{
 position: absolute;
 bottom:0;
 left:0;
 z-index: 1;
}

.squareimg{
 position: absolute;
 top: 0px;
 right:80px;
 z-index: 1;
}

h2{
    font-size:2.6em;
  font-family: 'SourceSansProLightItalic', Arial, sans-serif;
  text-align: center;
}
h3{
	font-size:2.6em;
  font-family: 'SourceSansProSemibold', Arial, sans-serif;
  padding-left: 30px;
}

.titlebreak{
    background-image: url(../images/hr.jpg);
    background-position: center bottom;

}

.sub-h2{
	font-size:1.8em;
  font-family: 'SourceSansProLight', Arial, sans-serif;
	padding-bottom:10px;
  padding-left: 30px;
}

.row{
	padding-bottom:5%;
}


#footer{
  height: 300px;
  text-align:center;
  position: relative;

}
#footer img{
  padding-top: 152px;
}

.footsie{
  font-family: 'SourceSansProLight', Arial, sans-serif;
  letter-spacing: .08em;
  text-align: left;
  height: 50px;
  padding:15px;
  color:#FFF;

     -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000), color-stop(0.5, #383838), color-stop(0.51, #222222), color-stop(1, #000));
    background-image: -moz-linear-gradient(center bottom, #000 0%, #383838 50%, #222222 51%, #000 100%);
    background-color:#5f5f5f; /* Fallback */
}
.footsie a, .footsie a:active, .footsie a:visited {
  padding: 0 10px;
  border-left: 1px #CCC solid;
  color:#FFF;
}

.footsie a:hover{
  color:#CCC;
}

.endlink{
  width:100%; text-align:center; opacity:.8;
}
.endlink:hover{
 opacity:1; 
}

/*
Apple Menu via marcofolio.net                                                                
*/



/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:980px; margin:40px auto; }

/* CONTENT */
#content { margin-top:50px; }
#content p { font: 14px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; color:#333333; line-height:18px; margin:15px auto; width:800px; }
#content p a { color:#0088CC; text-decoration:none; }
#content p a:hover { text-decoration:underline; }

/* APPLE STYLE NAVIGATION MENU */
#appleNav { margin:40px 0; list-style:none;

    /* Lucinda Grande is the font used on the website from Apple. */
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;
    
    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #202020;

    /* We want to add the shadow to the complete navigation menu. In order to do that, we'll need to set
    the correct width and height, and also the correct borders, in order to create the perfect drop shadow */
    width:976px; height:34px;
    
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
}

#appleNav li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:140px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
}

/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
#appleNav li:not(:last-child):hover {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #4e4340 51%, #555555 100% );
    background-color:#383838; /* Fallback */
    
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
}

/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
#appleNav li:not(:last-child):active {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */
    
    -moz-box-shadow: inset 0 1px 2px 2px #000;
    -webkit-box-shadow: inset 0 1px 2px 2px #000;
    box-shadow: inset 0 1px 2px 2px #000;
}

#appleNav li a { color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }

/* Styling of the search field */
#appleNav form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;

    /* We use the CSS3 multiple backgrounds for the input field: The magnifier image and the gradient background */    
    background-image: url("../images/magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
    background-image: url("../images/magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    
    background-color:#6E6E6E; /* Fallback */
    
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
}

/* Rounded corner for the first in last item. Shorthand: Top left, Top right, Bottom right, Bottom left.
We also remove the borders, since they don't need them. */
#appleNav li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;
    
    border-left:none;
}

/* The first child image - the logo - has to be centered. Because of the image dimensions, we manually need to shift it a bit. */
#appleNav li:first-child a img {
   vertical-align:middle; margin-top:-2px;
}

#appleNav li:last-child {
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;
    
    border-right:none;
    
    /* The width of the last menu item (search bar) is bigger than the others */
    width:124px;
}

/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
    from { opacity: 0; top:-20px; }
    to   { opacity: 1; }
}

#appleNav {
     -webkit-animation: showMenu 1s; position:relative;
}




/**
 * Non-semantic helper classes: please define your styles before this section.
 */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }



/**
 * Media queries for responsive design.
 *
 * These follow after primary styles so they will successfully override.
 */

@media all and (orientation:portrait) {
  /* Style adjustments for portrait mode goes here */

}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */

}

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {


  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}


/**
 * Print styles.
 *
 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
 */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}