/* FABRIC - R1 ; No12 ; STYLE.CSS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* FABRIC RESET
`````````````````````````````````````````````````````````````````````````` */
html, body, nav, section, article, aside, div, h1, h3, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td 
{ margin: 0; padding: 0; }

body { color: #000; font: 14px/20px Helvetica, sans-serif }

h1 { font-size: 36px; line-height: 36px; margin-bottom: 18px; font-family: Helvetica, sans-serif;} 

a { text-decoration: none; color: #404040; }

a:hover { text-decoration: none; color: #999; } 

img { border: none; }

p, ul, ol, dl, table { margin-bottom: 0px; }

ul, ol, dd { margin: 0; }

.clearing { clear: both; }
.clearfix { overflow: hidden; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

/* STRUCTURE
`````````````````````````````````````````````````````````````````````````` */
h1, h1.heading, h1.title, h1.contact { 
	font-family: 'Lora', serif; 
	color: #2bb673;
}

h1.heading {
	border-bottom: 0.08em dotted;
	padding-bottom: 0.5em;
}

h1.title, h1.contact { font-size: 2em; color: #333e48;}

p { font: 1em/1.75em 'Droid Sans', sans-serif; color: #333e48;}

span { color: #2bb673;}

.main p { text-align: center;}

code {
	color: #333e48;
	overflow: hidden;
	font-size: 0.85em;
}

a.getit, a.gitit {
	font: 1.5em/2em 'Anton', serif;
	letter-spacing: 0.15em;
	text-decoration: none;
	color: #e7e2e6;
	background: #333e48;  
	border-radius: 0.3em;
	padding: 0.5em 2em;
	border-bottom: 0.2em solid #2a333c;
	display: block;
}

a.getit:hover, a.gitit:hover { 
	background: #485662;
}

pre {
	background: #e7e2e6;
	border-radius: 2px;
	padding: 0 1em;
	/* text wrap */
	word-break: break-all; 		 /* webkit */
	word-wrap: break-word;
	white-space: pre-wrap;       /* css-3 */
 	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 	white-space: -pre-wrap;      /* Opera 4-6 */
 	white-space: -o-pre-wrap;    /* Opera 7 */
 	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.info {
	background: #333e48;
	color: #e7e2e6;
	border-radius: 2px;
	padding: 0.5em;
	margin-top: 1em;
}

.info p { color: #f2f2f2; }

hr { 
	color: #2bb673;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 0.2em dotted;
}

/* Sections */
section#landing, section#about, section#work, section#services, section#contact, footer { width: 100%; }

/* Section Style */
section#landing, { background: #e7e2e6; }

section#about, section#services { background: #e7e2e6; }

section#work { background: #f2f2f2;}

section#contact { background: #2bb673;}

section#services {
	padding-top: 3em;
}

footer { background: url(../img/tildawave-g.png) repeat-x #333f49; padding-top: 1.5em;}

/* Special Case Image(s) */
section#landing { background: url(../img/tildawave.png) repeat-x #e7e2e6; }

/* Inner Containers */
.main, .about, .work, .contact, .services, .footer {
	margin: 0 auto; 
	width: 70em; 
	padding: 4% 0 4% 0; 
	overflow: auto; 
	max-width: 98%;
}

.footer { padding: 1% 0; }

.main { padding-top: 8em; }

.contact { margin: 0 auto;}

/* Content */
.one-left, .two-left {
	width: 30%;
	float: left;
	margin-right: 5%;
}

.three-right {
	width: 30%;
    float: right;
}

.one-half, .two-half {
	width: 47.5%;
	float: left;
	text-align: center;
}

.one-half {
	margin-right: 5%;
	margin-bottom: 5%;
}

.one-half p, .two-half p {
	margin: 2em 0;
	color: #f2f2f2;
}

article, article.left {
	width: 60%;
	margin-right: 5%;
	float: left;
	padding: 4% 0 4% 0;
}

article.left {
	width: 25%;
}

article.fullwidth {
	width: 100%;
	margin: 0;
	padding: 0 ;
}

aside, aside.right {
    width: 35%;
    float: left;
    margin-bottom: 1%;
    padding: 4% 0 4% 0;
}

aside.right {
	width: 70%;
}

.contain {
	width: 100%;
	height: auto;
	float: left;
}

/* HEADER 
`````````````````````````````````````````````````````````````````````````` */
header {
	background: #333e48;
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
}

header p {
	color: #e7e2e6;
	width: 40%;
	margin: 0 auto;
	padding-bottom: 5em;
	font-size: 1.2em;
}

h1.landing {
	font-family: 'Lora', serif;
	font-size: 2em;
	text-align: center;
	margin: 1em 0;
}

/* IMG
`````````````````````````````````````````````````````````````````````````` */
.banner img.landing {
	width: 8%;
	top: 0;
	margin: 0 auto;
	margin-top: 3em;
}

img.badge {
	float: left;
	margin: 0 auto;
}

.banner img.section, img.intro {
	width: 100%;
	top: 0;
}

img.example, img.border { width: 100%; }

img.border {
	border-radius: 2px;
	border: 0.5em #e7e2e6 solid;
	-moz-box-sizing: border-box; /*draw border on the inside of an element*/
   	-webkit-box-sizing: border-box; /*draw border on the inside of an element*/
    box-sizing: border-box; /*draw border on the inside of an element*/
}

/* NAV 
`````````````````````````````````````````````````````````````````````````` */
nav#navmain {
	text-align: center;
	font: 1em 'Anton', sans-serif;
    background-color: #333e48;
    text-align: center;
    padding-top: 0.5em;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	width: 100%;
	padding-bottom: 5em;
}
 
nav#navmain li { 
	float: left;
	text-align: center;
	padding: 1em 5em;
}

nav#navmain ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline-block;
}

nav#navmain li a {
	text-decoration: none;
	color: #fff;
	background: #2bb673;
	border-radius: 0.5em;
	padding: 0.5em 2em;
	border-bottom: 0.2em solid #242c33;
	width: 100%;
}

nav#navmain li a.learn {
	color: #333e48;
	background: #e7e2e6;
} 

nav#navmain li a.download {letter-spacing: 0.25em; }

nav#navmain li a.download:hover{ background: #38c581; }

nav#navmain li a.learn:hover{ background: #fff; }

/* CONTACT FORM 
`````````````````````````````````````````````````````````````````````````` */
#name, #email, #comments {
	font: 1em/1em 'Droid Sans', sans-serif;
	display: block;
	width: 20%;
	height: 1em;
	margin-bottom: 1em;
	border: none;
	padding: 1em 0.5em;
	float: left;
	margin-right: 2%;
	border-radius: 2px;
	background: #80e0b2;
}

#comments{ width: 44%; }

#name:hover, #email:hover, #comments:hover { background: #fff; }

fieldset {
	-padding: 5% 10% 5% 4%;
	border: none;
}

button.form_button {
	font: 1em/1em 'Droid Sans', sans-serif;
	float: left;
	color: #fff;
	text-transform: lowercase;
	border: none;
	cursor: pointer;
	width: 5%;
	padding: 0.9em 1em;
	border-radius: 2px;
	display: block;
	background: #239860;
}

button.form_button:hover {
	background: #1d8251;
}

.statusMessage { display: none; }

/* SOCIAL 
`````````````````````````````````````````````````````````````````````````` */
.social {
	margin: 0 auto;
	padding-top: 10%;
}

.social ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.social ul li{
	margin: 0;
	padding: 0;
	display: inline;
	padding-right: 10%;
	float: left;
}

.social img {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/* FOOTER 
`````````````````````````````````````````````````````````````````````````` */
button.top {
	font: 1em 'Droid Sans', sans-serif;
	background: #2a333c;
	border: none;
	margin: 0 auto;
	color: #485663;
	width: 4em;
	float: right;
	cursor: pointer;
	border-radius: 2px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.footer p {
	margin: 0 auto;
	text-align: center;
	float: left;
	color: #485663;
}

.footer a { color: #485663;}


/* EXTRA 
`````````````````````````````````````````````````````````````````````````` */
::selection
{
background:#2bb673;
color: #fff;
}
::-moz-selection
{
background:#2bb673;
color: #fff;
} 

/* TRANSITIONS AND TRANSFORMS 
`````````````````````````````````````````````````````````````````````````` */
a, #name, #email, #comments, button.form_button, .social img, button.top, img.badge {  
	/* Transition: Smooth hover animation */
	transition: all 0.15s;
	/* Browser specific tags, IE has to be 10 or up to work */
	-ms-transition: 0.15s; /* IE 10 */
	-webkit-transition: 0.15s; /* Safari and Chrome */
	-moz-transition: 0.15s; /* Firefox */
	-o-transition: 0.15s; /* Opera */
}

.social img:hover, img.badge:hover, button.top:hover {
	/* Transform: Move elements up on hover */
	transform: translateY(-3px);
	/* Browser specific tags, IE has to be 9 or up */
	-ms-transform: translateY(-3px); /* IE 9 only supports 2D transforms */
	-webkit-transform: translateY(-3px); /* Safari and Chrome */
	-moz-transform: translateY(-3px); /* Firefox */
	-o-transform: translateY(-3px); /* Opera */
}