body {
    font-family: Arial, Helvetica, sans-serif;
    color: black; 
    font-size: 12px;
    text-align: left;
    margin: 0px; 
    padding: 0px; 
    background-color: #F0F0F0;
}

.box {
    display: block;
    box-orient: vertical;
    box-align: center;
    width: 640px;
    height: auto;
    margin: auto;
    padding: 0px;
    word-wrap: break-word;
    text-overflow: ellipsis;
}

pre {
    font-family: Arial, Helvetica, sans-serif;
    color: black; 
    font-size: 12px;
}

td {
    font-size: 12px;
}

h1 { 
	font-weight: bold; 
	font-size: 18px;
}

h2 { 
	font-weight: bold; 
	font-size: 16px;
}

h3 { 
	font-weight: bold; 
	font-size: 14px;
}

h4 { 
	font-weight: bold; 
	font-size: 12px;
}

.small {
	font-size: 10px;
}

.menu {
	font-size: 14px;
}

.bannerdigit {
    color: #33CCFF;
    font-weight: bold;
	font-size: 55px;
}

.bannertext {
	font-size: 18px;
}

.remindertext {
	font-size: 12px;
}

.messagetitle {
	font-size: 14px;
    font-weight: bold;
}

.username {
	font-size: 14px;
    font-weight: bold;
}

th {
    font-style: italic;
}

td.menutop {
    vertical-align: center;
    text-align: center;
    width: 90px;
    height: 30px;
    background-image:url('menutab.png');
	font-weight: bold;
    font-size: 14px;
}

td.image {
    padding: 0px;
}

td.text {
    vertical-align: top;
    padding: 3px;
    background-color: #F0F0F0;
}

td.fields {
    vertical-align: top;
    width: 100%;
}

td.buttons {
    vertical-align: bottom;
}

td.gallery {
    padding: 0px;
    width: 96px;
    height: 96px;
    vertical-align: top;
}

img.gallery {
    border: 0px;
    width: 96px;
    height: 96px;
    display: block;
    margin-left: auto;
    margin-right :auto;
}

textarea.note {
	font-family: Arial, Helvetica, sans-serif;
    width: 600px;
    height: 48px;
    border: 3px solid #F0F0F0;
    padding: 3px;
}

input.inputusername {
    width: 80px;
    border: 3px solid #F0F0F0;
    padding: 3px;
}

textarea.edit {
	font-family: Arial, Helvetica, sans-serif;
    width: 660px;
    height: 100px;
    border: 3px solid #F0F0F0;
    padding: 3px;
}

input.edit {
    width: 660px;
    border: 3px solid #F0F0F0;
    padding: 3px;
}

/* http://webdesignerwall.com/tutorials/css3-gradient-buttons */
/* darker: 00ACE6 */
/* normal: 33CCFF */
/* lighter: 80DFFF */

input[type=submit] {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px/100% Arial, Helvetica, sans-serif;
    font-weight:bold;
	padding: .3em .5em .3em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .2em;
	-moz-border-radius: .2em;
	border-radius: .2em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);

	color: #000000;
	background: #33CCFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#80DFFF), to(#00ACE6));
	background: -moz-linear-gradient(top,  #80DFFF,  #00ACE6);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#80DFFF', endColorstr='#00ACE6');
}

