/* 

ZYKED STYLESHEET v2

*/

/*---------- STANDARD CLASSES ---------- */

body {
	background-color: #006DA7;
	background-image: url('/images/background_bluefade.jpg');
	background-repeat: repeat;
}

body.admin {
	background-color: #444444;
	background-image: url('/images/background_grayfade.jpg');
	background-repeat: repeat;
}

/*------*/

body, p, ul, li, div, td, th {
	font-family: Myriad Web,Myriad Pro,Myriad,Trebuchet MS,Trebuchet,sans-serif;
	font-size: 10pt;
	line-height: 13pt;
	color: #7ADCFF;
	text-align: left;
	margin: 0pt
}

p, td, th {
	margin-top: 4pt;
	margin-bottom: 4pt
}

ol, ul, li {
	margin-top: 0pt;
	margin-bottom: 2pt;
}


h1, h2, h3, h4 {
	font-family: Myriad Web,Myriad Pro,Myriad,Trebuchet MS,Trebuchet,sans-serif;
	color: #FFFFFF;
	font-weight: normal;
}

h1 {
	font-size: 24pt;
	line-height: 24pt;
	margin-top: 12pt;
	margin-bottom: 8pt
}

h2 {
	font-size: 16pt;
	line-height: 16pt;
	margin-top: 4pt;
	margin-bottom: 4pt
}

h3 {
	font-size: 13pt;
	line-height: 13pt;
	margin-top: 4pt;
	margin-bottom: 4pt
}

h4 {
	font-size: 10pt;
	line-height: 10pt;
	margin-top: 4pt;
	margin-bottom: 4pt
}

.largetext {
	font-size: 16pt;
	line-height: 28pt;
}

.smalltext {
	font-size: 8pt;
	line-height: 9pt;
}

.highlighted {
	color: #FFF;
}

/*------*/

a {
	color: #FFBB00;
	text-decoration: underline;
}

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

a:visited {
	color: #FFBB00;
	text-decoration: underline;
}

/* Subtle: less colourful links */
a.subtle {
	color: #B2E5FF;
	text-decoration: none;
}

a.subtle:hover {
	color: #B2E5FF; /*#FFD900;*/
	text-decoration: underline;
}

/* Invisible: looks like regular text */
a.invisible {
	color: #7ADCFF;
	text-decoration: none;
}

a.invisible:hover {
	color: #7ADCFF;
	text-decoration: none;
}

/*------*/

img {
	border: 0px;
}

img.portrait {
	float: right;
	margin-right: 5px;
	margin-bottom: 5px;
	height: 80px;
	width: 80px;
	border: 2px solid #7ADCFF;
}

img.bullet {
	float: left;
	margin-right: 5px;
	margin-bottom: 2px;
	vertical-align: middle;
	border: 2px solid;
}

/*------*/

.centered {
	text-align: center;
}

.hidden {
	visibility: hidden;
}

/*---------- FORMS ---------- */

input, textarea, select {
	background-color: #FFFFFF;
	color: #555555;
	border: 3px solid #4BC7FF;
	font-family: Myriad Web,Myriad Pro,Myriad,Trebuchet MS,Trebuchet,sans-serif;
	font-size: 10pt;
	padding: 2px;
}

.smallselect {
	background-color: #3388B6;
	color: #7ADCFF;
	border: 2px solid #4BC7FF;
	font-family: Myriad Web,Myriad Pro,Myriad,Trebuchet MS,Trebuchet,sans-serif;
	font-size: 9pt;
	padding: 2px;
}

input[type="button"], input[type="submit"] {
	background-color: #FFBB00;
	border: 3px solid #FFEB7A;
	color: #000000;
	font-family: Myriad Web,Myriad Pro,Myriad,Trebuchet MS,Trebuchet,sans-serif;
	font-size: 16pt;
	padding: 4px;
}

input[type="button"].smallbutton, input[type="submit"].smallbutton {
	border-size: 2px;
	font-size: 10pt;
	padding: 3px;
}

input[disabled], input[readonly], select[disabled], select[readonly], checkbox[disabled], checkbox[readonly], textarea[disabled], textarea[readonly] {
	background-color: #dcdcdc;
	color: #333333;
} 

