@CHARSET "UTF-8";

* {
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
    width: 320px;
    margin: 0;
    padding: 0;
	color: #333;
	
    background: -webkit-gradient(linear, left top, left bottom,
       color-stop(0.30, rgb(30, 45, 75)),
       color-stop(0.80, rgb(26, 70, 130))
    );
    -webkit-touch-callout: none;     /*Turn off default callout following a long touch */
    -webkit-text-size-adjust: none; /* Turn off font resizing */
}

body.landscape {
  width: 480px;
}

a {
	text-decoration: none;
	color: rgb(26, 70, 130);
}

#content {
    /* ensure we always fill the whole screen */
    min-height: 316px;
    float: left;
}

#content>.page-container {
	position: absolute;
	min-height: 100px;
	min-width: 260px;
	float: left;
    margin: 10px 10px 20px 10px;
    font-size: 11pt;
    background-color: rgb(255, 255, 255);
    /*text-indent: 1em;*/
    padding: 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
    -webkit-transform: translate(0px,0px);
}

#content>#first-page {}

#content>#second-page {
	display: none; /* first page load this is hidden*/
}

body.landscape #content {
  min-height: 168px;
}

hgroup {
	-webkit-user-select: none;
}

hgroup>#title-row {
	position: absolute;
	float: left;
	height: 16px;
	width: 100%;
	background-color: #333;
    -webkit-box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.75);
    border-top: 1px solid rgba(220, 220, 220, .5);
    border-bottom: 1px solid rgba(20, 20, 20, .9);
	text-align: center;
	padding: 0;
	font-size: 11px;
	clear: both;
}

hgroup .title-label {
	position: absolute;
	float: left;
	display: inline-block;
	height: 12px;
	overflow: hidden;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), color-stop(0.3, rgba(255, 255, 255, 0.5)), color-stop(0.6, rgba(255, 255, 255, 0.3)), color-stop(0.6, transparent), to(rgba(0, 0, 0, 0.2))); 
	background-color: #999;
	font-size: 11px;
    padding: 1px 8px 2px;
	margin: 0 auto;
	-webkit-transform: translateX(-480px);
}

#title-row>#first-title {
}

#title-row>#second-title {
    display: none; /* first page load this is hidden*/
}

hgroup>#main-head {
	-webkit-user-select: none;
    background: -webkit-gradient(linear, left top, left bottom,
       color-stop(0.20, rgb(26, 70, 130)),
       color-stop(0.80, rgb(30, 45, 75))
    );
    height: 45px;
	width: 100%;
}

body.landscape hgroup>#main-head {
    width: 100%;
}

hgroup #logo {
	position: relative;
	margin: 0;
	top: 7px;
	left: 10px;
	float: left;
}

.menu-button {
	display: inline-block;
	position: relative;
	float: right;
	right: 10px;
    top:8px;
    font-weight: bold;
    font-size: 13pt;
    overflow: none;
    cursor: default;
    color: black;
    -webkit-user-select: none;
    -webkit-border-radius: 6px;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), color-stop(0.3, rgba(255, 255, 255, 0.5)), color-stop(0.6, rgba(255, 255, 255, 0.3)), color-stop(0.6, transparent), to(rgba(0, 0, 0, 0.2)));
    background-color: rgb(25, 160, 5);
    text-align: center;
    border: inset 1px rgba(26, 70, 130, .85);
    
    /* Shorthand notation for:
    -webkit-transition-property: width, color;
    -webkit-transition-duration: 0.25s;
    -webkit-transition-delay: 0.25s; 
    -webkit-transition: width, color, 0.25s 0.25s;*/
    -webkit-transition: color, 0.5s;
    padding: 4px 9px 3px;
}

/* touched state for the buttons */
.menu-button:active {
    /*background-color: rgb(30, 45, 75);*/
}
.menu-button.touch {
    background-color: rgb(30, 45, 75);
}

nav {
	position: relative;
	height: 0px;
}

nav>.navigation {
	display: none;
	position: relative;
	z-index: 1;
	top: -180px;
	-webkit-transform: translate(0px,0px);
    -webkit-transition-duration: 350ms;
	margin: 0;
	padding: 0;
    width: 100%; 
	background-color: #333;
}

