@charset "iso-8859-1";

@font-face {
    font-family: 'galaxiepolaris-light';
    font-weight: 400;
    src: url('GalaxiePolaris/GalaxiePolaris-Light.otf'); 
}

@font-face {
    font-family: 'galaxiepolaris-light';
    font-weight: 400;
    font-style: italic;
    src: url('GalaxiePolaris/GalaxiePolaris-LightItalic.otf'); 
}

@font-face {
    font-family: 'galaxiepolaris';
    font-weight: 400;
    src: url('GalaxiePolaris/GalaxiePolaris-Book.otf'); 
}

@font-face {
    font-family: 'galaxiepolaris';
    font-weight: 400;
    font-style: italic;
    src: url('GalaxiePolaris/GalaxiePolaris-BookItalic.otf'); 
}

@font-face {
    font-family: 'galaxiepolaris';
    font-weight: 500;
    src: url('GalaxiePolaris/GalaxiePolaris-Medium.otf'); 
}

@font-face {
    font-family: 'galaxiepolaris';
    font-weight: 500;
    font-style: italic;
    src: url('GalaxiePolaris/GalaxiePolaris-MediumItalic.otf'); 
}

@font-face {
    font-family: 'galaxiepolaris';
    font-weight: 700;
    src: url('GalaxiePolaris/GalaxiePolaris-Bold.otf'); 
}

@font-face {
    font-family: 'galaxiepolaris';
    font-weight: 700;
    font-style: italic;
    src: url('GalaxiePolaris/GalaxiePolaris-BoldItalic.otf'); 
}

@font-face {
    font-family: 'galaxiepolaris';
    font-weight: 900;
    src: url('GalaxiePolaris/GalaxiePolaris-ExtraBold.otf'); 
}

@font-face {
    font-family: 'galaxiepolaris';
    font-weight: 900;
    font-style: italic;
    src: url('GalaxiePolaris/GalaxiePolaris-ExBoldItalic.otf'); 
}

html, body {
	background: #ffffff;
	
	color: #000000; 
    font-family: 'galaxiepolaris-light';
	font-size: 24pt;	
    font-weight: 400;
	letter-spacing: 1pt;
	line-height: 36pt;	
	text-transform: lowercase; 
    
    cursor: crosshair;
}

strong {
    font-family: 'galaxiepolaris';
    font-weight: 500;
}

em {
    font-style: italic;
    font-weight: 500;
}

a {
    color: #0000FF;
    font-family: 'galaxiepolaris';
    font-size: 24pt;
    font-weight: 500;
	letter-spacing: 1pt;
	line-height: 36pt;	
    
    cursor: pointer;
}

p {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

.click {
    cursor: pointer;
}

#full {
    display: none;
    
    height: 100%;
    width: 100%;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: -100;
}

#border {
	border:6px solid #FF0000;
    
	top: 0;
    left: 0;
	right: 0;
	bottom: 0;
    margin: 0;
    padding: 0;
	position: fixed;
}

#infodot {
    display: table;
    background: #FF0000; 
    border-radius: 50px;
    
    height: 50px;
    width: 50px;
    top: 20px;
    left: 20px;
    position: fixed;
    z-index: 100;
    
    color: #FFFFFF;
	font-size: 10pt;	
    font-weight: 400;
	line-height: 12pt;
    
    -webkit-transition: color 1.5s; 
    -moz-transition: color 1.5s; 
    -o-transition: color 1.5s; 
    transition: color 1.5s;
}

#infodot p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#infodot:hover, .dotcolor {
    color: #FF0000;
}

#infobox {
    background: #FFFFFF;
    border: 3px solid #FF0000;
    
    height: auto;
    width: 40%;
    top: 20px;
    left: 90px;
    margin: 0;
    padding: 15px;
    position: absolute; 
    z-index: 100;
    
    color: #000000;
    font-family: 'galaxiepolaris-light';
	font-size: 9pt;	
    font-weight: 400;
	line-height: 12.5pt;
    text-transform: none;
    text-align: left;
}

#infobox a {
    font-family: 'galaxiepolaris';
    font-size: 9pt;	
    font-weight: 500;
    line-height: 12.5pt;
}
#infobox a:hover {
    color: #FF0000;
}

#refresh {
    display: table;
    background: #000000; 
    
    height: 1em;
    width: 13em;
    top: 20px;
    right: 20px;
    margin: 0;
    padding: 5px;
    position: fixed;
    z-index: 50;
    
    color: #FFFFFF;
	font-size: 10pt;	
    font-weight: 400;
	line-height: 12pt;	
    text-align: center;
    
    -webkit-transition: color 1.5s; 
    -moz-transition: color 1.5s; 
    -o-transition: color 1.5s; 
    transition: color 1.5s;
}
#refresh:hover {
    color: #000000;
}

