/**
 * Created by Michael Cullen
 * 2011-2017
 * michael@mcullen.me
 *
 * Inspired by:
 * Parallax Scrolling Tutorial
 * For Smashing Magazine
 * July 2011
 *  
 * Author: Richard Shepherd
 *		   www.richardshepherd.com
 * 		   @richardshepherd   
 */

@media screen and (max-width: 1112px){
  #nav li a{
	  width:100px !important;
}	
	#portfolio article {
		padding: 0 24px !important;
	}
}

@media screen and (max-width: 863px){
  #nav {
    height: 65px !important; width: 90% !important;
}
  #nav li{
	  font-size:14px !important;
  }
  
  #nav li a{
	  width:40px !important;
	  /*font-size: 1.2vw;*/
}	
	#portfolio article {
		padding: 0 5px !important;
	}
}

@media screen and (max-width: 600px){
	
	#nav h1 a {
    background: url("../images/header/logo_mobile.png") no-repeat !important;
    display: block;
    float: left;
    height: 40px;
    line-height: normal;
    margin: 10px 0 0 0;
    overflow: hidden;
    text-indent: -100000px;
    width: 50px;
	background-color:rgba(0,0,0) !important;
}

#nav {
    height: 65px !important; width: 90% !important;
}
  body{font-size: 80% !important;
  }
  
  h2 {font-size: 1.5rem !important; margin: 0px;
  }
  h3 {font-size: 1.3rem !important;
  }
  #portfolio article h2 { padding:50px 0 4px 0 !important;}
  #nav li a{
	  width:50px !important;
}
	#nav li{
		font-size:12px !important;
	}
	#portfolio article {
		padding: 0 10px !important;
	}
}

@media screen and (min-width: 600px){
#nav h1 a {
    background: url("../images/header/logo.png") no-repeat;
    display: block;
    float: left;
    height: 40px;
    line-height: normal;
    margin: 20px 0 0 0;
    overflow: hidden;
    text-indent: -100000px;
    width: 176px;
	background-color:rgba(0,0,0) !important;
}
#nav h1 a:hover {
		-webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
opacity: 0.9;
}	
}

body {	background: #f7f7f7;
	background: -moz-radial-gradient(center 45deg,circle closest-corner,#000000 0%,#f4f4f4 100%);
	background: -webkit-gradient(radial,center center,0,center center,70,from(#000000),to(#f4f4f4));
}
body, input, button, textarea {
    font: normal 100%/1.5 'Droid Sans', sans-serif;
	color: #333333;
    font-size: 100%;
}
html {
-webkit-text-size-adjust: auto; /* Automatically adjusted for Safari on iPhone. */
-ms-text-size-adjust: auto; }

::selection {
        background: #00b0d9; /* Safari */
        }
::-moz-selection {
        background: #00b0d9; /* Firefox */
}

article h2 {font-size: 2.5rem; margin: 10px 0; line-height: 1em; }

article h3 {font-size: 2rem; margin: 10px 0; line-height: 1em; }

img {
    max-width: 100%;
}

p {
    line-height: 1.8em;
    margin: 0 0 1em; /*normally 1.5 */
}

.story { height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8);}

.reel { height: 11300px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8);}


#header {
	/*background: url("../images/header/bg2.png");
	background-repeat:repeat;
    background: -moz-linear-gradient(center top , #F0F0F0 0%, #FFFFFF 28%, #ECECEC 100%) repeat scroll 0 0 transparent;*/
	background-color: rgba(0, 0, 0, 0.9);
    /*border-bottom: 1px solid #000;*/
	border-top: 5px solid #00b0d9;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    /*border-top: 5px solid rgba(255, 255, 255, 0.3);*/
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    padding-left: 0;
    position: fixed;
    width: 100%;
    z-index: 15;
}
#nav {
	/*background: url("../images/bg-headerWrapb.jpg") repeat-x center bottom; */
    height: 75px;
	position: relative;
	width:80%;
	max-width: 980px;
	margin: 0 auto;
}
#nav h1 {
    margin: 0;
}