input[type=submit]:hover {
	text-decoration: none;

	background: #80DFFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#33CCFF), to(#33CCFF));
	background: -moz-linear-gradient(top,  #33CCFF,  #33CCFF);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#33CCFF', endColorstr='#33CCFF');
}

input[type=submit]:active {
	position: relative;
	top: 1px;

	color: #FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#f00ACE6), to(#80DFFF));
	background: -moz-linear-gradient(top,  #00ACE6,  #80DFFF);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ACE6', endColorstr='#80DFFF');
}

/* This doesn't override the above despite class=buttonlogin. Why? */
.buttonlogin {
    padding: .7em .5em .7em;
    font-weight:bold;
}

ul {
    list-style-type: square;
}

A { 
	font-weight: bold;
	color: black;
	text-decoration: none; 
}

A:visited { 
	font-weight: bold;
	color: #0F3D4D;
	text-decoration: none; 
}

A:active { 
	font-weight: bold;
	color: black;
	text-decoration: none; 
}

A:hover { 
	font-weight: bold; 
	color: #33CCFF;
	/* background-color: #0F3D4D; */
	text-decoration: underline;
}

hr {
	text-align:center;
	color:#33CCFF;
	background-color:#33CCFF;
	height:2px;
	width:80%;
}

form {
    margin-bottom: 0;
}

.SI-FILES-STYLIZED label.upload-cabinet {
	display: inline-block;
	cursor: pointer;
	width: 65px;
}

.upload-button {
	display: none;
}

.anchor-button, .upload-button {
	margin: 1px;
	padding: 4px 0px 4px 0px;
	display: inline-block;
	font-size: 12px;
	text-decoration: none;
	color: black;
	background-color: #33ccff;
	width: 65px;
	text-align: center;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-o-box-shadow: inset -4px -4px 3px rgba(0, 0, 0, 0.50), inset 4px 4px 3px rgba(255, 255, 255, 0.50);
	-moz-box-shadow: inset -4px -4px 3px rgba(0, 0, 0, 0.50), inset 4px 4px 3px rgba(255, 255, 255, 0.50);
	-webkit-box-shadow: inset -4px -4px 3px rgba(0, 0, 0, 0.50), inset 4px 4px 3px rgba(255, 255, 255, 0.50);
	box-shadow: inset -4px -4px 3px rgba(0, 0, 0, 0.50), inset 4px 4px 3px rgba(255, 255, 255, 0.50);
}

.anchor-button:hover, .upload-button-hover {
	text-decoration: none;
	color: black;
	background-color: #65d9ff;
}

.anchor-button:active, .upload-button-active {
	-o-box-shadow: inset 4px 4px 3px rgba(0, 0, 0, 0.50), inset -4px -4px 3px rgba(255, 255, 255, 0.50);
	-moz-box-shadow: inset 4px 4px 3px rgba(0, 0, 0, 0.50), inset -4px -4px 3px rgba(255, 255, 255, 0.50);
	-webkit-box-shadow: inset 4px 4px 3px rgba(0, 0, 0, 0.50), inset -4px -4px 3px rgba(255, 255, 255, 0.50);
	box-shadow: inset 4px 4px 3px rgba(0, 0, 0, 0.50), inset -4px -4px 3px rgba(255, 255, 255, 0.50);
	text-decoration: none;
	color: black;
	background-color: #29a6cf;
}

.upload-cabinet-has-file .upload-button {
	background-color: #33ffcc;
}

.upload-cabinet-has-file .upload-button-hover {
	background-color: #65ffd9;
}

.upload-cabinet-has-file .upload-button-active {
	background-color: #29cfa6;
}

.SI-FILES-STYLIZED label.upload-cabinet input.upload-file {
	cursor: pointer;
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;
	-moz-opacity: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

.loginout-button {
	padding: 13px 0px 15px 0px;
	font-size: 18px;
	width: 90px;
	height: 20px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	-o-box-shadow: inset -2px -5px 5px rgba(0, 0, 0, 0.90), inset 2px 5px 5px rgba(255, 255, 255, 0.60);
	-moz-box-shadow: inset -2px -5px 5px rgba(0, 0, 0, 0.90), inset 2px 5px 5px rgba(255, 255, 255, 0.60);
	-webkit-box-shadow: inset -2px -5px 5px rgba(0, 0, 0, 0.90), inset 2px 5px 5px rgba(255, 255, 255, 0.60);
	box-shadow: inset -2px -5px 5px rgba(0, 0, 0, 0.90), inset 2px 5px 5px rgba(255, 255, 255, 0.60);
}

.loginout-button:active {
	-o-box-shadow: inset 2px 5px 5px rgba(0, 0, 0, 0.90), inset -2px -5px 5px rgba(255, 255, 255, 0.60);
	-moz-box-shadow: inset 2px 5px 5px rgba(0, 0, 0, 0.90), inset -2px -5px 5px rgba(255, 255, 255, 0.60);
	-webkit-box-shadow: inset 2px 5px 5px rgba(0, 0, 0, 0.90), inset -2px -5px 5px rgba(255, 255, 255, 0.60);
	box-shadow: inset 2px 5px 5px rgba(0, 0, 0, 0.90), inset -2px -5px 5px rgba(255, 255, 255, 0.60);
}