body {
	background-color: #ffffff;
	color: #000000;
	font-family: arial, sans-serif;
	font-size: 13px;
	padding: 0px;
	margin: 0px;
}

a {
	color: #000066;
	text-decoration: underline;
	font-weight: bold;
}

a:hover {}
ul { margin-bottom: 0px; }

div, img, form {
	padding: 0px;
	margin: 0px;
	border: none;
}

hr {
	height: 1px;
	margin-bottom: 1em;
	border-width: 0px;
	border-bottom-width: 1px;
	border-color: #000000;
	border-style: solid;
}

address { font-style: normal; }
code { background-color: lightgray; }

.floatright, .fr {
	display: inline;
	float: right;
}

.floatleft, .fl {
	display: inline;
	float: left;
}

.clearright, .cr { clear: right; }
.clearleft, .cl { clear: left; }
.clearboth, .cb { clear: both; }

.alignleft, .lj { text-align: left; }
.alignright, .rj { text-align: right; }
.aligncenter, .cj { text-align: center; }

.darkgray { color: darkgray; }
.green { color: green; }
.mustard { color: #bebe18; }
.paleyellow { color: #fffddd; }
.red { color: red; }
.white { color: white; }

.top { vertical-align: top; }

.greenbg { background-color: green; }
.lightbluebg { background-color: lightblue; }
.mustardbg { background-color: #bebe18; }
.palebluebg { background-color: #e0e0ff; }
.paleyellowbg { background-color: #fffddd; }
.redbg { background-color: red; }
.whitebg { background-color: white; }

.bold { font-weight: bold; }
.larger { font-size: larger; }
.small { font-size: small; }
.smaller { font-size: smaller; }
.xsmall { font-size: x-small; }
.hide { display: none; }
.plain { text-decoration: none; }

.fullwidth { width: 100%; }
.nearlywidth { width: 99%; }
.halfwidth { width: 50%; }
.pad10t { padding-top: 10px; }
.pad15t { padding-top: 15px; }
.pad0r { padding-right: 0px; }
.pad05emb { padding-bottom: .5em; }
.margin15b { margin-bottom: 15px; }
.topLine { border-top: 1px solid black; }
.bottomLine { border-bottom: 1px solid black; }
.nowrap { white-space: nowrap; }
.toolOutput { 80% monospace; }
.toolSite { float: left; width: 120px; }
.inactive { opacity: 0.3; }

.loginButton {
	background-color: green;
	color: white;
	border: 1px outset black;
	padding: 5px;
}
.registerButton {
	background-color: darkblue;
	color: white;
	border: 1px outset black;
	margin: 5px;
	padding: 5px;
	text-decoration: none;
}

div.signupButton {
	margin-top: 15px;
	margin-bottom: 15px;
}
#signupButton {
	background-color: green;
	border: 1px outset black;
	padding: 10px;
	text-decoration: none;
	color: white;
}
.loginBox { padding: 10px; }

.mtuSlider {
	display: inline-block;
	width: 200px;
	margin-right: 10px;
	margin-left: 10px;
}

/* ***************** */
/* Main page layouts */
#page_center {
	width: 1012px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}

#header {
	width: 100%;
	text-align: center;
	margin-bottom: 13px;
}

#header span {
	font-size: 160%;
	font-weight: bold;
}

.sidebar {
	display: inline;
	float: left;
	width: 170px;
	margin-top: 1px;

}
.sidebar .content a {
	font-weight: normal;
	font-size: 90%;
}

.menu, .submenu {
	padding: 0px;
	margin: 0px;
}

.menu {
	padding-bottom: 1px;
	margin-top: 0.1em;
	margin-bottom: 0.1em;
}

.menu li, .submenu li {
	list-style-type: none;
	margin-left: 12px;
	/* font-size: 95%; */
}

.submenu li {
	margin-left: 8px;
	font-size: 95%;
}

.menu a, .submenu a { text-decoration: none; }
.menu a:hover, .submenu a:hover, .submenu a.heavy:hover { text-decoration: underline; }

.submenu a { color: #000000; }

.submenu a.heavy {
	font-weight: normal;
	font-family: "arial black", sans-serif;
	text-decoration: none;
}

#rightbar { float: right; }

#rightbar .content a {
	font-weight: normal;
	font-size: 90%;
}

#content {
	display: inline;
	float: left;
	width: 650px;
	margin-top: 1px;
	margin-left: 10px;
	margin-right: 10px;
	padding-bottom: 1px;

}

/* Footer */
#footer {
	clear: both;
	font-size: 80%;
	text-align: center;
	padding-top: 10px;
	margin-bottom: 10px;
}

#footer_left {
	float: left;
	text-align: left;
	font-style: normal;
}

#footer_center { }

#footer_right {
	float: right;
	text-align: right;
}

/* Form utilty */