#nav ul {
float:right;
list-style:none outside none;
text-align:right;
}
#nav li {
color:#CCCCCC;
float:left;
display:inline;
font-size:18px;
list-style:none outside none;
}
#nav li a {
color:#fff;
padding:27px 0px;
text-decoration:none;
font-weight:bold;
/*border-left: 1px solid #dadada;*/
    border-top: 1px solid transparent;
    display: block;
    text-align: center;
   /* text-shadow: 0 2px 2px #000000;*/
    width: 130px !important;
-webkit-transition: background 0.4s ease;
  -moz-transition: background 0.4s ease;
  -o-transition: background 0.4s ease;
  transition: background 0.4s ease;
  text-shadow: #00b0d9 1px 1px 0px;
}
#nav li a:hover {
	/* [disabled]color:#FFF; */
	background-color:rgba(0,176,217,0.8);
	text-shadow: #222 1px 1px 0px;
/*border-radius:5px;
-moz-border-radius:5px;*/
}

#nav ul .current a {
  background-color:rgba(4,141,166,1);
  text-shadow: #222 1px 1px 0px;
}

#container {width: 80%; max-width: 980px; margin: 0 auto;box-shadow: 0 0 25px rgba(0,0,0,0.3); }

#mainicons {float:left; width:100%; max-width:980px; list-style:none outside none; margin:0;}

#mainicons li {float:left;margin-left: 50px;}

/*#portfolio {	background: url(../images/wood.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}*/
#sky {
	padding: 90px 0 0 0;
	/*background: url(../images/noise.png) repeat scroll 0 0 #0bb4d3;*/
	background: url(../images/creative_bg.jpg) 50% 0 repeat fixed;
	height: 490px;
}
#portfolio { /*background: url(../images/wood.png) 50% 0 repeat fixed; */ background-color:#262626;}
#music { background: url(../images/outlook_bg.jpg) 0 20% no-repeat fixed; }
#fourth { background: url(../images/slide3.jpg) 50% 0 no-repeat fixed; }
#about { background: url(../images/about_bg.png) 50% 22% no-repeat fixed; height:700px; }
#theend { background: url(../images/contact_bg.jpg) 50% 50% no-repeat fixed; height: 640px;  }

/* Introduction */

#sky article { 
    height: 440px;
	position: relative;
	width:80%;
	max-width: 980px;
	margin: 0 auto;
}

#welcome {
text-align: left; float:left;background:none;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(150, 150, 150, 0.1);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    line-height: 1.5em;
    margin: 120px auto auto;
    padding: 10px 10px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    width: 80%;
	max-width: 530px;}

#view-portfolio {    height: 50px;
float:left;
    margin: 0 auto;
	margin-top: 80px;
    max-width: 980px;
    position: relative;
    width: 64.5%;}
	
.resumes {    float: right;
    height: 50px;
    margin-right: -200px;
    width: 200px;
}

.resumes ul {list-style: none outside none;	margin-left:0;}

#sky article h2 {color:#fff;text-shadow: #333 1px 1px 0px;margin:0px;}
#sky article span {color:#00b0d9;}
#sky article p {font-size:1rem; margin:0;}
#sky article a { color: #fff; }
#sky article a { }
#sky article a:hover {color:#f5f5f5;background-color:#048097; }

