/* base styles */

html, body, div, ul, ol, li, dl, dt, dd,
h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input {
	margin: 0;
	padding: 0;
}

html, body {
	color: #333;
	background-color: #f2f2f2;
}

body {
	font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
	font-size: 12px;
	line-height: 1.3;
	overflow-x:hidden;
	overflow-y:scroll;
}

h1, h2, h3, h4, h5, h6 { font-weight: normal; }

#globaltop {
	margin: 0 auto;
	position: relative;
	width: 980px;
}

#main {
	width: 980px;
	margin: 0 auto;
	position: relative;
}

#bottom {
	width: 980px;
	margin: 0 auto;
	position: relative;
}

img {
	border: none;
}

a { text-decoration: none; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }

p { line-height: 1.3; margin-top: 0.3em; margin-bottom: 0.6em; }


ul, ol {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

.circle { list-style-type: circle }
.disc	{ list-style-type: disc }
.inside { list-style-position: inside; } 

[disabled] {
    color: gray;
    opacity: 0.7;
}

sup, sub {
	font-size: 0.7em;
}



hr {
	border:none;
	margin: 1em -0.2em;
	border-top: 5px #CCC solid;
}

.thin {
	font: inherit;
	font-weight: normal;
}

.thick {
	font: inherit;
	font-weight: bold;
}

.fltl { float: left; }

.fltr { float: right; }

.txtl { text-align: left; }
.txtc { text-align: center; }
.txtr { text-align: right; }

.hide { display: none;  }
.invisible { visibility: hidden; }

.wide { width: 100%; }

.large 	{ font-size:   large; }
.larger { font-size:   larger !important; }
.x-large { font-size:  x-large !important; }
.xx-large { font-size: xx-large !important; }
.small { font-size: small; }
.tiny  { font-size: x-small; }

.big { font-size: large !important; }

.water-mark { 
	-moz-opacity:.30;
	-ms-filter:”alpha(opacity=30)”;
	filter:alpha(opacity=30);
	opacity:.30;
}

.wide { width: 100%; }
.pad-less { padding: 0.4em !important; }
.pad { padding: 0.8em !important; }
.pad-more { padding: 1em !important; }
.pad-left { padding-left:10px !important; }
.pad-right { padding-right: 10px !important; }
.pad-top { padding-top: 10px !important; }
.pad-bottom, .pad-bot { padding-bottom: 10px !important; }

.gap-top { margin-top: 1em !important; }
.gap-top-more { margin-top: 2em !important; }
.gap-bottom, .gab-bot { margin-bottom: 1em !important; }
.gap-bottom-more, .gab-bot-more { margin-bottom: 2em !important; }
.gap-right { margin-right: 1em !important; }
.gap-left { margin-left: 1em !important; }

.remove-border { border: none!important; }

.round-box {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid transparent;
}

.left { text-align: left; }
.right { text-align: right; }
.justify { text-align: justify; }
.middle { display: table-cell; vertical-align: middle; }
.middle div { position: relative; }

.mark {
	border: 1px solid green;
}

.debug {
	border: 1px dotted red !important;
}


.field {
	height: 2em;
	display: block;
	clear: both;
	padding-top: 0.1em;
	padding-left: 1em;
}

.field + .field {
	margin-top: 0.2em;
}

.yts {
	background: url(/themes/2009/images/yts.png) 0 0 no-repeat yellow;
	color: black;
	padding-top: 10px;
	padding-bottom: 10px;
	min-height: 78px;
}

.yts-small {
	/* background: url(/themes/2009/images/yts-small.png) 0 0 no-repeat yellow; */
	background-color: yellow;
	color: black;
	padding: 10px;
	font-weight: bold;
}

.raised-box, .shadow { 
	box-shadow: 0px 2px 8px #888;
	-moz-box-shadow: 0px 2px 8px #888;
	-webkit-box-shadow: 0px 4px 2px #888;
}

.bevel-text {
	text-shadow: white -1px 2px 0px, #CCC 0px 0px 1px;
}

.bevel-box {
    padding: 0.5em;
}


.bevel-box.bg-blue {
	background-color: #25A;
	border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	/* box-shadow:  inset 2em 2em 2em -2em #CCF, inset -2em -2em 2em -2em #008; */
	/* -moz-box-shadow:  inset 2em 2em 0em -2em #CCF, inset -2em -2em 2em -2em #008; */
}

.bevel-box.bg-blue.shadow {
/*
	box-shadow: inset 2em 2em 2em -2em #CCF,
		    inset -2em -2em 2em -2em #008, 
		    0px 4px 13px -4px #008;
	-moz-box-shadow:    inset 2em 2em 2em -2em #CCF,
			    inset -2em -2em 2em -2em #008,
			    0px 4px 13px -4px #008;
	-webkit-box-shadow:    inset 2em 2em 2em -2em #CCF,
			    inset -2em -2em 2em -2em #008,
			    0px 4px 13px -4px #008;
*/
}

.bevel-box.bg-gray {
	background-color: #CCC;
	border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;

	box-shadow:  inset 2em 2em 2em -2em #FFF, inset -2em -2em 2em -2em #888;
	-moz-box-shadow:  inset 2em 2em 2em -2em #FFF, inset -2em -2em 2em -2em #888;
}

.bevel-box.bg-gray.shadow {
	box-shadow: inset 2em 2em 2em -2em #FFF,
		    inset -2em -2em 2em -2em #888,
		    0px 4px 13px -4px #555;
	-moz-box-shadow: inset 2em 2em 2em -2em #FFF,
		    inset -2em -2em 2em -2em #888,
		    0px 4px 13px -4px #555;
	-webkit-box-shadow: inset 32px 32px 32px -32px #FFF, inset -2em -2em 2em -2em #888, 0px 4px 13px -4px #555; }

.bevel-box.bg-white {
	background-color: #FFFFFF;
	border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px; 
	box-shadow:  inset 2em 2em 2em -2em #FFF, inset -2em -2em 2em -2em #888;
	-moz-box-shadow:  inset 2em 2em 2em -2em #FFF, inset -2em -2em 2em -2em #CCC;
	-webkit-box-shadow:  inset 2em 2em 2em -2em #FFF, inset -2em -2em 2em -2em #CCC;
}

.bevel-box.bg-white.shadow {
	box-shadow:  inset 2em 2em 2em -2em #FFF,
		    inset -2em -2em 2em -2em #888,
		    0px 4px 13px -4px #555;
	-moz-box-shadow:  inset 2em 2em 2em -2em #FFF,
		    inset -2em -2em 2em -2em #CCC,
		    0px 4px 13px -4px #555;
	-webkit-box-shadow:  inset 2em 2em 2em -2em #FFF, inset -2em -2em 2em -2em #CCC, 0px 4px 13px -4px #555;
}

.bg-blue .white {
	color: white;
}

.bg-blue .bevel-text.white {
	text-shadow: #008 0px 1px 0px, #00A 0px -1px 0px;
}

.price { font-size: 4em; }

table.plan { 
	border: 1px solid black;
	padding: 0;
	margin: 0;
	width: 60%;
	border-collapse: collapse;
	border-spacing: 0px;
	text-align: center;
	margin-left: 20%;
	margin-top: 2em;
	margin-bottom: 2em;
}

table.plan thead { 
	background-color: #CCC;
	border: 1px solid black;
	font-weight: bold;
}

table.plan td {
	border: 1px solid black;
	padding: 3px;
	margin: 0;
	width: 30%;
	height: 1.2em;
}

.center {
	text-align: center;
}

input, select, option {
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.field input, .field select {
	font-size: 1.0em;
	float: right;
	margin-right: 6%;
}

.field label {
	display: block;
	font-size: 1.2em;
	width: 30%;
	float: left;
	vertical-align: baseline;
}

.field + .field label {
	margin-top: 0.0em;
}

.field + .field input {
	margin-top: 0.0em;
}

.field label span {
	display: block;
	padding-left: 1em;
	font-size: 0.7em;
}

.field label span[class~=field-marker] {
	display: inline;
	color: red;
	padding-left: 0em;
}

.display-field label {
	font-weight: bold;
	margin-top: 0.5em;
}

span[class~=invalid] {
	background: url(/themes/2009/images/x-mark-20x20.png) no-repeat 0 0 !important;
	display: block;
	height: 20px;
	clear:both;
	padding-left: 10px !important;
	position:relative;
}

span[class~=valid] {
	background: url(/themes/2009/images/check-mark-20x20.png) no-repeat 0 0 !important;
}

.field label + input, .field label + select, .field label + button {
	width: 55%;
	height: 1.6em;
	display: block;
}

.field label + input {
	border: 1px solid gray;
	background-color: white;
}


.bg-ocean a {
	color: inherit !important;
	text-decoration: underline;
}

/* loginbar */

#loginbardiv  {
	width: 99%;
	color: #777;
	padding: 4px;
	margin-top: 1px;
	padding-bottom: 6px;
	font-size: 0.9em;
}

#loginbardiv span {
	color: #333;
}

#loginbardiv input {
	background: #DEF;
	border: none;
	height: 1.2em;
}