.largetext input, .largetext select, .largetext input[type="submit"], .largeinput {
	font-size: 16pt;
	padding: 4px;
}

h2 input, textarea { /* i.e. a textarea within a h2 tag */
	/*font-size: 20pt;*/
}

.fieldWithErrors {
  color: #FF5500;
}

.fieldWithErrors input {
  border: 3px solid #FF5500;
}

/*---------- TABLES ----------*/

table {
	width: 100%;
}

td, th	{
	vertical-align: top;
}

table.tablegrid td, th	{
	border-bottom: 1px solid #70A4C7;
	vertical-align: top;
}

th	{
	color: #FFFFFF;
	font-weight: normal;
}

table a	{
	color: #B2E5FF;
}

table a:hover {
	color: #FFD900;
	text-decoration: underline;
}

.tableselected	{
	background-color: #4FA0C8;
}

.indenttable	{
	width: 400px;
	margin-left: 50px;
}

.indenttable td, th	{
	border-top: 1px solid #70A4C7;
}

.autosize {
	width: auto;
}
	
.achievementcell {
	font-size: 9pt;
	line-height: 9pt;
	text-align: center;
	vertical-align: top;
	padding: 5px;
	width: 65px;
}

/*---------- MESSAGES ---------- */

#message_notice, 
#message_error {
	position: absolute;
	z-index: 100;
	width: 500px;
	height: 50px;
	left: 50%;
	top: 0px;
	margin-left: -250px;
	text-align: center;
	line-height: 50px; /* Same as box height for vertical alignment */
	/* background-color: #ffbb00; */
	color: #000000;
	background-image: url('/images/frame_message_notice.gif');
	background-repeat: no-repeat;
}

#message_error	{
	/* background-color: #ff5500; */
	background-image: url('/images/frame_message_error.gif');
	color: #FFFFFF;
}

/*---------- FRAMES  ---------- */

/* Transparent "full screen" frame centered on screen */
.centerframe {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: 800px;
	height: 600px;
	margin-left: -400px;
	margin-top: -300px;
	/*background-color: #EEEEEE;*/
}

.filledframe, .filledframe_100x100, .filledframe_100x50, .filledframe_100x25, .filledframe_100x10, .filledframe_50x100, .filledframe_50x75, .filledframe_50x50, .filledframe_50x35, .filledframe_50x25, .filledframe_25x50, .filledframe_50x50_empty {
	position: absolute;
	z-index: 10;
	padding: 20px;
	background-repeat: no-repeat;
	left: 25px; 
	top: 120px;
}

.filledframe_100x25, .filledframe_100x10, .filledframe_50x35, .filledframe_50x25 {
	padding-top: 10px;
}

.filledframe {
	background-image: url('/images/background_frame_bluefade.jpg');
}

.filledframe_100x100 {
	background-image: url('/images/frame_bluebubble_750x450.gif');
	width: 710px; /* -2 * padding */
	height: 410px;
}

.filledframe_100x50 {
	background-image: url('/images/frame_bluebubble_750x220.gif');
	width: 710px; /* -2 * padding */
	height: 180px;
}

.filledframe_100x25 {
	background-image: url('/images/frame_bluebubble_750x100.gif');
	width: 710px; /* -2 * padding */
	height: 60px;
}

.filledframe_100x10 {
	background-image: url('/images/frame_bluebubble_750x45.gif');
	width: 710px; /* -2 * padding */
	height: 12px;
}

.filledframe_50x100 {
	background-image: url('/images/frame_bluebubble_360x450.gif');
	width: 320px; /* -2 * padding */
	height: 410px;
}

.filledframe_50x75 {
	background-image: url('/images/frame_bluebubble_360x300.gif');
	width: 320px; /* -2 * padding */
	height: 260px;
}

.filledframe_50x50 {
	background-image: url('/images/frame_bluebubble_360x220.gif');
	width: 320px; /* -2 * padding */
	height: 180px;
}

.filledframe_50x50_empty {
	padding: 0px;
	width: 360px;
	height: 220px;
}

.filledframe_50x35 {
	background-image: url('/images/frame_bluebubble_360x140.gif');
	width: 320px; /* -2 * padding */
	height: 110px;
}

