html
{
	font-size: 1.5vw;
	height: 100%;
}

body
{
	padding: 0;
	margin: 0;
	background-color: #FFF;
	font-size: 1em;
	color: #333;
	height: 100%;
	font-family: "Verdana";
}

textarea
{
	resize: none;
}

input[type="button"], input[type="submit"], .button.special, .button, input, textarea, select
{
	line-height: 1.3em;
	font-size: 0.9em;
	height: auto;
	cursor: pointer;
	padding: 0 0.5em;
	display: inline-block;
	border-radius: 5px;
	box-sizing: border-box;
	color: #fff;
	border: 0px solid #333;
	margin: 0;
	background:url(img/btbg.png); 
	background-size: 100% 100%;
	text-shadow: none;
	font-family: "Verdana";
}

input[type="password"], input[type="text"], input[type="number"], select, textarea, input[type="file"]
{
	background: #fff;
	cursor: text;
	color: #333;
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
	/*margin: 0.5em;*/
}

.button:hover
{
	color: #eee;
	background:url(img/btbg_hover.png); 
	background-size: 100% 100%;
}

.button_red {
	line-height: 1.3em;
	font-size: 0.9em;
	height: auto;
	cursor: pointer;
	padding: 0 0.5em;
	display: inline-block;
	border-radius: 5px;
	box-sizing: border-box;
	color: #fff;
	border: 0px solid #333;
	margin: 0;
	background:url(img/btbg_red.png); 
	background-size: 100% 100%;
	text-shadow: none;
	font-family: "Verdana";
}

.button_red:hover {
	color: #eee;
	background:url(img/btbg_red_hover.png);
	background-size: 100% 100%;
}

.greenbg
{
	background:url(img/btbg2.png)  !important; 
	background-size: 100% 100% !important;
}

.greenbg:hover
{
	background:url(img/btbg2_hover.png) !important; 
	background-size: 100% 100% !important;
}

input[type="button"], input[type="submit"], .button, .button:visited, .button.special
{
	color: #FFF;
	background:url(img/btbg.png); 
	background-size: 100% 100%;
	text-shadow: 0 0 1px #000;
}

input[type="button"]:hover, input[type="submit"]:hover, .button:hover, .button.special:hover
{
	color: #FFF;
	background:url(img/btbg_hover.png); 
	background-size: 100% 100%;;
}

select
{
	cursor: default;
}

a, a:visited
{
	text-decoration: none;
	color: #333;
}

p
{
	padding: 2% 0;
	margin: 0;
}

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

h1
{
	font-size: 200%;
}

h2
{
	font-size: 175%;
}

h3
{
	font-size: 120%;
}

/**************
 * ID section *
 **************/

#page
{
	padding: 4vmax 0;
	min-height: 100%;
	box-sizing: padding-box;
	-moz-box-sizing: padding-box;
	-webkit-box-sizing: padding-box;
}

#content
{
	min-height: 50px;
	border-radius: 10px;
	/*border-top-left-radius: 0;*/
	background-color: #EEE;
	padding: 2%;
	margin: 0 5%;
	margin-bottom: 2%;
	margin-top: 1%;
	box-sizing: padding-box;
	
	/* Experiment */
	border: 2px dashed #39F;
	box-shadow: 0 0 0 4px #EEE, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
	text-shadow: 1px 1px #CCCCCC;
}

#topbar
{
	position: fixed;
	padding: 0 5%;
	height: 3vmax;
	line-height: 3vmax;
	min-width: 100%;
	background-color: rgba(0,0,0,0.03);
	z-index: 99;
	border-bottom: 2px solid rgba(0,0,0,0.05);
	box-sizing: border-box;
	color: #ddd;
}

#topbar a
{
	line-height: 1.3em;
	/*font-size: 0.6em;*/
	height: auto;
	color: #fff;
	/*padding: 2% 0.5em;*/
	padding: 0.1em 0.8em;
	border: 0px solid #000;
	background:url(img/btbg.png); 
	background-size: 100% 100%;;
	display: inline-block;
	border-radius: 5px;
	box-sizing: border-box;
	text-shadow: 0 0 1px #000;
}