a.button {float:right;}

	.button { display:block;color: #fff; padding: 8px 50px 14px 14px; border: none; margin-right: 25px; position: relative; margin: 25px auto;
		-webkit-user-select: none;
		-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
		-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
		box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
		-moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
		text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
		font-size:32px;
		font-family: 'Droid Sans',sans-serif;
		text-decoration:none;
			 }
	.button:active { position: relative; top: 3px;
	    -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
	    -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
	    box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
	}
	.button:active:after { content: ""; width: 100%; height: 3px; background: #000; position: absolute; bottom: 0px; left: 0; }

	
	.button.huh { background: #22C3EB; }
	.button.turquoise { background: #00b1af; }
	.button.blue { /*background: url("http://dwmyk8l83ppqh.cloudfront.net/cta/sprite.png") no-repeat scroll right #00b0d9; background-position: 230px 18px; */ background-color:#00b0d9; text-align:center;}
	.button a:hover {background-color:#CCC;}


#portfolio .smashinglogo { background: url(../images/content/sensation.png) 50% 100px no-repeat fixed; min-height: 600px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#portfolio {
	padding: 20px 0 0 0;
}
#portfolio article { width:100%; height:100%;max-width:980px;margin: 0 auto; background-color: #FFFFFF; padding: 0 40px;box-shadow: 0 0 25px rgba(0,0,0,0.3);/* fallback */ background: url(../images/noise.png) no-repeat scroll transparent;/* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#fefefe), to(#f8f8f8)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(left, #fefefe, #f8f8f8); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #fefefe, #f8f8f8); /* IE 10 */ background: -ms-linear-gradient(left, #fefefe, #f8f8f8); /* Opera 11.10+ */ background: -o-linear-gradient(left, #fefefe, #f8f8f8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe',endColorstr='#f8f8f8');/* -moz-transform: rotate(-0.5deg);
  -webkit-transform: rotate(-0.5deg);*/ }


#portfolio article h2 {
	border-bottom: 1px solid #DEDEDE;
	clear: left;
	color: #222222;
	padding: 70px 0 9px 0;
	text-shadow: 1px 1px 0 #00b0d9;
	margin-bottom:0px; /*
	-moz-transform: rotate(1deg);
  -webkit-transform: rotate(1deg);*/
}
#portfolio article h3 {
	border-bottom: 1px solid #DEDEDE;
	clear: left;
	color: #222222;
	padding: 0px 0 9px 0;/*
	text-shadow: 1px 1px 0 #00b0d9;*/
	margin-bottom:0px; /*
	-moz-transform: rotate(1deg);
  -webkit-transform: rotate(1deg);*/
}
h4 {
	font-size:1.5em;
	font-weight: normal;
}
#portfolio article p
#portfolio article a { color: #ccc; }
#portfolio article a { text-decoration: underline; }

/* ------ filtrey
-----------------------------------------------*/

.filters {
float:left;
clear:both;
width:1000px;/*
	-moz-transform: rotate(0.5deg);
  -webkit-transform: rotate(0.5deg);*/
}

.filters .filter {
float:left;
clear:both;
width:980px;
padding:0 0 0 0;
margin: 0 0 20px 0;
}

.filter {
float:left;
clear:both;
width:980px;
padding:0 0 0 0;
margin: 0 0 20px 0;
background-color:#f1f1f1;
color:#111;
}

.filters .filter a {
float:left;
display:block;
padding:5px 17px;
font-size:12px;
outline:none;
}

.filter a:hover{
background-color:#dfdfdf;
color:#333;
}

.filter .active {
background:#eee;
color:#111;
}

.filters .container {
float:left;
clear:both;
width:100%;
position:relative;
}

.filters .container ul,
.filters .container ul li {
display:block;
list-style:none;
padding:0;
margin:0;
}

.filters .container ul li {
float:left;
margin:0 33px 15px 0;
font-size:0;
line-height:0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.filters .container a {
display:block;
float:left;
width:300px;
height:169px;
}	

.filters .container a:hover {
-webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
opacity: 0.9;
}


/* Background Only */
#music { padding: 100px 0 50px 0;}
#music article { background: url(../images/grain.png) repeat #333; color: #fff; width: 973px; margin: 0 auto; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; box-shadow: 0 0 25px rgba(0,0,0,0.3); border: 1px solid rgba(150,150,150,0.1);}
#music article p { margin-bottom: 25px; }
#music article a { color: #ff0;}

/* Photograph */
#about article {  /*background: url(../images/grain.png) repeat #333;*/ /* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.9);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
color: #fff; padding: 10px 20px;	
	width:80%;
	max-width: 980px;
	margin: auto auto; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; box-shadow: 0 0 25px rgba(0,0,0,0.3); border: 1px solid rgba(150,150,150,0.1); margin-top:120px; height:450px; }
#about .photograph { background: url(../images/photo.png) transparent 40% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#about article p {
	/* [disabled]width: 300px; */
}
#about article h2 {text-shadow: 1px 1px 0 #666;}

.textbox {float:left; width:730px;}
.portrait {float:right;margin:0 10px 30px 0;border:5px solid black;height: 252px;}
.social {float:left;margin-top:-10px;}
.social ul {margin:0 0 0 0;}
.social-icon {    float: left;
    list-style: none outside none;
    text-align: right;}
