/*

Author: byJaie Creative Solutions
Version: 2.0
Date: September 2011

*/


@font-face { font-family: Caslon; src: url('../font/caslon.otf'); }
@font-face { font-family: Caslon_bold; src: url('../font/caslon_bold.otf'); }

/* RESET
-----------------------------------------------------------------------------------------------
===============================================================================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* GLOBAL
-----------------------------------------------------------------------------------------------
===============================================================================================*/
body {
	background: #feffff url("") repeat left top;
	font-family: Caslon, sans-serif;
	font-weight: 400;
	font-size: 93.8%; /* 11pt */
	color: #feffff;
}

.base-container {
	width: 100%;
	max-width: 1024px;
	min-width: 1024px;
	margin: 0 auto;
	margin-bottom: 0;
	padding: 0 50px;
	background-color: #3178b6;
	box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.1);
}

audio {
	position: fixed;
	bottom: 0px;
  	right: 0px;
}

/* LINK STYLES
--------------------------------------------------------- */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a {
	color: #feffff;
	padding: 0 1px;
	text-decoration: none;
	-webkit-transition: color 0.1s ease-in;
    -moz-transition: color 0.1s ease-in;
    -o-transition: color 0.1s ease-in;
    transition: color 0.1s ease-in;
    text-decoration: underline;
}
a:visited {
	color: #feffff;
	padding: 0 1px;
	-webkit-transition: color 0.1s ease-in;
    -moz-transition: color 0.1s ease-in;
    -o-transition: color 0.1s ease-in;
    transition: color 0.1s ease-in;
}
a:hover, a:active {
	color: #d1dde3;
	outline: none;
	cursor: pointer;
}

/* PARAGRAPH STYLES
--------------------------------------------------------- */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}