#topbar a:hover
{
	color: #fff;
	border: 0px solid #000;
	background:url(img/btbg_hover.png); 
	background-size: 100% 100%;;
	border-radius: 5px;
}

#topbar > .left-box
{
	height: 100%;
	max-width: none;
}

#topbar > .right-box
{
	height: 100%;
}

#title
{
	background-color: #2c76a1;
	background: url(img/btbg.png);
	background-size: 100% 100%;
	padding: 1% 0;
	text-align: center;
	width: 40%;
	margin-left: 5%;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: #EEE;
	text-shadow: 0 0 3px #000;
}

.week-event-list
{
	display: table;
	width: 100%;
	table-layout: fixed;
	border: 0;
	/*background-image: url(img/bg.jpg);
	background-repeat: repeat;*/
}

.week-event-list-head
{
	display: table;
	width: 100%;
	table-layout: fixed;
	border: 0;
}

.week-event-list-head > .day
{
	display: table_cell;
	text-align: center;
	font-size: 100%;
	border-bottom: 2px solid #333;
	padding: 0.7% 0;
}

.day:last-child
{
	border-right: 2px solid #333;
}

.day
{
	font-size: 70%;
	border-left: 2px solid #333;
	display: table-cell;
	box-sizing: border-box;
}

.day > div
{
	font-size: 0.75em;
}

.event
{
	display: block;
	padding: 3%;
	margin: 7%;
	border-radius: 5px;
	background-color: #ddd;
	box-sizing: padding-box;
	word-wrap: break-word;
}

.event:hover
{
	background-color: #ccc;
}

.login-box
{
	background-color: #EEE;
	width: 33vmax;
	box-shadow: 0 0 0 4px #EEE, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
	padding: 2%;
	box-sizing: padding-box;
	border-radius: 10px;
	border: 2px dashed #39F;
	text-shadow: 1px 1px #CCCCCC;
}


.login-box > div
{
	white-space: nowrap;
	margin-bottom: 5%;
}

.login-box > div:last-child
{
	margin-bottom: 0;
	text-align: right;
}

.login-box > div:last-child > input
{
	width: auto;
}

.login-box > div > span
{
	width: 30%;
	display: inline-block;
}

.login-box .forgot
{
	margin-right: 5%;
}

.login-box > div > input
{
	width: 70%;
}

.detail-box > .left-box
{
	width: 40%;
}

.detail-box > .left-box img
{
	width: 100%;
	margin-top: 1%;
}

.detail-box > .right-box
{
	width: 55.75%;
	max-width: none;
}

.detail-box > .right-box .details
{
	border-bottom: 0.1em solid #333;
	margin-bottom: 2%;
}

.detail-box > .right-box > p
{
	border-bottom: 0.1em solid #333;
	font-size: 70%;
	white-space: pre-wrap;
}

.detail-box > .right-box .details > div
{
	margin-top: 2%;
	font-size: 70%;
}

.detail-box > .right-box .details > div:last-child
{
	margin: 2% 0;
}

.detail-box > .right-box .details > div > span
{
	display: inline-block;
	width: 25%;
}

.detail-box .button.print
{
	display: inline-block;
	margin-top: 5%;
	float: right;
}

.add-member-box h3
{
	margin-bottom: 2%;
}

.add-member-box input[type="text"]
{
	margin-right: 2%;
	width: 25%;
}

.add-member-box select
{
	margin-right: 2%;
}

.add-member-box > div:last-child
{
	text-align: right;
}

.add-member-box .members > div
{
	margin-bottom: 2%;
}

.add-box > div
{
	margin-bottom: 2%;
}

.add-box > div > span:first-child
{
	display: inline-block;
	width: 20%;
}

.add-box > div > input[type="text"],
.add-box > div > textarea
{
	width: 58%
}

.add-box > div > textarea
{
	height: 5.3em;
}

.add-box input[type="number"],
.add-box > .date > select
{
	width: 10%;
	margin-right: 2%;
}

