/* import Open-Sans from Google Font API */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);


/* CLEARFIX */
.clearfix {
	clear: both;
}


/* GLOBALS */
body, input {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 13px;
	font-weight: 300;
	line-height: 19px;
}

b {
	font-weight: 600;
}

body {
	background-color: black;
	color: #AAA;
}

img.header {
	margin-bottom: 25px;
}

h1 {
	color: white;
}

h2 {
	color: #555;
}

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

a:hover {
	color: white;
}

a.submit, input.submit {
	outline: 1px solid #ff6c00;
	background-color: black;
	color: #ff6c00;
	cursor: pointer;
	text-transform: uppercase;
}
a.submit:hover, input.submit:hover {
	background-color: white;
	color: black;
	outline: white;
}
a.submit.grey {
	outline-color: #555;
	color: #555;
}

p {
	margin-bottom: 15px;
}

em {
	font-style: italic;
}

/* NAVIGATION */
nav {
	position: fixed;
	z-index: 999;
	bottom: 0px;
	width: 100%;
	background-color: black;
	padding: 0px 0 20px 0;
}

nav ul {
	float: left;
	margin-left: 25px;
}

nav ul li {
	display: inline-table;
	vertical-align: middle;
	padding: 10px 10px 0 0;
}

nav ul li a {
	font-size: 15px;
	text-transform: uppercase;
	color: #555;
	padding: 10px 10px 14px 10px;
}

nav ul li.active a, nav ul li a:hover {
	color: white;
}


/* ABOUT PAGE */

p.links {
	text-transform: uppercase;
	color: #555;
}


p.links a {
	cursor: pointer;
	color: #555;
}

p.links a:hover {
	color: white;
}

ul#slideshow li {
	width: 915px;
}

ul#slideshow li img {
	float: left;
}

ul#slideshow li p {
	border-top: solid 1px #555;
	float: right;
	width: 160px;
	/*margin-left: 15px;*/
	padding-top: 3px;
	font-style: italic;
	font-size: 11px;
	line-height: 14px;
	color: #555;
	/*position: absolute;*/
	/*left: 760px;*/
	/*bottom: 0;*/
	/*margin-bottom: 0;*/
}

#gallery li {
	display: inline-block;
	margin: 0 1em 1em 0;
}

/* MAIN CONTENT */
.wrapper {
	margin: 45px 35px 140px 35px;
	/*max-width: 640px;*/
	/*width: 640px;*/
}

.message {
	/*max-width: 100%;*/
	width: 990px;
	padding-top: 75px;
	padding-bottom: 550px;
	text-align: center;
	margin: 0 auto;
}

.wrapper p {
	width: 640px;
}

p.intro {
	margin-bottom: 30px;
}

.dg.ac {
	z-index: 8888 !important;
}

#userLoader {
	width: 300px;
	height: 200px;
	/*background-color: red;*/
	position: fixed;
	right: 0px;
	z-index: 9999;
	text-align: center;
	display: none;
}

#userLoader img {
	margin-top: 75px;
}

#userPrompt {
	position: fixed;
	width: 100%;
	padding-top: 75px;
	z-index: 7777;
}

#userPrompt p {
	width: 270px;
	margin: 0 auto;
	background-color: black;
	/*outline: 1px solid #ff6c00;*/
	/*box-shadow: 0px 10px 70px #000000;*/
	padding: 20px 20px;
	text-align: center;
}

#sendYourMessageButton {
	float: right;
	font-size: 15px;
	padding: 10px 10px 12px 10px;
	margin: 0 25px 0 0;	
}

#sendYourMessageWrapper {
	z-index: 999;
	display: none;	
	position: fixed;
	width: 100%;
	height: 100%;
}

#sendYourMessageFill {
	position: absolute;
	width: 100%;
	height: 100%;
}

#sendYourMessageForm {
	position: fixed;
	z-index: 1999;
	width: 425px;
	/*margin: 100px auto 0 auto;*/
	top: 100px;
	left: 34%;
	box-shadow: 0px 10px 70px #000000;
	background-color: black;
}

