html {font-family: 'Droid Serif', Georgia, serif;background-color:#556;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;}

body, select, input, textarea {color: #333;}

/* smooth hover effects */
* {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }

a:link {-webkit-tap-highlight-color: #fcd700;} 

/* Basic
-------------------------------------------------------------------------------*/

/* Apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

a {padding:4px;background-color: rgba(197,197,197,0.4);margin: 0 1px 0 0;color:black;display: inline-block;text-decoration: none;border-radius: 3px;}
a:hover {background-color: rgba(197,197,197,0.7);}

b {font-weight: bold;}

.chromeframe {position: absolute; top: 0;}

body,input {font-size: 100%;}

h1 {font-size:260%;font-weight: 600;}
h2 {font-size:130%;margin-bottom: 10px;}
h3 {font-size:120%;margin-bottom: 10px;}
h4 {font-size:110%;margin-bottom: 15px;}

p, ul, ol {margin-bottom: 1em;line-height: 1.4em;}

ul li {list-style: none;margin-bottom: 10px;}


/* Grid
-------------------------------------------------------------------------------*/
.wrapper {width:100%;clear: both;margin: 0px;min-height: 300px;padding: 10px 0;z-index: 1;position: relative;}
.content {margin:0px auto;width: 600px;padding: 50px;background: rgba(255, 255, 255, 0.8);}
.g {margin: 10px 0 0 1.6%;min-height:50px;float:left;display: block;padding:15px;}
.gl {margin-left: 0px;}
.g6 {width:100%;}
.g5 {width:83.06%;}
.g4 {width:66.13%;}
.g3 {width:49.2%;}
.g2 {width:32.26%;}
.g1 {width:15.33%;}
.centered {text-align: center;}
.floored {padding-top: 200px;}
.clear {clear:both;}

/* Specials
-------------------------------------------------------------------------------*/

a:hover .fa-twitter {color: #4099FF}
a:hover .fa-paper-plane {color:#d40a1c;}


/* Media queries
-------------------------------------------------------------------------------*/

@media screen and (max-width: 768px) {
.g6,.g5, .g4.shell {width:100%;}
.g4 {width:66.13%;}
.g3 {width:49.2%;}
.g2 {width:32.26%;}
.g1 {width:15.33%;}
.tablet-hide {display: none !important;}

h1 {font-size:300%;margin-bottom: 10px;}
li a {font-size: 90%;}

.fa-twitter {color: #4099FF}
.fa-paper-plane {color:#d40a1c;}
		
}

@media screen and (max-width: 480px) {
.g1,.g2,.g3,.g4,.g5,.g6 {width: 100%;margin: 0; padding:5px 15px; }
.mobile-hide {display: none !important;}
.content {width:95%;padding:20px;}
h1 {font-size:300%;margin-bottom: 10px;}
li a {font-size: 85%;}
.fa-twitter {color: #4099FF}
.fa-paper-plane {color:#d40a1c;}
}