nav>.navigation li {
    list-style-type: none;
    height:30px;       /* The total cell height includes the padding-top, padding-bottom, border and height values: 10+14+1+19=44 pixels */
    line-height:10px;  /* Ensure that the height of the cell includes the line at the top of the cell  */
    font-size: 12pt;
    font-weight: bold;
    color: #333;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), color-stop(0.3, rgba(255, 255, 255, 0.5)), color-stop(0.6, rgba(255, 255, 255, 0.3)), color-stop(0.6, transparent), to(rgba(0, 0, 0, 0.2)));
    background-color: rgb(25, 160, 5);
    text-shadow: rgba(255,255,255, .2) 1px -1px 1px;
}

nav>.navigation li a {
	display: block;
	padding: 10px;
	color: #000;
	text-decoration: none;
}

/* Activity Indicator */
#activity-box {
	
	float: left;
	position: absolute;
	/*width: 100%;*/
	height: 100%;
	z-index: 100;
	background-color: #000;
	opacity: .75;
	text-align: center;
}

#activity-image {
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 10;
    -webkit-animation-iteration-count: infinite;
    -webkit-transition-timing-function: linear;
    margin-top: 60px;
}

@-webkit-keyframes activityIndicator {
    from {
        -webkit-transform: rotate(0deg);
    }
    8.32% {
        -webkit-transform: rotate(0deg);
    }
    8.33% {
        -webkit-transform: rotate(30deg);
    }
    16.65% {
        -webkit-transform: rotate(30deg);
    }
    16.66% {
        -webkit-transform: rotate(60deg);
    }
    24.99% {
        -webkit-transform: rotate(60deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    33.32% {
        -webkit-transform: rotate(90deg);
    }
    33.33% {
        -webkit-transform: rotate(120deg);
    }
    41.65% {
        -webkit-transform: rotate(120deg);
    }
    41.66% {
        -webkit-transform: rotate(150deg);
    }
    49.99% {
        -webkit-transform: rotate(150deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    58.32% {
        -webkit-transform: rotate(180deg);
    }
    58.33% {
        -webkit-transform: rotate(210deg);
    }
    66.65% {
        -webkit-transform: rotate(210deg);
    }
    66.66% {
        -webkit-transform: rotate(240deg);
    }
    74.99% {
        -webkit-transform: rotate(240deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    83.32% {
        -webkit-transform: rotate(270deg);
    }
    83.33% {
        -webkit-transform: rotate(300deg);
    }
    91.65% {
        -webkit-transform: rotate(300deg);
    }
    91.66% {
        -webkit-transform: rotate(330deg);
    }
    99.99% {
        -webkit-transform: rotate(330deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

/* Page Content */
h1 {
    margin-top: 0;
	color: #1B3C6D;
	font-size: 1.6em;
	font-weight: normal;
	text-shadow: 2px 2px 5px rgba(0,0,0, 0.5);
}

h2 {
	color: #31b829;
	margin-top: .3em;
	margin-bottom: 0;
	font-size: 1.2em;
}

p {
	line-height: 1.3;
	margin: .5em 0;
}

/* Home page */
#video {
	width: 100%;
	text-align: center;
	margin: 10px 0 20px 0;
}


#video>img {
	border:.5px solid black;
	-webkit-box-shadow: 0px 0px 10px rgba(0,0,0, 0.7);
}

/* Test transition */

#box {
        height: 30px;
        width: 30px;
        background-color: purple;
        -webkit-animation-name: activityIndicator;
        -webkit-animation-duration: 4s;
        -webkit-animation-iteration-count = infinite;
    -webkit-transition-timing-function = linear;
    }

footer {
	float: left;
	font-size: .8em;
	width: 100%;
}

footer #footer-nav {
    margin: 0;
	padding: .5em;
	text-align: center;
}

footer #footer-nav li {
	list-style-type: none;
	display: inline;
	
}

footer #footer-nav li a {
	color: #ccc;
	text-decoration: none;
	font-weight: bold;
	padding: 5px 8px;
}

footer .footer-copyright {
	padding: .3em 0 .75em 1em;
	color: #999;
}