.filledframe_50x25 {
	background-image: url('/images/frame_bluebubble_360x100.gif');
	width: 320px; /* -2 * padding */
	height: 70px;
}

.filledframe_25x50 {
	background-image: url('/images/frame_bluebubble_165x220.gif');
	width: 125px; /* -2 * padding */
	height: 180px;
}


/* Transparent frame for view filters */
.frameoptions {
	position: absolute;
	left: 100px; 
	top: 10px;
	z-index: 12;
	text-align: right;
	width: 250px;
	font-size: 9pt;
	line-height: 11pt;
	/* background-color: #EEEEEE; */
}

/*---------- DIALOG WINDOWS ---------- */

.dialogwindow, .dialogwindowtall, .dialogwindowwide, .dialogwindowoptions {
	position: absolute;
	z-index: 50;
	width: 370px;
	height: 210px;
	left: 200px; 
	top: 180px;
	padding: 15px;
	padding-top: 45px;
	background-image: url('/images/frame_dialogwindow_400x270.gif');
	background-repeat: no-repeat;
	/*color: #555555;*/
}

.dialogwindow p div, .dialogwindowtall p div, .dialogwindowoptions p div {
	color: #555555;
}

.dialogwindowtall {
	height: 310px;
	background-image: url('/images/frame_dialogwindow_400x370.gif');
}

.dialogwindowwide {
	left: 25px;
	top: 250px; 
	width: 720px;
	height: 160px;
	background-image: url('/images/frame_dialogwindow_750x220.gif');
}

.dialogwindowtitle {
	position: absolute;
	width: 370px;
	height: 35px;
	left: 0px; 
	top: 0px;
	z-index: 51;
	padding: 10px;
	padding-left: 15px;
	font-size: 16pt;
	line-height: 20pt;
	color: #000000;
}

.dialogwindowoptions {
	z-index: 51;
	padding-top: 0px;
	height: 70px;
	margin-top: 130px;
	background-position: bottom left;
}

/*---------- BUBBLES ----------*/

.bubblehelpleft, .bubblehelpright {
	position: absolute;
	z-index: 70;
	width: 140px;
	height: 48px;
	left: 50%; 
	top: 10%;
	margin-top: -31px;
	padding: 10px;
	background-repeat: no-repeat;
	color: #555555;
	font-size: 9pt;
	line-height: 10pt;
	vertical-align: middle;
}

.bubblehelpleft {
	background-image: url('/images/frame_helpbubble_left.png');
	padding-right: 45px;
	margin-left: -190px;
}

.bubblehelpright {
	background-image: url('/images/frame_helpbubble_right.png');
	padding-left: 40px;
	padding-right: 15px;
	margin-left: -2px;
}

.bubbletutorial, .errorExplanation, #administratortools {
	position: absolute;
	z-index: 60;
	left: 770px;
	top: 130px;
	width: 123px;
	height: 258px;
	padding: 10px;
	padding-left: 32px;
	color: #555555;
	font-size: 9pt;
	line-height: 10pt;
	background-image: url('/images/frame_tutorialbubble.png');
	background-repeat: no-repeat;
}

#administratortools {
	background-image: url('/images/frame_administrator_tools.png');
	padding-top: 30px;
	height: 238px;
}

#administratortools a {
	color: #555555;
}

.tutorialportrait {
	text-align: center;
	border: 3px solid #00BBFF;
}

.tutorialtitle, .errorExplanation h2 {
	color: #000;
	font-size: 9pt;
	line-height: 10pt;
	text-align: center;
}

.tutorialtext, .errorExplanation p, .errorExplanation li {
	color: #555555;
	font-size: 9pt;
	line-height: 10pt;
}

.errorExplanation ul li {
	margin-left: -25px;
}

.adframe {
	position: absolute;
	z-index: 5;
	padding: 0px;
	left: 50%; 
	top: 10%;
	margin-left: 420px;
	margin-top: -40px;
	width: 120px;
	height: 600px;
}

/*---------- NAVIGATION MENU ---------- */

#logotype {
	position: absolute; 
	z-index: 3;
	left: 10px; 
	top: 0px;
}

#textmenu {
	position: absolute;
	height: 50px;
	width: 800px;
	z-index: 2;
	left: 0px; 
	top: 586px;
	text-align: center;
	font-size: 10pt;
	line-height: 10pt;
}

