/* 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 { font-family: 'Alfa Slab One', serif; }

h1.groom { color: #50c6e8; text-transform: uppercase;}

h1.bride { color: #de2a33; text-transform: uppercase;}

h1.gifts { text-transform: uppercase; font: 28px/24px 'PT Mono', serif; }

h1 span.red { color: #de2a33;}

h1 span.blue { color: #50c6e8;}

h1 span.yellow { color: #fdd57e;}

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

hr { border: none; margin: 3em 0;}

a.gifts {
	padding: 0.6em;
	float: left;
	margin-top: 1em;
	background: #d9d9d9;
	border-radius: 0.5em;
}

a.gifts:hover { background: #f2f2f2;}

/* Sections */
section#landing, section#about, section#photos, section#rsvp, section#gifts, section#when, section#break, footer { width: 100%; }

/* Section Style */
section#landing, section#photos, section#gifts, section#when, { background: #fff; }

section#break, section#rsvp, footer { background: #F2F2F2; }

section#break { height: 0.5em; margin-top: 2.5em; margin-bottom: 4em; background: #fff; border-bottom: 1px #9b9b9b dashed;}

section#landing { margin-top: 3em;}

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

.main { padding: 0 0 4% 0;}

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

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

.half-left, .half-right {
	width: 45%;
	float: left;
}

.half-left {
	margin-right: 10%;
}

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

article.wide { width: 100%; margin: 3em 0; padding: 0; float: left; -height: 200px; text-align: center;}

article.half-left { width: 45%; float: left; margin-right: 10%;}

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

aside.half-right { width: 45%; float: left;}

h2.medium, h2.medium-right {
	font: 2em/2em 'Alfa Slab One', serif;
	float: left;
	height: auto;
	border-bottom: 1px #9b9b9b dashed;
	margin-top: 2.5em;
	color: #9b9b9b;
}

h2.medium-right {float: right;}

h3.note { font: 2em/1em "PT Mono", serif; color: #9b9b9b; text-transform: uppercase; margin-top: 1em;}

/* HEADER 
`````````````````````````````````````````````````````````````````````````` */
header {
	width: 100%;
	height: auto;
	margin: 0;
}

/* IMG
`````````````````````````````````````````````````````````````````````````` */
.banner img.landing {
	width: 100%;
	top: 0;
	margin-top: 70px;
}

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

img.extra { 
	-float: left;
	margin: 0 auto;
	padding: 0;
}

img.example { width: 100%; }

.work article.wide {margin: 0 auto;}

.banner h1 { text-align: center; margin-top: 1em;}

/* NAV 
`````````````````````````````````````````````````````````````````````````` */
nav#navmain {
	text-align: center;
	font: 1em 'PT Mono', sans-serif;
    background-color: #fff;
    text-align: center;
    padding-top: 0.5em;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	position: fixed;
	width: 100%;
	opacity: 0.9;
	-webkit-box-shadow: 0 1px 6px  rgba(0, 0, 0, 0.1);
	   -moz-box-shadow: 0 1px 6px  rgba(0, 0, 0, 0.1);
	        box-shadow: 0 1px 6px  rgba(0, 0, 0, 0.1);
	z-index: 1;
}
 
nav#navmain li { 
	float: left;
	text-align: center;
	padding: 1.2em 5em;
}

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

nav#navmain li a{
	text-decoration: none;
	color: #444;
} 

nav#navmain li a:hover{
	text-decoration: none;
	color: #727272;
} 

/* CONTACT FORM 
`````````````````````````````````````````````````````````````````````````` */
#name, #email, #comments {
	font: 1em/1em 'PT Mono', sans-serif;
	display: block;
	width: 100%;
	height: 1.5em;
	margin-bottom: 1em;
	border: 0.10em #4e443c dashed;
	padding: 1em 0.5em;
	font-family: sans-serif;
}

#name, #email { float: left; }

#name:hover, #email:hover, #comments:hover { border: 0.10em #999 dashed; color: #999; }

#comments{ height: 100px; }

fieldset {
	padding: 2% 2% 5% 2%;
	border: none;
}

p.note { font: 1em 'PT Mono', sans-serif; float: left; margin-left: 1em; padding: 0.7em; text-transform: uppercase; color: #4e443c;}

button.form_button {
	font: 1em 'PT Mono', sans-serif;
	float: left;
	color: #000;
	background: #fcd88a;
	text-transform: uppercase;
	border: 0.05em #4e443c dashed;
	padding: 0.5em 5em;
	cursor: pointer;
}

button.form_button:hover { background: #fece66; }

.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 'Anton', sans-serif;
	background: #fff;
	border: none;
	text-transform: uppercase;
	margin: 0 auto;
	color: #000;
	width: 10em;
	float: right;
	cursor: pointer;
}

button.top:hover{ background: #555; }

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

/* TRANSITIONS AND TRANSFORMS 
`````````````````````````````````````````````````````````````````````````` */
a, #name, #email, #comments, button.form_button, .social img, button.top, img.logo-img, img.extra {  
	/* 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.logo-img:hover {
	/* Transform: Move elements up on hover */
	transform: translateY(-5px);
	/* Browser specific tags, IE has to be 9 or up */
	-ms-transform: translateY(-5px); /* IE 9 only supports 2D transforms */
	-webkit-transform: translateY(-5px); /* Safari and Chrome */
	-moz-transform: translateY(-5px); /* Firefox */
	-o-transform: translateY(-5px); /* Opera */
}

img.extra:hover {
	transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1); /* IE 9 */
	-webkit-transform: scale(1.1,1.1); /* Safari and Chrome */
}

/* CAROUSEL
`````````````````````````````````````````````````````````````````````````` */
h1 {
    color: #4E443C;
    font-size: 32px;
    font-weight: bold;
}

h2, h2 a {
    color: #F14E32;
}

h3, h3 a {
  color: #0388A6;
}

a {
  color: #0388A6;
}

pre {
  border:1px solid #000;
  overflow-x:auto;
  background: #222;
  color: #fff;
  text-shadow: none;
}

.wrapper {
    max-width: 70em;
    padding: 0 20px 40px 20px;
    margin: auto;
}

.jcarousel-wrapper {
    margin: 20px auto;
    position: relative;
    z-index: 0;
}

/** Carousel **/

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    width: 200px;
    float: left;
    border: 1px solid #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
    padding: 0;
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 48%;
    margin-top: -15px;
    width: 40px;
    height: 40px;
    text-align: center;
    background: #111;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 36px/32px Arial, sans-serif;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.jcarousel-control-prev {
    left: 15px;
}

.jcarousel-control-next {
    right: 15px;
}

.jcarousel-control-prev:hover, .jcarousel-control-next:hover { background: #222;}

/** Carousel Pagination **/

.jcarousel-pagination {
    position: absolute;
    bottom: -25px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin: 0;
}

.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;

    font-size: 11px;
    height: 16px;
    width: 16px;
    line-height: 16px;

    background: #C2C2C2;
    color: #F0F0F0;
    border-radius: 10px;
    -text-indent: -9999px;

    margin-right: 10px;
}

.jcarousel-pagination a.active {
    background: #111;
    color: #fff;
    opacity: 1;
}