::-moz-selection {background: transparent; color: #d93301;}
::selection {background: transparent; color: #d93301;}

/* OTHER STYLES
--------------------------------------------------------- */
hr, .hide {
	display: none;
}
a img{
	border: none;
}
div {
	position: relative;
}
dl {
	line-height: 1.5;
}
li p {
	margin: 0;
}
li p + p {
	margin-top: 1.5em;
}
li ul, li ol, li dl, dd ol, dd ul, dd dl {
	margin: 0 0 0 1.5em;
}
strong {
	font-weight: 600;
}
em {
	font-style: italic;
}
strong, b, figcaption em, figcaption i, caption em, caption i {
	font-family: Caslon_bold, sans-serif;
}
strong.sub {
	line-height: 2em;
}
em, i, cite {
	font-style: italic;
}
dfn {
	font-weight: bold;
}
small, .small {
	font-size: .875em;
}
sup, sub {
	line-height: 0;
}
abbr[title], dfn[title] {
 border-bottom: 1px dotted #666;
}
address {
	margin: 0 0 1.5em;
	font-style: italic;
}
address + p {
	margin-top: 0;
}
pre {
	 /* http://perishablepress.com/press/2010/06/01/wrapping-content/ */
	margin: 1.5em 0;
	white-space: pre;
	word-wrap: break-word;
	white-space: -moz-pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -pre-wrap;
	white-space: -hp-pre-wrap;
	white-space: pre-wrap;
	white-space: pre-line;
}
pre,code,tt,kbd {
	font: .9375em 'andale mono','lucida console',monospace;
	line-height: 1.6;
}
/* ins/del */
ins {
	border-bottom: 1px dotted #47ad09;
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
del, .faint {
	color: #777;
}
mark {
	background-color:#f8fea8;
	color: #000;
}

/* figure */
figure {
	position: relative;
	margin: 1.5em 0;
	border-top: 1px dotted #0098d8;
	border-bottom: 1px dotted #0098d8;
}
figure dt {
	margin-top: .75em;
} /* to check: ?? do I mean dl? */
figure dd {
	margin-left: 0;
	padding-left: 0;
}
figure img, figure iframe {
	margin: .75em auto;
}
figure blockquote {
	margin: 1.5em 0px .75em -1.5em;
}
figure ul, figure ol {
	margin: .75em 0 .75em 2em;
}
figure .semantic-list {
  margin-left: 0;
}
figure li, figure ol, figure ul {
	margin: 0 0 0 1.5em;
}
figure p, figure pre {
	margin-top: .75em;
	margin-bottom: .75em;
}
figure p+p {
	margin-top: 1.5em;
}
figcaption {
	clear: left;
	margin: .75em 0;
	text-align: center;
	font-style: italic;
	line-height: 1.5em;
}

sup { padding-left: 1px; font-size: 10px !important; font-weight: normal !important; vertical-align: baseline; position: relative; bottom: 0.33em; _position: static !important; }
sup, sup a { color:#666; }
sup a:hover { color:#666; text-decoration:none; cursor: help; padding: 0 !important; background: none !important; }
abbr { border: 0; }

.right {float: right;}
.left {float: left;}

.clear { clear: both; }
.clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; }
.selfclear { zoom:1; }
.selfclear:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }

img { border: 0; }


/* HEADER
-----------------------------------------------------------------------------------------------
===============================================================================================*/

header {
	width: 1024px;
	height: 300px;
}

#title {
	width: 450px;
	height: 300px;
	float: right;
	display: block;
	text-indent: -9999em;
	background: url(../img/header-title.jpg) no-repeat top right;
}

#ball {
	display: block;
	width: 435px;
	height: 300px;
	float: left;
	background: url(../img/ball-bg.jpg) no-repeat center bottom;
}

.ball {
	height: 180px;
	width: 180px;
	background: #dedede;
	margin: 55px 20px 0px 56px;
	background: url(../img/ball.gif) no-repeat center center;
	border-radius: 90px; // Chrome & IE9
	-o-border-radius: 90px;
	-moz-border-radius: 90px; // Firefox
	-webkit-border-radius: 90px; // Safari

	animation-name: glow;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 900ms;

	-0-animation-name: glow;
	-0-animation-timing-function: ease-in;
	-0-animation-iteration-count: infinite;
	-0-animation-direction: alternate;
	-0-animation-duration: 900ms;

	-moz-animation-name: glow;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-duration: 900ms;
	
	-webkit-animation-name: glow;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-duration: 900ms;

}

@-moz-keyframes glow {
    0% { 
    	-o-box-shadow: 0px 0px 25px #d0dadf;
    	-moz-box-shadow: 0px 0px 25px #d0dadf;
    	-webkit-box-shadow: 0 0 25px #d0dadf;
    	box-shadow: 0 0 25px #d0dadf;
    }
    
    100% {
    	-o-box-shadow: 0px 0px 45px #d0dadf;
		-moz-box-shadow: 0px 0px 45px #d0dadf;
		-webkit-box-shadow: 0 0 45px #d0dadf;
		box-shadow: 0 0 45px #d0dadf;
    }
}

@-webkit-keyframes glow {
    0% { 
    	-o-box-shadow: 0px 0px 25px #d0dadf;
    	-moz-box-shadow: 0px 0px 25px #d0dadf;
    	-webkit-box-shadow: 0 0 25px #d0dadf;
    	box-shadow: 0 0 25px #d0dadf;
    }
    
    100% {
    	-o-box-shadow: 0px 0px 45px #d0dadf;
		-moz-box-shadow: 0px 0px 45px #d0dadf;
		-webkit-box-shadow: 0 0 45px #d0dadf;
		box-shadow: 0 0 45px #d0dadf;
    }
}

nav {
	font-family: Caslon, sans-serif;
	font-variant: small-caps;
	font-size: 1.3em;
	color: #feffff;
	display: block;
}

nav a {
	color: #feffff;
	text-decoration: none;
}

#nav li:first-child {
	padding: 0;
}

#nav li {
	float: left;
	padding-left: 15px;
}


/* DYNAMIC CONTENT
-----------------------------------------------------------------------------------------------
===============================================================================================*/

#dynamic {
	height: 350px;
	display: block;
	margin-top: 70px;
	width: 1000px;
}

#dynamic p {
	height: 340px;
	width: 975px;
	overflow: auto;
	line-height: 1.3em;
	font-size: 1.3em;
	overflow-x: hidden;
	padding-right: 20px;
}

.dyn-content {
	display: none;
}

.dyn-active {
	display: inline;
}

.small-p span:first-child {
	width: 730px;
	height: 340px;
	overflow: auto;
	overflow-x: hidden;
	padding-right: 20px;
}

.pad-20_l {
	padding-left: 20px;
}


/* SUB-CONTENT
-----------------------------------------------------------------------------------------------
===============================================================================================*/

#sub-info {
	height: auto;
	padding-bottom: 60px;
	display: block;
	font-size: 1.3em;
	line-height: 1.3em;
}

.indent {
	padding-left: 60px;
	color: #ecbfd7;
}


/* FOOTER
-----------------------------------------------------------------------------------------------
===============================================================================================*/

#footer {
	height: auto;
	display: block;
	font-size: 1.3em;
	line-height: 1.3em;
}