#text {
    height: 4em;
    width: 500px;
    top: 50%;
    left: 50%;
    margin: -1em 0 0 -250px;
    position: fixed;
    
    color: #000000; 
    font-family: 'galaxiepolaris-light';
	font-size: 24pt;	
    font-weight: 400;
	letter-spacing: 1pt;
	line-height: 36pt;	
	text-transform: lowercase; 
    text-align: center;
}

#staticleft {
    background: url('images/left.png') no-repeat center;
    
    height: 100%;
    width: 50px;
    top: 0;
    left: 150px;    
    position: fixed;
    
    -webkit-transition: -webkit-transform width 1s; 
    -moz-transition: -webkit-transform width 1s; 
    -o-transition: -webkit-transform width 1s;
    transition: transform width 1s;
}

.opaque, #phoenix:hover, #cazzette:hover, #boston:hover, #facebook:hover, #twitter:hover, #pinterest:hover {
    opacity:0.3;
    filter:alpha(opacity=30);
}

.opaque2 {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

#dynamicright {
    background: url('images/right-red.png') no-repeat center;
    
    height: 100%;
    width: 50px;
    top: 0;
    right: 150px;    
    position: fixed;
    
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -webkit-transform 1s; 
    -o-transition: -webkit-transform 1s; 
    transition: transform width 1s;
    
    -webkit-animation: rarrow 1.5s linear 0s infinite alternate;
    -moz-animation: rarrow 1.5s linear 0s infinite alternate;
    -o-animation: rarrow 1.5s linear 0s infinite alternate;
    animation: rarrow 1.5s linear 0s infinite alternate;
}
#dynamicright:hover {
    -webkit-transform: translate(10px,0); 
    -moz-transform: translate(10px,0);
    -o-transform: translate(10px,0);
    -ms-transform: translate(10px,0);
    transform: translate(10px,0);
}

@-webkit-keyframes rarrow {
    from { background-image: url('images/right-red.png');}
    to { background-image: url('images/rightw.png');}
}
@-moz-keyframes rarrow {
    from { background-image: url('images/right-red.png');}
    to { background-image: url('images/rightw.png');}
}
@-o-keyframes rarrow {
    from { background-image: url('images/right-red.png');}
    to { background-image: url('images/rightw.png');}
}
@keyframes rarrow {
    from { background-image: url('images/right-red.png');}
    to { background-image: url('images/rightw.png');}
}

#topbar {    
    display: none;
    background: url('images/gptbar.png') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
    height: 25%;
    width: 100%;
    top: 0;
    position: fixed;
}

#bottombar {
    display: none;
    background: url('images/taiwan.jpg') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
    height: 45%;
    width: 100%;
    bottom: 0;
    position: fixed;
}

#gpbox {
    display: none;
    
    top: 60%;
    right: 10%;
    margin-bottom: 50px;
    position: absolute;
}

#gpbutton {
    height: .5em;
    width: 41.5em;
    margin: 0;
    padding: 0;
    
    font-family: 'galaxiepolaris';
    font-size: 8pt;
    font-weight: 500;
}

.floater {
    float: right;}

button {
    background: #FFFFFF;
    border: 1px solid #FF0000;
    margin: 0;
    padding: 4pt;
    
    outline: none;
}

#gptext {
    height: 8em;
    width: 20em;
    
	font-family: 'galaxiepolaris';
    font-size: 16pt;
    font-weight: 400;
    letter-spacing: .5pt;
	line-height: 20pt;
}

textarea {
    border: 3px solid #FF0000;
    padding: 5pt;
    
    resize: none;
    outline: none;
}
    
.circle {
    display: none;
    background: url('images/circle.png') no-repeat; 
    
    height: 100px;
    width: 100px;
    top: 50%;   
    margin-top: -50px;
    position: absolute;
    z-index: -50;
}

#simple {
    left: 55%;
    z-index: -100;
    
    -webkit-animation: bounce 1s linear 0s infinite alternate;
    -moz-animation: bounce 1s linear 0s infinite alternate;
    -o-animation: bounce 1s linear 0s infinite alternate;
    animation: bounce 1s linear 0s infinite alternate;
}   