div.row {
	clear: both;
	padding-top: 10px;
}
div.narrowRow {
	clear: both;
	padding-top: 5px;
}
div.row span.label {
	float: left;
	width: 150px;
	padding-right: 5px;
	text-align: right;
}
div.row span.field { width: 350px; }
div.row span.field input { margin-right: 5px; }
div.sectionHeader {
	border-top: 1px solid black;
	margin-top: 8px;
	font-weight: bold;
}
.fieldError {
	border: 1px solid red;
	background-color: rgb(255, 128, 128);
	margin-left: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.passwordStrong { color: green; }
.passwordMedium { color: goldenrod; }
.passwordWeak { color: red; }

.zebra { border-collapse: collapse; }
.zebra td { border: 1px solid gray; }
.zebra tr.alt { background-color: rgb(200, 200, 255); }


/* ************************************************************************* */

.newsTitle {
	background: lightblue;
	text-decoration: underline;
	font-weight: bold;
	width: 75%;
}

.required { color: #e00000; }

.block {
	width: 100%;
	margin-bottom: 9px;
	padding-bottom: 2px;
	text-align: left;
	border: 1px solid #000066;
}
.block.cj { text-align: center; }

.block .caption {
	width: 100%;
	height: 1.5em;
	padding-top: 0.2em;
	font-size: 130%;
	font-weight: bold;
	text-align: center;
	background-color: #000066;
	color: #ffffff;
}

.block .content {
	font-size: 110%;
	padding: 12px;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-bottom: 1px;
}

.block .title {
	margin: 0px;
	margin-bottom: 0.6em;
	margin-top: 0.6em;
	font-size: 30px;
	font-weight: bold;
}

h4 { margin: 0px; }

/* Tunnel information page */

#tunnelInfotabs { width: 99%; }
#tunnelInfoTabs ul { font-size: 75% }
#tunnelInfoTabs ul li.admintools { float: right; }

#tunnelInfoTabs * {
	font-size: 14px;
	font-family: arial, sans-serif;
}
#tunnelInfoTabs * div.tabContent div { padding: 3px; }
#tunnelInfoTabs * div.tabContent div input {
	height: 16px;
	text-align: right;
	padding-top: 0px
}
#tunnelInfoTabs * div.tabContent div span:first-child:before {
	content: '';
	padding-right: 19px;
}
#tunnelInfoTabs * div.tabContent div span[title]:before {
	content: url(/images/icon.gif);
	padding-right: 5px;
}
#tunnelInfoTabs * .ui-slider { height: 5px; }
#tunnelInfoTabs * input[type="submit"] { height: 1.5em; }
#tunnelInfoTabs * .code { font: 11px monospace; }


/* Status Page */

.ping-up { background-color: rgb(128, 255, 128); }
.ping-down { background-color: rgb(255, 128, 128); }

/* ************************************************************************* */

div.half {
	display: inline;
	float: left;
	width: 50%;
}

div.full {
	clear: both;
	text-align: left;
	width: 100%;
}

div.center {
	clear: both;
	text-align: center;
	width: 100%;
}

form.quote { }
form.quote div.half { text-align: right; }
form.quote textarea { width: 100%; }

/* Usage pages */
 
.bycontry { width: 100%; }
 
.bycountry th	{
	font-family: arial,Helvetica; font-size: 13px; font-weight: bold;
	min-width: 60px;
	border-bottom: #000066 1px solid;
	height: 24px;
}
.bycountry img {
	vertical-align: middle;
	padding-right: 10px;
}
.bycountry td 	{
	padding: 0px;
	margin: 0px;
	vertical-align: middle;
	font-family: arial,Helvetica; font-size: 11px; font-weight: normal;
	height: 24px;
}

#cent { border-left: #000066 1px solid; }

/* CSS Classes for information boxes */

.errorMessageBox {
	text-align: center;
	color: black;
	border: 1px solid red;
	padding: 5px;
	background: rgb(255, 128, 128);
}

.validMessageBox {
	text-align: center;
	color: black;
	border: 1px solid green;
	padding: 5px;
	background: rgb(128, 255, 128);
}

.statusMessageBox {
	text-align: center;
	color: black;
	border: 1px solid blue;
	padding: 5px;
	background: rgb(128, 128, 255);
}

.infoMessageBox {
	color: black;
	border: 1px solid darkgray;
	padding: 5px;
	margin: 10px;
	background: rgb(224, 224, 224);
}

.infoMessageBox ul { padding-left: 20px; }
#usage dd { margin-bottom: 15px; }
.nyi { background: black; }
.wip { background: gray; }

.smallTable { font-size: small;  width: 100%; }
.smallTable * td { padding: 2px; }
.smallTable * th { border-top: 1px solid black; background-color: rgb(208, 208, 255); }
.smallTable .altRow { background-color: rgb(255, 253, 221); }
#prefixInfoDialog div.row { clear: both; padding-top: 5px; }

/* TOS Classes */
ol.l { list-style-type: upper-alpha; }
ol.m > li {
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 1em;
}

/*****************************************/
@media (max-width: 1024px) {
   #top_certs, #latest_certs, #exhaustioncounter { display: none; }
   input { max-width: 100%; }   
   #page_center { width: 100%; }
   #content {
		width: 100%;
		max-width: 75%;
   }
   .block * td { padding: 8px; }
   #rightbar { float: left; }
   #content { float: right; }
}

/*****************************************/
@media (max-width: 800px) {
   body {
        font-size: 130%;
        line-height: 150%;
   } 
   input { line-height: 150%; } 
   #navigation, #content, #rightbar { float: none; }
   #navigation .block, #rightbar .block { text-align: center; }
   .block .caption { height: 100%; }
   /*stops footer elements from bunching up*/
   #footer * {
        float: none;
        display: block;
        text-align: center;
   }
}