.orange { color: #FFC400; }

a:active, a:focus { outline: none !important; }
a:link, a:visited { color: #09F; }
a:active { color: #F00; }
a:hover { color: #F00; }
a:link { text-decoration: none; }
a:hover[class=box] { text-decoration: none; }
a:hover[class=box] { color: #333; }

h1 { color: #555; }

.blue 	{ color: #07C !important; }
.orange { color: #F90 !important; }
.red { color: #C00 !important; }
.gray { color: #666 !important; }
.lt-gray { color: #CCC !important; }

.bg-white { background-color: white; }
.bg-black { background-color: black; } 
.bg-lite  { background-color: #EEE; }
.bg-dark  { background-color: #CCC; }
.bg-ocean { background-color: #9CF; }
.bg-form-container { background: url("/themes/2009/images/h300.png") repeat-x white 0px 100%; }

.bg-dark a:link, .bg-dark a:visited {
    color: #FF0000;
}

#title-selector {
    text-shadow: 0 1px 0 #FFFFFF;
    vertical-align: bottom;
}
#title-selector a:link, #title-selector a:visited { color: #333; }
#title-selector h1 a:link, #title-selector h1 a:visited { color: #333; }

#title-selector h1 { 
    float: left;
    font-size: 32px!important;
}
#title-selector h1 a {
    margin-left: 0px;
    font-size: inherit;
}

#title-selector ul {
    padding: 0!important;
    float: right;
}

#title-selector li {
    font-size: 14px;
    display: inline;
}

#title-selector li a {
    margin-left: 30px;
}

#title-selector a:hover  { color: #08C; }
#title-selector a:active { color: #03F; }


div#title-selector:after {
	content: ".";
	font-size: 1px;
	visibility: hidden;
	display: block;
	clear: both;
	height: 0px;
}

.mark-left-hard { border-left: 5px solid black; }


.mark-bottom { border-bottom: 1px solid; }
.mark-bottom.more   { border-bottom-width: 5px; }
.mark-bottom.white  { border-bottom-color: white; }
.mark-bottom.gray   { border-bottom-color: gray; }
.mark-bottom.black  { border-bottom-color: black; }


dl.faq { 
	font-size: 1.3em;
	line-height: 1.5;
	counter-reset: faq;
}

.faq dt { 
	margin-top: 2em;
}

.faq dt:before {
	content: "Question " counter(faq) ". ";
	counter-increment: faq;
	font-weight: bold;
}

.faq dd:before {
	content: "Answer: ";
	padding-left: -10px;
	font-weight: bold;
}

.faq dd {
	display: list-item;
	list-style: outside none;
}

#topmenu
{ 
    width: 100%;
    margin-bottom: 8px;
}

#menuitems {
    display: table;
    border-collapse: collapse;
    height: 28px;
    text-align: center;
}

#menuitems li {
    vertical-align: middle;
    display: block;
    width: 139px;
    height: 40px;
    background: url(/themes/2009/images/buttons/button-bg.png) repeat-x 0 -40px #333;
    border-left:1px solid #888;
    text-align: center;
    float: left;
}

#menuitems li a {
    font-size: 14px;
    color: black;
    text-shadow: 0px 1px 0px #EEE, 0px -1px 0px #AAA;
    width: 139px;
    display: table-cell;
    height: 40px;
    vertical-align: middle;
}


ul#menuitems > li:first-child {
    border-top-left-radius: 6px;
    border-left: none;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
}

ul#menuitems > li.last {
    border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
}

ul#menuitems li:hover {
    background: url(/themes/2009/images/buttons/button-bg.png) repeat-x 0 -80px #333;
}

ul#menuitems li:hover a, ul#menuitems li.active a {
    text-shadow: none;
    font-weight: 500;
    color: white;
}

ul#menuitems li:active, ul#menuitems li.active {
    background: #333;
}

#menuitems:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

div.ryu { 
	position: relative;
	block: inline;
	padding: 0px;
	width: 1.2em;;
	height: 1.3em;
	padding-right: 2em;
}

div.ryu div {
	position: absolute;
	left: 0px;
	top: 0px;
}

div.ryu img {
	height: 1.1em;
	top: 0.2em;
	left: 0px;
	margin: 0;
	border: none;
	position: absolute;
}


@media screen { 
  .print-only { display: none !important; } /* remove anything that's marked print-only */
}

@media print {

   body { width: 8in; height: 11in; }
   div#title-selector { display: none; }

   .screen-only { display: none !important; } /* remove anything that's marked screen-only */
}