/*-----------------------------------------------------------------------------
[client] Screen Stylesheet

version:   1.0
date:      11/01/08
author:    [James Likely]
email:     [c44c@hotmail.com]
website:   [Kard]
-----------------------------------------------------------------------------*/

body {

	font: 12px/ 1.4 Verdana, Geneva, Arial, Helvetica, sans-serif;

	padding: 0;

	margin: 0 0;

	color: #333;

	text-align: left;

	background: #fff;

}



.clear {

	clear: both;

}



/* Framework
-----------------------------------------------------------------------------*/

#content {

	margin: 70px auto;

	background: #fff;

	width: 829px;

	position: relative;

	margin-bottom: 10px;

	padding-bottom: 100px;

}



#grid01 {

	background: url(/common/images/layouts/gkweb/shell-top.gif) top;

	height: 100px;

	margin: 0 auto;

	width: 829px;

	margin-top: 65px;

	position: relative;

}

#grid01-thin {
	background:  url(/common/images/layouts/gkweb/shell-top-thin.gif) top;
	height:  60px;
	margin:0 auto;
	width:  829px;
	margin-top:45px;
   position: relative;
}

#grid02 {

	background: url(/common/images/layouts/gkweb/shell-middle.gif) top;

	display: block;

	min-height: 360px;

	position: relative;

	margin: 0 auto;

	width: 829px;

	position: relative;

}



#content-grad {

	display: block;

	padding-top: 1px;

	padding-left: 15px;

	width: 786px;

	margin: 0 16px 0 12px;

	min-height: 360px;

	overflow: hidden;

}



#grid03 {

	background: url(/common/images/layouts/gkweb/shell-bottom.gif) top;

	position: relative;

	height: 68px;

	margin: 0 auto;

	width: 829px;

	position: relative;

}



#bottom-box {

	background: url(/common/images/layouts/gkweb/shell-round-top.gif) left

		top no-repeat;

	width: 801px;

	margin: 0 0 0 12px;

	position: relative;

}



#bottom-box #start-your {

	padding: 20px 10px 10px 30px;

}



#bottom-box a#enroll {

	position: absolute;

	right: 28px;

	top: 18px;

	background: url(/common/images/layouts/gkweb/button-enroll.png);

	width: 136px;

	height: 50px;

	display: block;

	text-indent: -2000em;

}



#bottom-box a:hover #enroll {

	background-position: 0 -61px;

}



#bottom-box02 {

	background: url(/common/images/layouts/gkweb/shell-round-bottom.gif)

		left bottom no-repeat;

	height: 10px;

	width: 801px;

}



.col01 {

	width: 585px;

	float: left;

}



.clear {

	clear: both;

}

.divider {
	background: url(/common/images/layouts/gkweb/divider.png);
	width: 553px;
	height: 2px;
	margin-bottom: 20px;
}

#bottom-row ul {
	margin: 0 0 0 8px;
}

#bottom-row ul li {
	float: left;
	padding-left: 0px;
	width: 240px;
	position: relative;
}

/* Common
-----------------------------------------------------------------------------*/

h1 {

	border-bottom: 1.5px solid #CCCCCC;

	color: #F7831D;

	font-size: 1.8em;

	font-weight: lighter;

	margin: 0.2em;

	margin-bottom: 15px;

	margin-top: 0px;

	width: 95%;

}



h2 {

	color: #666666;

	font-size: medium;

	font-weight: bold;

	margin: 3px;

	padding-top: 3px;

}



h2 a:link {

	color: #227CA0;

}



h2 a:visited {

	color: #227CA0;

}



h2 a:hover {

	color: #227CA0;

	text-decoration: none;

}



h2 a:active {

	color: #227CA0;

}



h3 {

	font-weight: normal;

	font-size: small;

	color: #348CCA;

	padding: 0 0 5px 0;

	margin: 0 0 5px 0;

}



a {

	color: #348cca;

	outline: none;

	text-decoration: none;

	font-weight: normal;

}



a:link {

	color: #348cca;

}



a:visited {

	color: #348cca;

}



a:hover,a:focus {

	color: #348cca;

	text-decoration: underline;

}



a:active {

	color: #348cca;

}



a.active {

	color: #F7831D;

	font-weight: bold;

}



/* TESTING ... */

p {

	margin-bottom: 15px;

	line-height: 20px;

}



/* Branding
-----------------------------------------------------------------------------*/

#kard-logo a {

	display: block;

	width: 346px;

	height: 78px;

	position: absolute;

	top: -44px;

	left: 0px;

	border: none;

	background: url(/common/images/layouts/gkweb/logo-kards.png) no-repeat;

}



#kard-logo img {

	display: block;

	width: 0;

	height: 0;

	text-indent: -2000em;

}



#kard-logo a img {

	border: none;

}



a#star {

	position: absolute;

	top: -65px;

	right: 0;

	width: 164px;

	height: 165px;

	text-indent: -2000em;

	background: url(/common/images/layouts/gkweb/music-challenge.png)

		no-repeat;

}