.add-box input[name="cent"], .add-box input[name="startHour"], .add-box input[name="startMin"], .add-box input[name="endHour"], .add-box input[name="endMin"], .add-box input[name="endDay"], .add-box input[name="startDay"]
{
	width: 3em;
}

.add-box > div:last-child
{
	margin-bottom: 0;
	text-align: right;
}

.add-box > div:nth-child(2) > span
{
	vertical-align: top;
}

.reg-box > div > span
{
	display: inline-block;
	width: 32%;
	margin: 1%;
	text-align: right;
}

.reg-box > div > input, .reg-box > div > select
{
	margin-right: 1%;
	width: calc(30% + 4em);
}

.reg-box > div > .smallinp
{
	margin-right: 1%;
	width: 29%;
}

.reg-box > div > input[type="submit"]
{
	margin-left: 18%;
	width: 15%;
}

.tlight
{
	border-radius: 1vh;
	height: 2vh !important;
	width: 2vh !important;
	display: inline-block;
	/*border: 0.5vh solid #333;*/
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.tlight.red
{
	background-color: #ff0000;
}

.tlight.green
{
	background-color: #00ff00;
}

.tlight.yellow
{
	background-color: #ffff00;
}

.tlight.orange
{
	background-color: #ffc600;
}

.error
{
	border: 2px solid #a20000;
	background-color: #d13131;
	padding: 0 2%;
	border-radius: 10px;
	text-shadow: 1px 1px #a20000;
	color: #333;
	margin-bottom: 2%;
	word-wrap: break-word;
	white-space: normal !important;
	overflow: hidden;
	text-shadow: none;
}

.info
{
	border: 2px solid #39F;
	background-color: #69adf0;
	padding: 0 2%;
	border-radius: 10px;
	text-shadow: 1px 1px #39F;
	color: #111;
	margin-bottom: 2%;
	word-wrap: break-word;
	overflow: hidden;
	white-space: normal !important;
}

.info > a
{
	text-decoration: underline;
	color: #000000;
}

.event-list > div
{
	padding: 2%;
	border-bottom: 2px solid #333;
}

.event-list > div:last-child
{
	border-bottom: 0;
}

.event-list > div > .left-box
{
	max-width: 70%;
}

.event-list > div > .right-box > .buttons
{
	text-align: right;
}

.date
{
	margin-bottom: 2%;
}

.date > *
{
	margin-right: 2%;
}

.email-box > div
{
	margin-bottom: 2%;
}

.email-box > div:last-child
{
	margin: 0;;
}

.email-box > div > span
{
	display: inline-block;
	width: 10%;
}

.email-box > div input[type="text"]
{
	width: 90%;
}

.email-box > div input[type="radio"]
{
	width: 10%;
}

.email-box  .buttons
{
	text-align: right;
}

.email-box > div select,
.email-box > div label
{
	width: 45%;
	display: inline-block;
}

.email-box > div.text
{
}

.email-box > div textarea
{
	width: 100%;
	min-height: 30vw;
}

.user-list > div:first-child > div:first-child
{
	font-weight: bold;
}

.user-list > div > div
{
	margin: 0.4% 0;
	padding: 0.2% 0 0.4%;
	width: 30%;
	border-bottom: 1px dotted #666;
	display: inline-block;
}

.oldMember input[type="text"]
{
	width: 25%;
	margin: 0.5% 1% 0.5% 0;
}

.newMember input[type="text"]
{
	width: 12%;
	margin: 0.5% 1% 0.5% 0;
}

.newMember select
{
	width: 25%;
	margin: 0.5% 1% 0.5% 0;
}

/******************
 * helper classes *
 ******************/
 
 .button
 {
	
 }

.left-box
{
	height: 100%;
	max-width: 50%;
	float: left;
}

.right-box
{
	height: 100%;
	max-width: 50%;
	float: right;
}

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

.vcenter
{
	text-align: center;
	height: 100%;
}

.vcenter:before
{
	content: '';
	display: inline-block;
	height: 15%;
	vertical-align: middle;
	margin-right: -0.25em;
}

.hide
{
	display: none;
}

.vcenter > *
{
	display: inline-block;
	text-align: initial;
	vertical-align: middle;
}