@font-face {
    font-family: 'texgyre';
    src: url('texgyre.eot');
    src: url('texgyre-webfont.eot?#iefix') format('embedded-opentype'),
         url('texgyre-webfont.woff') format('woff'),
         url('texgyre-webfont.ttf') format('truetype'),
         url('texgyre-webfont.svg#texgyrechorusregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@supports(-webkit-background-clip: text){
	#rainbow{
		background: linear-gradient(90deg, purple, blue, green, yellow, red, purple);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

* {
margin: 0;
padding: 0;
font-size: 100%;
}

html {
  /*height: 100%;*/
  /*margin-bottom: 1px;*/
  /*overflow-y: scroll;*/
  }


body {
  background: url(backgroundblue.png) #87b4ff 0 0 repeat-x;
  font: 24px texgyre, "Monotype Corsiva", Gabriola, "Apple Chancery", "URW Chancery L", Cursive, Serif;
  /*font-weight: lighter;*/
  /*font: normal 24px sans-serif;*/
  color: #FFF;
}

#page {
  width: 900px;
  margin: 20px auto;
  /*padding: 5px;*/
  min-height: 600px;
  background-color:#222;
  border: solid #000 1px;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  box-shadow:8px 8px 25px 25px #000;
  -moz-box-shadow:8px 8px 25px 25px #000;
  -webkit-box-shadow:8px 8px 25px 25px #000;
}

#header {
  margin: 0 auto;
  float: left;
}

#footer {
  margin: 0 auto;
  padding: 10px 0;
  clear: both;
  text-align: center;
}

#left-col {
  width: 210px;
  min-height: 600px;
  float: left;
  clear: both;
  margin: 0 0 0 0;
}

#right-col {
  width: 680px;
  float: right;
  margin: 0 0 0 0;
}

#logo {
  margin-right: auto;
  margin-left: 20px;
  margin-top: 40px;
}

#navi {
  float: left;
  margin-right: auto;
  margin-left: 40px;
  margin-top: 20px;
  font-size: 20px;
  line-height: 25px
}

ul#navigation {list-style:none; margin: 0px; padding:0px;}
li#navigation li {margin:0px; padding: 0px;}

#content {
  width: 680px;
  float: left;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 20px;
  position: relative;
}

#extra {
  height: 40px;
  padding-top: 0px;
  width: 840px;
  margin: auto;
  font: normal 8px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", arial, sans-serif;
  color: #444;
  text-align: center;
}

a {color:#FFF; text-decoration:none; }
a:hover {color:#FFF; text-decoration:underline; }

img {border:0;}

.linkimg {color:#FFF; text-decoration:none; outline: none; vertical-align:top}
.linkimg:hover {color:#FFF; text-decoration:none; outline: none; }

.left {float:left; text-align:left; }

.right {float:right; text-align:left; }

.center {float:inherit; text-align:center; }

.text-shadow {text-shadow: #000 3px 3px 5px;}

.text-big {font-size: 200%; font-weight: normal;}
.text-head {font-size: 160%; font-weight: normal;}

.colorblue         { color:#4967B9; }
.colorbluea        { color:#4967B9; }
.colorbluea:hover  { color:#89A7F9; }

.colorgreen        { color:#1DC6B0; }
.colorgreena       { color:#1DC6B0; }
.colorgreena:hover { color:#8DFFF0; }

.colorgold         { color:#F4C100; }
.colorgolda        { color:#F4C100; }
.colorgolda:hover  { color:#FFFF40; }

.colorred         { color:#9B2828 }
.colorreda        { color:#9B2828; }
.colorreda:hover  { color:#BA3434; }

.colorwhite        { color:#EEE; }
.colorwhitea       { color:#EEE; }
.colorwhitea:hover { color:#FFF; }