@-webkit-keyframes bounce {
    from { margin-top: -50px;}
    to { margin-top: -70px;}
}
@-moz-keyframes bounce {
    from { margin-top: -50px;}
    to { margin-top: -70px;}
}
@-o-keyframes bounce {
    from { margin-top: -50px;}
    to { margin-top: -70px;}
}
@keyframes bounce {
    from { margin-top: -50px;}
    to { margin-top: -70px;}
}

#simple2 {
    left: 55%;
} 

#simple3 {
    left: 45%;
} 

#simple4 {
    left: 35%;
    
    -webkit-animation: bounce 1s linear 0s infinite alternate;
    -moz-animation: bounce 1s linear 0s infinite alternate;   
    -o-animation: bounce 1s linear 0s infinite alternate;   
    animation: bounce 1s linear 0s infinite alternate;
}

#simclick {
    display: none;
    
    height: 100px;
    width: 100px;
    top: 50%;
    left: 55%;    
    margin: -43px 0 0 0;
    position: absolute;
}

#polaris {
    display: none;
    background: url('images/polarissm.png') no-repeat; 
    
    height: 30px;
    width: 30px;
    top: 30%;
    left: 75%;    
    margin: 0;
    padding 0;
    position: fixed;
    
    -webkit-animation: polaris .5s linear 0s infinite alternate;
    -moz-animation: polaris .5s linear 0s infinite alternate;
    -o-animation: polaris .5s linear 0s infinite alternate;
    animation: polaris .5s linear 0s infinite alternate;
}

@-webkit-keyframes polaris {
    from { background-image: url('images/polarissm.png');}
    to { background-image: url('images/polarisbig.png');}
}
@-moz-keyframes polaris {
    from { background-image: url('images/polarissm.png');}
    to { background-image: url('images/polarisbig.png');}
}
@-o-keyframes polaris {
    from { background-image: url('images/polarissm.png');}
    to { background-image: url('images/polarisbig.png');}
}
@keyframes polaris {
    from { background-image: url('images/polarissm.png');}
    to { background-image: url('images/polarisbig.png');}
}

#workhard {
    display: none;
    background: #FFFFFF;
    
    height: 100px;
    width: 100px;
    top: 30%;
    left: 50%;
    margin: 0;
    padding: 0;
    position: fixed;
    
    -webkit-transition: background 3s; 
    -moz-transition: background 3s; 
    -o-transition: background 3s; 
    transition: background 3s;
}

#corner {
    display: none;
    background: url('images/halfcorner.png') no-repeat;
    
    height: 100px;
    width: 100px;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    
    -webkit-transition: background .5s; 
    -moz-transition: background .5s; 
    -o-transition: background .5s; 
    transition: background .5s;
}
#corner:hover {
    background-image: url('images/fullcorner.png');
}


#phoenix {
    display: none;
    background: url('images/phoenix.png') no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 30%;
    width: 50%;
    top: 10%;
    left: 25%;
    margin: 0;
    padding: 0;
    position: fixed;
}

#cazzette {
    display: none;
    background: url('images/cazzette.png') no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 30%;
    width: 50%;
    top: 55%;
    left: 20%;
    margin: 0;
    padding: 0;
    position: fixed;
}

#boston {
    display: none;
    background: url('images/boston.png') no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 30%;
    width: 15%;
    top: 55%;
    left: 60%;
    margin: 0;
    padding: 0;
    position: fixed;
}

#score {
    display: none;
    background: url('images/score.png') repeat-x;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    
    height: 10%;
    width: 100%;
    top: 44%;
    right: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s;
}

#score:hover {
    opacity: 0;
    filter: alpha(opacity=0);
}

#edmtip {
    display: none;
    background: #FFFFFF;
    border: 3px solid #FF0000;
    
    bottom: 55%;
    left: 55%;
    margin: 0;
    padding: 10px;
    position: fixed; 
    z-index: 100;
    
    color: #000000;
	font-size: 12pt;	
    font-weight: 400;
	line-height: 15pt;
}

/* audio player */
#audioplayer {
    display: none;
    background: #FFFFFF;
    border: 3px solid #FF0000;
    
    width: 300px;
    top: 30%;
    left: 10%;
    position: absolute;
}
#audio {
    width: 300px;
}
#playlist {    
    height: 300px;
    width: 297px;
    overflow: auto;
    padding: 3px;
    margin: 0 0 0 -3px;
}
#playlist::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
#playlist::-webkit-scrollbar-thumb {
    background-color: #0000FF;
    border-radius: 4px;
}
.active a {    
    color: #0000FF;
    font-family: 'galaxiepolaris';
	font-size: 10pt;	
    font-weight: 600;
    text-decoration: underline;
}
#playlist li a {  
    display: block;
    background: #FFFFFF;
    
    padding: 5px;
    
    color: #000000;
    font-family: 'galaxiepolaris-light';
	font-size: 10pt;	
    font-weight: 400;
	line-height: 15pt;
    text-decoration: none;
}
#playlist li a:hover {
    color: #FF0000;
    text-decoration: underline;
}
/* audio end */

