@charset "UTF-8";
/* CSS Document */


@font-face {
  font-family: 'Lato-Regular';
  src: url('Lato/Lato-Regular.ttf'); /* IE9 Compat Modes */
  }
  
* { font-family: 'Lato-Regular', "Helvetica Neue", Helvetica, Arial, sans-serif; }

body { margin:20px; 
		padding:8px;
		background-color:#F1EEE5; 
		font-size:.92em;
		color:#333; 		
		width: 85%; 
		max-width:1024px; 
		height:auto; 
		background-image: url('../images/cordise_bg.jpg');
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-position: bottom left; 
		}


h1 {	background-image: url('../images/e2.gif');
       background-repeat: no-repeat;
       background-position: bottom left; 
       height:40px;
	    min-height:40px; 
		margin: 1% 18% 0 40%; 
	   
	   }
h1 span { visibility:hidden; }		
img {border:1px dashed #0EBB22; }	

#content { width:68%;
			text-align:left;
			margin: 4% 18% 0 25%; 
			padding:8px;
			border:1px dotted #C42023; 
			background-color: #ccedfc;
    		background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
			}

/*Reusables*/
.clear-both {clear:both; }
.display-none { display:none; }
.links { text-align:center; font-weight:700;  }
.margin-top10 {margin-top:10px; }
.text-align-center {text-align:center; }	
.visually-hidden {visibility:hidden;} 

/*Big arrow */
.big-arrow {display:block; height:200px; font-size:2.776em; vertical-align:central; margin: 30px 0 0 23%; color:#06247D}

/*Quizzes*/
label { font-weight:bold; clear:both; display: block; }
input {margin-right:3px; }
#quizMe table tr td {padding:8px 0; }


/*Simon Layout */
.row { clear:both; width:240px; }
.row .quadrant { display:inline; }

/*Swan Layout */
.swans-page {background-image:none !important;
		background-color:#000;
		}

.bird-containment {position: absolute;
					bottom:0;
					left:0;
					z-index:0; 
					color:red;
					text-align:Center;
					}
.bird-containment img {border:none !important; }

.swans-page .links {position:absolute;
					  top:32px;
					  right:42px; 
					  }

.swans-page p#start{ position: relative;
	width: 16em;
	font-size: 200%;
	font-weight: 400;
	margin: 20% auto 20% 40%;
	color: #4ee;
	opacity: 0;
	z-index: 1;
	-webkit-animation: intro 2s ease-out;
	-moz-animation: intro 2s ease-out;
	-ms-animation: intro 2s ease-out;
	-o-animation: intro 2s ease-out;
	animation: intro 2s ease-out;
}

@-webkit-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-moz-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}



@-ms-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }

}

@-o-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes intro { 0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

.swans-page h1 { background: none !important;
	position: absolute;
	width: 4em;
	left: 44%;
	top: 25%;
	font-size: 10em;
	text-align: center;
	margin-left: -1.3em;
	line-height: 0.8em;
	letter-spacing: -0.05em;
	color: #000;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index: 1;
	-webkit-animation: logo 5s ease-out 2.5s;
	-moz-animation: logo 5s ease-out 2.5s;
	-ms-animation: logo 5s ease-out 2.5s;
	-o-animation: logo 5s ease-out 2.5s;
	animation: logo 5s ease-out 2.5s; }

h1 sub {
	display: block;
	font-size: 0.3em;
	letter-spacing: 0;
	line-height: 0.8em;
}



@-webkit-keyframes logo {

	0% { -webkit-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -webkit-transform: scale(0.1); opacity: 0; }
}


@-moz-keyframes logo {
	0% { -moz-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -moz-transform: scale(0.1); opacity: 0; }

}

@-ms-keyframes logo {
	0% { -ms-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -ms-transform: scale(0.1); opacity: 0; }
}



@-o-keyframes logo {
	0% { -o-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -o-transform: scale(0.1); opacity: 0; }
}



@keyframes logo {

	0% { transform: scale(1); opacity: 1; }

	50% { opacity: 1; }

	100% { transform: scale(0.1); opacity: 0; }

}


/* the interesting 3D scrolling stuff */
.swans-page #titles { position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	text-align: justify;
	overflow: hidden;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: perspective(300px) rotateX(25deg);
	-moz-transform: perspective(300px) rotateX(25deg);
	-ms-transform: perspective(300px) rotateX(25deg);
	-o-transform: perspective(300px) rotateX(25deg);
	transform: perspective(300px) rotateX(25deg);
}

#titles:after {
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
}



#titles p
{  text-align: justify;
	margin: 0.8em 0;
	color:#ff6; 
}

#titles p.center
{
	text-align: center;
}

#titles a
{
	color: #ff6;
	text-decoration: underline;
}

#titlecontent
{
	position: absolute;
	top: 100%;
	-webkit-animation: scroll 160s linear 4s infinite;
	-moz-animation: scroll 160s linear 4s infinite;
	-ms-animation: scroll 160s linear 4s infinite;
	-o-animation: scroll 160s linear 4s infinite;
	animation: scroll 160s linear 4s infinite;
}


/* animation */

@-webkit-keyframes scroll {

	0% { top: 100%; }

	100% { top: -170%; }

}



@-moz-keyframes scroll {

	0% { top: 100%; }

	100% { top: -170%; }

}



@-ms-keyframes scroll {

	0% { top: 100%; }

	100% { top: -170%; }

}



@-o-keyframes scroll {

	0% { top: 100%; }

	100% { top: -170%; }

}



@keyframes scroll {

	0% { top: 100%; }

	100% { top: -170%; }

}




.swans { width:150px; 
		display:inline-block;
		border: 1px solid red; } 	

/*Cordise Profile layout*/
ul.profile { list-style: none; }
ul.profile li { margin:3px 0;}
ul.profile li .label {color:#2C5B0B; font-weight:bold; }



/*Button decorations*/
.button {
	font-size:16px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #d02718;
	padding:9px 18px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );
	background:-ms-linear-gradient( top, #f24537 5%, #c62d1f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f24537), color-stop(100%, #c62d1f) );
	background-color:#f24537;
	color:#ffffff;
	display:inline-block;
	text-shadow:1px 1px 0px #810e05;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #f5978e;
 	-moz-box-shadow:inset 1px 1px 0px 0px #f5978e;
 	box-shadow:inset 1px 1px 0px 0px #f5978e;
}

.button:hover {
	background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537 100% );
	background:-ms-linear-gradient( top, #c62d1f 5%, #f24537 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #c62d1f), color-stop(100%, #f24537) );
	background-color:#c62d1f;
}

.button:active {
	position:relative;
	top:1px;
}
/* This css button was generated by css-button-generator.com */

/*Snow Keyframes */
			
	@-webkit-keyframes snow {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px; background-color: #b4cfe0 }
    50% { background-color: #b4cfe0 }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #b4cfe0;
    }
}
@-moz-keyframes snow {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px; background-color: #b4cfe0 }
    50% { background-color: #b4cfe0; }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #b4cfe0;
    }
}
@-ms-keyframes snow {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px; background-color: #b4cfe0 }
    50% { background-color: #b4cfe0 }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #b4cfe0;
    }
}
@keyframes snow {
    0% { background-position: 0px 0px, 0px 0px, 0px 0px; background-color: #b4cfe0 }
    50% { background-color: #b4cfe0 }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #b4cfe0;
    }
}