a:hover #star {

	background-position: 0 -165px;

}

#practice-word {
	/* text-indent: -2000em; */
	width:  493px;
	height:  50px;
	position: absolute;
	top:  38px;
	left:  30px;
	/* background:  url(/common/images/layouts/gkweb/practice-word.gif) top no-repeat;	*/
}

#big-header {
	font-family: Helvetica;
	color: #000000;
	font-size: 1.6em;
	display: block;
	letter-spacing: -1.0px
	line-height: 0.6
}

#little-header {
	font-size: 1.2em;
	line-height: 0.6
}



#using-kard {

	position: absolute;

	top: 25px;

	left: 45px;

}



a#login {

	position: absolute;

	top: 17px;

	left: 188px;

	width: 92px;

	height: 34px;

	text-indent: -2000em;

	background: url(/common/images/layouts/gkweb/button-login.png) no-repeat

		;

}



a:hover #login {

	background-position: 0 -37px;

}



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

#GkTable {

	

}



#GkTable h1 {

	border: 0 none;

	color: #F7831D;

	font-size: x-large;

	font-weight: normal;

	margin: 10px 0 0 20px;

}



#GkTable h3 {

	font-size: small;

	color: #FFFFFF;

	margin: 2px;

	padding: 0;

	margin-bottom: 10px;

}



.text {

	border: 1px inset #CCC;

	margin: 3px;

}



.inputText {

	border: 1px inset #CCC;

}



.submit {

	background-color: #FFF;

	padding-bottom: 10px;

	padding-left: 15px;

	text-align: left;

	color: #84C600;

	font-weight: bold;

	width: 100px;

	height: 40px;

	border: none;

	background-image: url('/images/gkTable/button.gif');

	cursor: pointer;

}



/*  Messages
-----------------------------------------------------------------------------*/

#messages {

	color: #FFFFFF;

	margin: 5px auto;

	padding: 3px 3px 3px 0;

	width: 95%;

}



#messages .message {

	background-color: #FFF;

	border: 1px solid #CCC;

	color: #666;

	padding: 3px;

}



#messages .warning {

	background-color: #FFAE35;

	border: 1px solid #ff9900;

	padding: 3px;

}



#messages .success {

	background-color: #00AA00;

	border: 1px solid #009000;

	padding: 3px;

}



#messages .error {

	border: 1px solid #f00;

	background-color: #FF7979;

	padding: 3px;

}



#messages p {

	margin: 3px;

}



/* 
-----------------------------------------------------------------------------*/

ul.cnitems {
	list-style-type: circle;
}

ul.links-footer01.position {

	position: absolute;

	right: 8px;

	top: 12px;

	height: 27px;

}



ul.links-footer01 li {

	float: left;

	font-size: 11px;

}



ul.links-footer01 li a {

	color: #525252;

	float: left;

	display: block;

	height: 22px;

	padding: 5px 8px 0 8px;

	text-align: middle;

	background: url(/common/images/layouts/gkweb/link-line.gif) top left

		no-repeat;

}



ul.links-footer01 li a.no-back {

	background: none;

}



ul.links-footer01 li a:hover {

	color: #363636;

}



ul#footerlinks {

	float: right;

	margin-right: 10px;

}



ul#footerlinks  li {

	display: inline;

	margin-right: 15px;

}



ul#footerlinks  li a {

	color: #525252;

	font-size: 11px;

}



#copy {

	padding-left: 30px;

}



#footer {

	font-size: 11px;

	display: block;

	padding: 10px 0;

	margin: 0 auto;

	width: 829px;

	position: relative;

}



.dont {

	position: absolute;

	right: 20px;

	top: 30px;

	display: block;

	width: 85px;

	font-size: 11px;

}



/* Sub Navigation
-----------------------------------------------------------------------------*/

ol#subnav {

	float: right;

	width: 185px;

	margin-left: 10px;

}



ol#subnav li {

	

}



ol#subnav  li a {

	display: block;

	padding: 3px 0;

	text-decoration: none;

}



ol#subnav  li a.active {

	color: #F7831D;

	font-weight: bold;

}



ol#subnav  li a:hover {

	color: #F7831D;

}



/* Lists

-----------------------------------------------------------------------------*/

#not_numbered_list {

	margin: 10px;

}



#not_numbered_list li {

	list-style-type: disc;

	margin-left: 30px;

}



#numbered_list {

	margin: 10px 10px 10px 0;

	padding-left: 10px;

}



#numbered_list li {

	font-size: 1em;

	line-height: 1.5em;

	list-style-type: decimal;

	margin-left: 30px;

}



.admin_table {

	border: 1px solid #000;

	font-size: 0.8em;

	border-collapse: collapse;

	font-size: small;

}



.admin_table th {

	padding: 3px;

	background-color: #84C600;

	color: #FFF;

	border: 1px solid #333;

}



.admin_table td {

	padding: 3px;

	text-align: center;

	border: 1px solid #333;

}



.inputText {

	border: 1px inset #333;

}



.inputButton {

	border: 1px outset #333;

	color: #F7831D;

}