#userinfo {
	position: absolute;
	z-index: 5;
	left: 425px; 
	top: 30px;
	width: 350px;
	text-align: right;
	font-size: 9pt;
}

/* Navigation Menu */

#navigationmenu {
	position: absolute;
	height: 50px;
	width: 796px;
	z-index: 2;
	left: 2px; 
	top: 70px;
	/* background-color: #EEEEEE; */
}

#navmenubase {
	position: absolute;
	z-index: 3;
	width: 796px;
	left: 0px; 
	top: 35px;
}

#navmenu_start a,
#navmenu_myprofile a,
#navmenu_tracks a,
#navmenu_teams a, #navmenu_highscores a,
#navmenu_community a
{
	position: absolute;
	left: 16px; /* 16-170-324-478-632px (each +154px) */
	top: 0px;
	width: 154px;
	height: 35px;
	background-repeat: no-repeat;
	border: 0px;
}

/* Start */
#navmenu_start a {
	background-image: url('/images/english/menu_start_off.gif');
}
#navmenu_start a:hover, #navmenu_start a:active, #navmenu_start.selected a { 
	background-image: url('/images/english/menu_start_on.gif');
}

/* My Profile */
#navmenu_myprofile a {
	left: 170px;
	background-image: url('/images/english/menu_myprofile_off.gif');
}
#navmenu_myprofile a:hover, #navmenu_myprofile a:active, #navmenu_myprofile.selected a { 
	left: 170px;
	background-image: url('/images/english/menu_myprofile_on.gif');
}

/* Team */
#navmenu_teams a {
	left: 324px;
	background-image: url('/images/english/menu_teams_off.gif');
}
#navmenu_teams a:hover, #navmenu_teams a:active, #navmenu_teams.selected a { 
	left: 324px;
	background-image: url('/images/english/menu_teams_on.gif');
}

/* Highscores */
#navmenu_highscores a {
	left: 478px;
	background-image: url('/images/english/menu_highscores_off.gif');
}
#navmenu_highscores a:hover, #navmenu_highscores a:active, #navmenu_highscores.selected a { 
	left: 478px;
	background-image: url('/images/english/menu_highscores_on.gif');
}

/* Community */
#navmenu_community a {
	left: 478px;
	background-image: url('/images/english/menu_community_off.gif');
}
#navmenu_community a:hover, #navmenu_community a:active, #navmenu_community.selected a { 
	left: 478px;
	background-image: url('/images/english/menu_community_on.gif');
}

/* Tracks */
#navmenu_tracks a {
	left: 632px;
	background-image: url('/images/english/menu_tracks_off.gif');
}
#navmenu_tracks a:hover, #navmenu_tracks a:active, #navmenu_tracks.selected a { 
	left: 632px;
	background-image: url('/images/english/menu_tracks_on.gif');
}

/*---------- BUTTONS AND ICONS ---------- */

/* Transparent frame for Prev/Next buttons */
.pagination,
.framenavigation {
	position: absolute;
	left: 220px;
	top: 400px;
	width: 340px;
	z-index: 11;
	text-align: center;
}

/* Button Prev/Next - Small */
.button_previous_small a,
.button_next_small a,
.pagination .prev_page,
.pagination .next_page
{
	position: absolute;
	width: 116px;
	height: 30px;
	top: 0px;
	left: 0px;
	background-repeat: no-repeat;
}

.pagination .disabled prev_page,
.pagination .prev_page,
.button_previous_small a {
	background-image: url('/images/english/button_previous_small_off.gif');
}
.pagination .prev_page:hover, .pagination .prev_page:active,
.button_previous_small a:hover, .button_previous_small a:active { 
	background-image: url('/images/english/button_previous_small_on.gif');
}

.button_next_small a,
.pagination .next_page {
	left: 220px;
	background-image: url('/images/english/button_next_small_off.gif');
}
.pagination .next_page:hover, .pagination .next_page:active,
.button_next_small a:hover, .button_next_small a:active { 
	left: 220px;
	background-image: url('/images/english/button_next_small_on.gif');
}

/*---------- START ---------- */