.social ul {
float:right;
list-style:none outside none;
text-align:right;
}
.social li {
color:#CCCCCC;
float:left;
display:inline;
font-size:18px;
list-style:none outside none;
}
.social li a {
    -moz-transition: background 0.4s ease 0s;
    border-top: 1px solid transparent;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    text-shadow: 1px 1px 0 #00b0d9;
    width: 70px;
}

#about-twitter{float:right;display:block;width:350px;height:125px;background-image:url(../images/content/about-twitter_bg.png);padding-top: 25px;background-repeat: none;}

/* HTML5 Video */
#fourth article {  margin-left: 10%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 0; }
#fourth article p { width: 300px; margin: 50px 0; }
#fourth video { position: fixed; left: 50%; box-shadow: 0 0 25px rgba(0,0,0,0.7); z-index: 1;}

/* The End 
.byebye { background: url(../images/theend.png) 40% 100px no-repeat fixed; height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }*/
.letter1 { background: url(../images/content/letter1.png) 40% 100px no-repeat fixed; height: 640px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; z-index: 1; }
.letter2 { background: url(../images/content/letter2.png) 40% 100px no-repeat fixed; height: 640px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; z-index: 2; }
.letter3 { background: url(../images/content/letter3.png) 40% 100px no-repeat fixed; height: 640px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; z-index: 3; }
.letter4 { background: url(../images/content/letter4.png) 40% 100px no-repeat fixed; height: 640px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; z-index: 4; }
.letter5 { background: url(../images/content/letter5.png) 40% 100px no-repeat fixed; height: 640px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; z-index: 5; }
.letter6 { background: url(../images/content/letter6.png) 40% 100px no-repeat fixed; height: 640px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; z-index: 6; }
.letter7 { background: url(../images/content/letter7.png) 40% 100px no-repeat fixed; height: 640px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; z-index: 7; }
.letter8 { background: url(../images/content/letter8.png) 40% 100px no-repeat fixed; height: 640px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; z-index: 8; }

.commentForm
{
	width: 750px;
	height: 493px;
	position: relative;
	background-image: url( '../images/content/postcard_small.png' );
	background-repeat: no-repeat;
	margin: 0 auto;
	margin-top:90px;
	z-index:10;
}
.commentForm input[type="text"], .commentForm textarea
{
width: 263px;
left: 64px;
position: absolute;
background-repeat: no-repeat;
border-width:0px;
font-weight:bold;
font-family:Arial, Sans-Serif;
font-size:0.9em;
}
.nameField
{
top: 160px;
height: 22px;
background-image: url( '../images/content/name_bkg.jpg' );
background-repeat:repeat-x;
}
.emailField
{
top: 216px;
height: 22px;
background-image: url( '../images/content/email_bkg.jpg' );
background-repeat:repeat-x;
}
.websiteField
{
top: 267px;
height: 22px;
background-image: url( '../images/content/website_bkg.jpg' );
background-repeat:repeat-x;
}
.commentField
{
top: 319px;
height:122px;
background-image: url( '../images/content/comment_bkg.jpg' );
background-repeat:repeat-x;
}
.sendButton
{
position:absolute;
top:398px;
left:592px;
width:100px;
height:30px;
border:solid 2px #000000;
background-color:#0eb3d1;
color:#fff;
}


#footerwrap {
	/*background: url("../images/bg-headerWrapb.jpg"); */
    float: left;
	width: 100%;
	position:relative;
	/*background-image: url(../images/footer/foot_bg.png);
	border-top: 1px solid #785b01;
	[disabled]margin-top:40px; */
	background-color:#000;
	z-index:15;
	border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#footer {
    color: #444;
	width:80%;
    max-width: 980px;
	padding: 40px 0;
	margin: 0 auto;
	
}
#footer a:link, #footer a:visited {
    color: #444;
}
#footer a:hover, #footer a:active {
    color: #999;
}
#footernav {
	margin: 4px 0 18px -18px;
	width: 400px;
}
#footernav li {
    display: inline;
    list-style: none;
    margin-left: 18px;
}
#footernav li a:link, #footer li a:visited {
    color: #666;
}

