@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	clear: none;
	float: none;
}
#div1 {
}
.zeroMargin_mobile {
    margin-left: 0;
}
.hide_mobile {
    display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.zeroMargin_tablet {
    margin-left: 0;
}
.hide_tablet {
    display: none;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
	width: 88.5%;
	max-width: 1232px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}
}

body {
    background: #ACBFBB;
}

h1,h2,h3,h4 { 
	margin: 0 0 3px 0; 
}

h1 { 
	color: #efecca; font: bold 52px Helvetica, Arial, Sans-Serif;
	text-shadow: 1px 1px #ff0030, 2px 2px #ff0030, 3px 3px #ff0030;
	-webkit-transition: all 0.12s ease-out;
	-moz-transition: all 0.12s ease-out;
	-o-transition: all 0.12s ease-out;
}

h1:hover {
	position: relative; top: -3px; left: -3px; 
	text-shadow: 1px 1px #ff0030, 2px 2px #ff0030, 3px 3px #ff0030, 4px 4px #ff0030, 5px 5px #ff0030, 6px 6px #ff0030;
}

h2 { color: #efecca; font: bold 34px Helvetica, Arial, Sans-Serif;
    text-shadow: 1px 1px #0262FE, 2px 2px #0262FE, 3px 3px #0262FE;
	-webkit-transition: all 0.12s ease-out;
	-moz-transition: all 0.12s ease-out;
	-o-transition: all 0.12s ease-out;
}

h2:hover {
	text-shadow: 1px 1px #0262FE, 2px 2px #0262FE, 3px 3px #0262FE, 4px 4px #0262FE, 5px 5px #0262FE, 6px 6px #0262FE;
}

h3 { color: #efecca; font: bold 42px Helvetica, Arial, Sans-Serif;
	text-shadow: 1px 1px #ff0030, 2px 2px #ff0030, 3px 3px #ff0030;
	-webkit-transition: all 0.12s ease-out;
	-moz-transition: all 0.12s ease-out;
	-o-transition: all 0.12s ease-out;
}
	
h3:hover {
	position: relative; top: -3px; left: -3px; 
	text-shadow: 1px 1px #ff0030, 2px 2px #ff0030, 3px 3px #ff0030, 4px 4px #ff0030, 5px 5px #ff0030, 6px 6px #ff0030;
}

h4 { 
	color: #efecca; font: bold 24px Helvetica, Arial, Sans-Serif;
	text-shadow: 1px 1px #0262FE, 2px 2px #0262FE, 3px 3px #0262FE;
	-webkit-transition: all 0.12s ease-out;
	-moz-transition: all 0.12s ease-out;
	-o-transition: all 0.12s ease-out;
}

h4:hover {
	text-shadow: 1px 1px #0262FE, 2px 2px #0262FE, 3px 3px #0262FE, 4px 4px #0262FE, 5px 5px #0262FE, 6px 6px #0262FE;
}

/* etc */
.text-article h1 {
 	color: #efecca;
 	font: bold 52px;
 	font-weight: 300;
	text-shadow: none;
	text-align: left;
}

.text-article h2 { 
	color: #efecca;
	font: bold 34px;
	font-weight: 300;
	text-shadow: none;
	text-align: left;
}

/* Highlights */
.highlight-yellow {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #ffff5c;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
}

.highlight {
    background-color: #252525;
    color: #FFFFFF;
    padding-bottom: 1px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 1px;
}

/* Stitched Effect */
.stitched {
	padding: 5px 10px 0px 10px;
	margin: 10px;
	background: #ff0030;
	border: 2px dashed #fff;
	border-radius: 3px;
	box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
	text-shadow: -1px -1px #aa3030;
}

#animate {
	position: relative;
	animation-name: mymove;
	animation-fill-mode: forwards;
	animation-duration: 3s;
/* Firefox */
	-moz-animation-name: mymove;
	-moz-animation-fill-mode: forwards;
	-moz-animation-duration: 3s;
	-moz-animation-iteration-count: 1;
/* Safari and Chrome */
	-webkit-animation-name: mymove;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
}

@keyframes mymove
{
from {top:-385px;}
to {top:30px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:-385px;}
to {top:30px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:-385px;}
to {top:30px;}
}

#page-wrap { 
	height: 700px; width: 365px; margin: 2% auto 2% auto; padding: 20px; text-align: center; 
}

#about { 
	margin: 5% 0 0 0; 
}

#about div { 
	text-transform: uppercase; color: #efecca; font: 15px Helvetica, Arial, Sans-Serif;
	-webkit-transition: all 0.42s ease-in-out;
	-moz-transition: all 0.42s ease-in-out;
	-o-transition: all 0.42s ease-in-out;
}

#about div:nth-child(1) { 
	font-size: 55px; letter-spacing: 1px;
}

#about div:nth-child(2) { 
	font-size: 30px; letter-spacing: 0.7px; line-height:150%;
}

#about div:nth-child(3) { 
	font-size: 21px; letter-spacing: 0.5px; line-height:150%;
}

#about div:nth-child(4) { 
	font-size: 15.5px;  letter-spacing: 0.2px; line-height:150%;
}

#about div:nth-child(5) { 
	font-size: 14px;  letter-spacing: 0.2px; line-height:200%;
}

#about div:hover { 
	transform: scale(1.1); text-shadow: 2px 2px 2px #333; 
}

#about a { 
	color: #022f2f; text-decoration: none; border-bottom: 1px dotted #222; border-color: #000;
}

#page-wrap-img { 
	height: 700px; width: 900px; margin: 2% auto 2% auto; padding: 20px; text-align: center; 
}

#img div { 
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
}

/*Rectangled Ordered List Style*/
ol{
	counter-reset: li; /* Initiate a counter */
	list-style: none; /* Remove default numbering */
	*list-style: decimal; /* Keep using default numbering for IE6/7 */
	font: 15px 'trebuchet MS', 'lucida sans';
	padding: 0;
	margin-bottom: 1em;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ol{
	margin: 0 0 0 2em; /* Add some left margin for inner lists */
}

.rectangle-list a{
	position: relative;
	display: block;
	padding: .4em .4em .4em .8em;
	*padding: .4em;
	margin: .5em 0 .5em 2.5em;
	background: #ddd;
	color: #444;
	text-decoration: none;
	transition: all .3s ease-out;	
}

.rectangle-list a:hover{
	background: #eee;
}	

.rectangle-list a:before{
	content: counter(li);
	counter-increment: li;
	position: absolute;	
	left: -2.5em;
	top: 50%;
	margin-top: -1em;
	background: #fa8072;
	height: 2em;
	width: 2em;
	line-height: 2em;
	text-align: center;
	font-weight: bold;
}

.rectangle-list a:after{
	position: absolute;	
	content: '';
	border: .5em solid transparent;
	left: -1em;
	top: 50%;
	margin-top: -.5em;
	transition: all .3s ease-out;				
}

.rectangle-list a:hover:after{
	left: -.5em;
	border-left-color: #fa8072;				
}
/*End Rectangled Ordered List Styles*/