#sendYourMessageForm .border {
	outline: 1px solid #ff6c00;
	padding: 15px 15px 40px 15px;
}

#sendYourMessageForm form {
	width: 90%;
	margin: 0 auto;
}

#sendYourMessageForm input, #sendYourMessageForm textarea {
	display: block;
	width: 100%;
	margin:  0px 0px 15px 0;
	/*padding: 0 4px;*/
	border: 0px;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 300;
	resize:none;
}
::-webkit-input-placeholder { /* WebKit browsers */
	color: black;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: black;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: black;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: black;
}

#sendYourMessageForm a.close {
	float: right;
	margin-bottom: 15px;
	/*padding: 10px;*/
	cursor: pointer;
}

#sendYourMessageForm input.submit {
	width: auto;
	float: right;
}

.word {
	display: inline-block;
}

/* default settings for each spritesheet */
.sprite {
	width: 150px;
	height: 150px;
	background-size: auto 100%;
	display: inline-block;
}

/* animation timings */
.sprite.abcIn {
	-webkit-animation: ABC_IN steps(19) 2500ms 1; /* Safari 4+ */
	-moz-animation:    ABC_IN steps(19) 2500ms 1; /* Fx 5+ */
	-ms-animation:	   ABC_IN steps(19) 2500ms 1; /* IE */
	-o-animation:      ABC_IN steps(19) 2500ms 1; /* Opera 12+ */
	animation:         ABC_IN steps(19) 2500ms 1; /* IE 10+ */
}
.sprite.abcOut {
	-webkit-animation: ABC_OUT steps(19) 1500ms 1; /* Safari 4+ */
	-moz-animation:    ABC_OUT steps(19) 1500ms 1; /* Fx 5+ */
	-ms-animation:	   ABC_OUT steps(19) 1500ms 1; /* IE */
	-o-animation:      ABC_OUT steps(19) 1500ms 1; /* Opera 12+ */
	animation:         ABC_OUT steps(19) 1500ms 1; /* IE 10+ */
}