.bot-social {
	float: right;
	width: 475px;
	margin-top: -40px;
}
.bot-social a {
    background: url("../images/content/btn-social.png") no-repeat;
    display: block;
    float: left;
    height: 32px;
    overflow: hidden;
    text-indent: -100000px;
    width: 110px;
}
.bot-social a:hover {
    background-position: -110px 0;
}
.bot-social a#btn-vimeo {
    background-position: 0 -32px;
}
.bot-social a:hover#btn-vimeo {
    background-position: -110px -32px;
}
.bot-social a#btn-band {
    background-position: 0 -64px;
	margin-left:10px;
}
.bot-social a:hover#btn-band {
    background-position: -110px -64px;
}
.bot-social a#btn-sound {
    background-position: 0 -96px;
	margin-left:10px;
}
.bot-social a:hover#btn-sound {
    background-position: -110px -96px;
}
.ad {display:block; height:180px; float:left; width:auto;}
/*Vimeo Badge Styles*/
.vimeoBadge { margin: 0; padding: 0; font: normal 11px verdana,sans-serif; }
.vimeoBadge img { border: 0; }
.vimeoBadge a, .vimeoBadge a:link, .vimeoBadge a:visited, .vimeoBadge a:active { color: #3A75C4; text-decoration: none; cursor: pointer; }
.vimeoBadge a:hover { color:#00CCFF; }
.vimeoBadge #vimeo_badge_logo { margin-top:10px; width: 57px; height: 16px; }
.vimeoBadge .credit { font: normal 11px verdana,sans-serif; }
.vimeoBadge .clip { padding:0; float:left; margin:0 10px 10px 0; width:400px; line-height:0; }
.vimeoBadge .caption { font: normal 11px verdana,sans-serif; overflow:hidden; width:100px; height: 30px; }
.vimeoBadge .clear { display: block; clear: both; visibility: hidden; } 

#form-wrapper
{
    width: 700px;
    height: 400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    border: 1px solid #ddd;

    background-color: #fff;
    background-image: -moz-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);

    background-image: -webkit-gradient(linear, left top, right bottom,
                                                           color-stop(5%, #fff), color-stop(5%, #fff),
                                                           color-stop(15%, #844049), color-stop(15%, #fff),
                                                           color-stop(25%, #fff), color-stop(25%, #fff),
                                                           color-stop(35%, #3E4996), color-stop(35%, #fff ),
                                                           color-stop(45%, #fff), color-stop(45%, #fff),
                                                           color-stop(55%, #844049), color-stop(55%, #fff),
                                                           color-stop(65%, #fff), color-stop(65%, #fff),
                                                           color-stop(75%, #3E4996), color-stop(75%, #fff ),
                                                           color-stop(85%, #fff), color-stop(85%, #fff),
                                                           color-stop(95%, #844049), color-stop(95%, #fff));      

    background-image: -webkit-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);   

    background-image: -o-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px); 

    background-image: -ms-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);

    background-image: repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);
}

#form-wrapper:before, #form-wrapper:after
{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

#form-wrapper:after
{
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}
#form-wrapper .button
{
    float: right;
    margin: 10px 0 0 0;
    padding: 7px 15px;
    cursor: pointer;
    color: #fff;
    font: bold 13px Tahoma, Verdana, Arial;
    text-transform: uppercase;
    overflow: visible; /* IE6/7 fix */
    border: 0;  

    background-color: #7089b3;
    background-image: -moz-linear-gradient(#a5b8da, #7089b3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
    background-image: -webkit-linear-gradient(#a5b8da, #7089b3);
    background-image: -o-linear-gradient(#a5b8da, #7089b3);
    background-image: -ms-linear-gradient(#a5b8da, #7089b3);
    background-image: linear-gradient(#a5b8da, #7089b3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#a5b8da', EndColorStr='#7089b3');     

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

    text-shadow: 0 1px 0 rgba(0,0,0,.3);

    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
}

#form-wrapper .button:hover
{
    background-color: #a5b8da;
    background-image: -moz-linear-gradient(#7089b3, #a5b8da);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#7089b3), to(#a5b8da));
    background-image: -webkit-linear-gradient(#7089b3, #a5b8da);
    background-image: -o-linear-gradient(#7089b3, #a5b8da);
    background-image: -ms-linear-gradient(#7089b3, #a5b8da);
    background-image: linear-gradient(#7089b3, #a5b8da);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7089b3', EndColorStr='#a5b8da');
}

#form-wrapper .button:active
{
    background: #64799e;
    position: relative;
    top: 2px;

    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}