#equalizer {
    display: none;
    
    height: 20%;
    width: 20%;
    bottom: 0px;
    right: 0px;
    position: fixed;
}

.bar {
    display: inline-block;
    background: #0000FF;
    
    height: 0px;
    width: 20px;
    bottom: 6px;
    right: 6px;
    position: fixed;
    
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}

#eyes {
    display: none;
    background: url('images/blueeyes.png') no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 20%;
    width: 50%;
    top: 25%;
    left: 25%;
    margin: 0;
    padding: 0;
    position: fixed;
    
    -webkit-transition: all 2s; 
    -moz-transition: all 2s; 
    -o-transition: all 2s; 
    transition: all 2s;
}
#eyes:hover {
    background-image: url('images/blackeyes.png');
}

#chinesetip {
    display: none;
    background: #FFFFFF;
    border: 3px solid #FF0000;
    
    bottom: 55%;
    right: 25%;
    margin: 0;
    padding: 10px;
    position: fixed; 
    z-index: 100;
    
    color: #000000;
	font-size: 12pt;	
    font-weight: 400;
	line-height: 15pt;
}

#chinese {
    display: none;
    background: url('images/chineseblack.png') no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 60%;
    width: 10%;
    top: 20%;
    right: 20%;
    margin: 0;
    padding: 0;
    position: fixed;
    
    -webkit-transition: background .5s; 
    -moz-transition: background .5s; 
    -o-transition: background .5s; 
    transition: background .5s;
}

#facebook {
    display: none;
    background: url('images/facebook.png') no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 30%;
    width: 10%;
    top: 20%;
    right: 20%;
    margin: 0;
    padding: 0;
    position: fixed;
}

#twitter {
    display: none;
    background: url('images/twitter.png') no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 30%;
    width: 10%;
    top: 35%;
    left: 20%;
    margin: 0;
    padding: 0;
    position: fixed;
}

#pinterest {
    display: none;
    background: url('images/pinterest.png') no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 30%;
    width: 10%;
    bottom: 10%;
    left: 40%;
    margin: 0;
    padding: 0;
    position: fixed;
}

.connected {
    color: #000000;
        
    -webkit-transition: color 1s; 
    -moz-transition: color 1s; 
    -o-transition: color 1s; 
    transition: color 1s; 
}

#kunz {
    display: none;
    background: url('images/kunz.jpg') no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 80%;
    width: 50%;
    top: -10%;
    left: 10%;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: -50;
}

#weingart {
    display: none;
    background: url('images/weingart.jpg') no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 80%;
    width: 50%;
    bottom: -20%;
    right: -15%;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: -50;
}

#inspire {
    display: none;
    background: #FFFFFF;
    border: 3px solid #FF0000;
    
    width: 200px;
    top: 30%;
    right: 10%;
    margin: 0;
    padding 0;
    position: absolute;
    
    font-family: 'galaxiepolaris';
	font-size: 10pt;	
}
    
#inspire li {
    display: block;
    padding: 0;
    margin-left: -30px;
}

#inspire a {    
    color: #0000FF;
    font-family: 'galaxiepolaris';
	font-size: 10pt;	
    font-weight: 500;
	line-height: 15pt;
    text-decoration: underline;
}

/* Smartphones (portrait and landscape) ----------- */
@media screen and (min-width: 320px) and (max-width: 480px) {
    #infobox {width: 60%; }
    #staticleft {left: 20px; }
    #dynamicright {right: 20px; }
    #gptext { height: 4em; width: 11em; }
    #gpbutton {width: 25em;}
    .floater {float: left; margin-top: -85px;}
    #workhard {top: 15%; left: 10%;}
    #playlist {height: 100px;}
}

/* iPads (portrait and landscape) ----------- */
@media screen and (min-width: 480px) and (max-width: 1024px) {
    #infobox {width: 50% ;}
    #staticleft {left: 50px; }
    #dynamicright {right: 50px; }
    #gptext { height: 6em; width: 15em; }
    #gpbutton {width: 30em;}
    .floater {float: left; margin-top: -85px;}
    #workhard {top: 20%; left: 25%;}
    #playlist {height: 200px;}
}