.sprite-a {
	background-image: url("../images/alphabet/orange/a.png");
	margin-right: -30px !important;
}
.sprite-b {
	background-image: url("../images/alphabet/orange/b.png");
}
.sprite-c {
	background-image: url("../images/alphabet/orange/c.png");
	margin-right: -40px !important;
}
.sprite-d {
	background-image: url("../images/alphabet/orange/d.png");
}
.sprite-e {
	background-image: url("../images/alphabet/orange/e.png");
	margin-left: -10px;
	margin-right: -30px !important;
}
.sprite-f {
	background-image: url("../images/alphabet/orange/f.png");
}
.sprite-g {
	background-image: url("../images/alphabet/orange/g.png");
}
.sprite-h {
	background-image: url("../images/alphabet/orange/h.png");
}
.sprite-i {
	background-image: url("../images/alphabet/orange/i.png");
	margin-left: -20px;
	margin-right: -45px !important;
}
.sprite-j {
	background-image: url("../images/alphabet/orange/j.png");
	margin-left: -10px;
	margin-right: -45px !important;
}
.sprite-k {
	background-image: url("../images/alphabet/orange/k.png");
	margin-left: -10px;
	margin-right: 0px;
}
.sprite-l {
	background-image: url("../images/alphabet/orange/l.png");
	margin-left: -20px;
	margin-right: -30px !important;
}
.sprite-m {
	background-image: url("../images/alphabet/orange/m.png");
	margin-left: -10px;
	margin-right: -10px !important;
}
.sprite-n {
	background-image: url("../images/alphabet/orange/n.png");
	margin-left: -10px;
	margin-right: -20px !important;
}
.sprite-o {
	background-image: url("../images/alphabet/orange/o.png");
	margin-left: -20px;
}
.sprite-p {
	background-image: url("../images/alphabet/orange/p.png");
}
.sprite-q {
	background-image: url("../images/alphabet/orange/q.png");
}
.sprite-r {
	background-image: url("../images/alphabet/orange/r.png");
	margin-left: -10px;
}
.sprite-s {
	background-image: url("../images/alphabet/orange/s.png");
}
.sprite-t {
	background-image: url("../images/alphabet/orange/t.png");
	margin-right: -30px !important;
}
.sprite-u {
	background-image: url("../images/alphabet/orange/u.png");
	margin-right: -30px !important;
}
.sprite-v {
	background-image: url("../images/alphabet/orange/v.png");
	margin-left: -10px;
	margin-right: -10px !important;
}
.sprite-w {
	background-image: url("../images/alphabet/orange/w.png");
	margin-right: -10px !important;
}
.sprite-x {
	background-image: url("../images/alphabet/orange/x.png");
	margin-left: -10px;
	margin-right: -10px !important;
}
.sprite-y {
	background-image: url("../images/alphabet/orange/y.png");
}
.sprite-z {
	background-image: url("../images/alphabet/orange/z.png");
}
.sprite-1 {
	background-image: url("../images/alphabet/orange/1.png");
}
.sprite-2 {
	background-image: url("../images/alphabet/orange/2.png");
}
.sprite-3 {
	background-image: url("../images/alphabet/orange/3.png");
}
.sprite-4 {
	background-image: url("../images/alphabet/orange/4.png");
}
.sprite-5 {
	background-image: url("../images/alphabet/orange/s.png");
}
.sprite-6 {
	background-image: url("../images/alphabet/orange/6.png");
}
.sprite-7 {
	background-image: url("../images/alphabet/orange/7.png");
}
.sprite-8 {
	background-image: url("../images/alphabet/orange/8.png");
	margin-left: -10px;
}
.sprite-9 {
	background-image: url("../images/alphabet/orange/9.png");
}
.sprite-0 {
	background-image: url("../images/alphabet/orange/o.png");
}
.sprite-COMMA {
	background-image: url("../images/alphabet/orange/COMMA.png");
}
.sprite-PERIOD {
	background-image: url("../images/alphabet/orange/PERIOD.png");
}
.sprite-EXCLAMATION {
	background-image: url("../images/alphabet/orange/EXCLAMATION.png");
}
.sprite-QUESTION {
	background-image: url("../images/alphabet/orange/QUESTION.png");
}
.sprite-APOSTROPHE {
	background-image: url("../images/alphabet/orange/APOSTROPHE.png");
	margin-right: -45px !important;
}
.sprite-OPENQUOTE {
	background-image: url("../images/alphabet/orange/OPENQUOTE.png");
}
.sprite-CLOSEQUOTE {
	background-image: url("../images/alphabet/orange/CLOSEQUOTE.png");
}

/* Declare the reveal animation classname */
@-webkit-keyframes ABC_IN {
	from  { background-position: 100% 0px }
	to 	{ background-position: 0px 0px }
}
@-moz-keyframes ABC_IN {
	from  { background-position: 100% 0px }
	to 	{ background-position: 10px 0px }
}
@-ms-keyframes ABC_IN {
	from  { background-position: 100% 0px }
	to 	{ background-position: 0px 0px }
}
@-o-keyframes ABC_IN {
	from  { background-position: 100% 0px }
	to 	{ background-position:  0px }
}
@keyframes ABC_IN {
	from  { background-position: 100% 0px }
	to 	{ background-position: 0px 0px }
}

/* Declare the hide animation classname */
@-webkit-keyframes ABC_OUT {
	from  { background-position: -100% 0px }
	to 	{ background-position: 0px 0px }
}
@-moz-keyframes ABC_OUT {
	from  { background-position: -100% 0px }
	to 	{ background-position: 0px 0px }
}
@-o-keyframes ABC_OUT {
	from  { background-position: -100% 0px }
	to 	{ background-position: 0px 0px }
}
@keyframes ABC_OUT {
	from  { background-position: -100% 0px }
	to 	{ background-position: 0px 0px; }
}