#register_frame {
	position: absolute;
	z-index: 10;
	left: 415px; 
	top: 430px;
	width: 360px;
	height: 100px;
}

#appstore_badge {
	position: absolute;
	z-index: 10;
	left: 621px; 
	top: 540px;
	width: 154px;
	height: 52px;
}

/* Button Prev/Next - Small */
#buttonframe_register a,
#buttonframe_login a
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 360px;
	height: 68px;
	background-repeat: no-repeat;
	background-image: url('/images/english/button_registerlogin_top_off.gif');
}

#buttonframe_register a:hover, #buttonframe_register a:active 
{
	background-image: url('/images/english/button_registerlogin_top_on.gif');
}

#buttonframe_login a
{
	top: 68px;
	height: 32px;
	background-image: url('/images/english/button_registerlogin_bottom_off.gif');
}

#buttonframe_login a:hover, #buttonframe_login a:active 
{
	background-image: url('/images/english/button_registerlogin_bottom_on.gif');
}


/*---------- TRACKS & MAPS ---------- */

.map_small, .map_big {
	position: absolute;
	background-color: #18384d;
	margin-left: -10px;
	margin-top: -10px;
	width: 340px;
	height: 200px;
}

.map_big {
	width: 730px;
	height: 398px;
}

.maptext, .maptextsmall {
	text-align: left;
	color: #555555;
	font-size: 10pt;
	line-height: 12pt;
}

.maptextsmall {
	font-size: 8pt;
	line-height: 9pt;
}

#map_buttonbar {
	position: absolute;
	margin-left: -10px;
	margin-top: 392px;
	width: 730px;
	padding-top: 0px;
}

.gmnoprint div {
	font-size: 7pt;
	text-align: center;
	color: #555555;
}

.inputbox {
	position: absolute;
	width: 116px;
	height: 24px;
	/* background-image: url('/images/frame_inputbox_small.gif');
	padding-top: 6px; */
	text-align: center;
	color: #555555;
	font-size: 10pt;
}

/* Button Rounded - Small */
.button_rounded_small a
{
	position: absolute;
	width: 116px;
	height: 30px;
	text-align: center;
	color: #000000;
	font-size: 12pt;
	line-height: 30px;
	text-decoration: none;
	background-repeat: no-repeat;
	background-image: url('/images/button_blank_small_off.gif');
}

.button_rounded_small a:hover, .button_rounded_small a:active { 
	background-image: url('/images/button_blank_small_on.gif');
}

/* Button Prev/Next - Small */
#button_menu_file a,
#button_menu_track a
{
	position: absolute;
	width: 116px;
	height: 30px;
	left: 500px;
	background-repeat: no-repeat;
}

#button_menu_file a {
	background-image: url('/images/english/button_file_small_off.gif');
}
#button_menu_file a:hover, #button_menu_file a:active { 
	background-image: url('/images/english/button_file_small_on.gif');
}

#button_menu_track a {
	background-image: url('/images/english/button_track_small_off.gif');
}
#button_menu_track a:hover, #button_menu_track a:active { 
	background-image: url('/images/english/button_track_small_on.gif');
}

.dropdownmenu {
	position: absolute;
	z-index: 20;
	width: 130px;
	height: 130px;
	margin-top: -200px; /* menu + button height */
	padding: 15px;
	background-image: url('/images/frame_dropdownmenu.gif');
	background-repeat: no-repeat;
	color: #000000;
}

/*---------- USER PROFILE ---------- */

#dialogskilllevels {
	position: absolute;
	z-index: 50;
	width: 720px;
	height: 40px; /* + padding-top = total height */
	left: 25px;
	top: 150px;
	padding: 15px;
	padding-top: 325px;
	background-image: url('/images/frame_skilllevels.gif');
	background-repeat: no-repeat;
	text-align: center;
}

#dialogachievements {
	position: absolute;
	z-index: 50;
	width: 290px;
	height: 435px;
	left: 455px;
	top: 120px;
	padding: 15px;
	background-image: url('/images/frame_achievementslist.gif');
	background-repeat: no-repeat;
	text-align: center;
}

/*---------- RESULTS ---------- */

.largepoints {
	font-size: 30pt;
	line-height: 32pt;
	text-align: center;
	color: #FFD900;
}