Roosters/css/style.css

@font-face
{
font-family: "Levenim";
src: url('lvnm.ttf')
}

/*Main Components */

#wrapper {
	position: absolute;
	width: 100%;
	height: auto;
	top: 40px;
	left: 0px;
}

/* Top Bar */
#top {
	position: fixed;
	top: 0px;
	left: 0px;
	display: block;
	width: 100%;
	height: 40px;
	z-index: 100;
	-webkit-box-shadow: 0px 1px 5px #555;
	-moz-box-shadow: 0px 1px 5px #555;
	box-shadow: 0px 1px 5px #555;
	background-color: #D2D2D2;
}

#top_rel {
	position: relative;
	top: 0px;
	left: 0px;
	display: block;
	width: 100%;
	height: 40px;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

#top_abs {
	position: absolute;
	top: 0px;
	left: 50%;
	margin-left: -410px;
	display: block;
	width: 700px;
	height: 40px;
}

/* Content Container (Backdrop) */
#main_top {
	width: 100%;
	height: 170px;
	top: 40px;
	left: 0px;
	display:none;
	-webkit-box-shadow:inset 0px -1px 6px 0px #555;
	-moz-box-shadow:inset 0px -1px 6px #555;
	box-shadow:inset 0px -1px 6px #555;
}

#main_top_content {
	position: absolute;
	width: 600px;
	height: 170px;
	display:none;
	top: 0px;
	left: 50%;
	margin-left: -300px;
	z-index: 75;
	text-align: center;
}

/* Main content */
#main {
	position: relative;
	width: 100%;
	height: auto;
	display:block;
	top: 0px;
	left: 0px;
}

#main_content {
	position: absolute;
	width: 600px;
	min-height: 80%;
	display:block;
	top: 0px;
	left: 50%;
	margin-left: -300px;
	z-index: 50;
	padding: 20 0 5 10;
}

#overlay {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: #D1D1D1;
	z-index: 150;
	font-size: 25px;
	text-align: center;
	color: #5F5F5F;
}

#login {
	position: absolute;
	top: 40%;
	left: 50%;
	margin-left: -175px;
	margin-top: -120px;
	width: 310px;
	min-height: 140px;
	padding: 20 20 0 20;
	z-index: 10;
	-webkit-box-shadow: 2px 2px 10px 3px #666;
	-moz-box-shadow: 2px 2px 10px 3px #666;
	box-shadow: 2px 2px 10px 3px #666;
}

#load {	
	position: absolute;
	top: 36%;
	left: 47%;
	width: auto;
	height: auto;
	display: none;	
}

a {
	text-decoration: none;
	color: #FFF;
}

/* Buttons */
a.button_top,
a.button_top:visited {
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	
	text-decoration: none;
	font-size: 16px;
	display: block;
	height: 30px;
	width: 180px;
	text-align: center;
	padding: 10 0 0 0;
	border-color: #B2B2B2 !important;
	border-left-style: solid;
	border-width: 1px;
	color: #5F5F5F;
}

a.button_top_first,
a.button_top_first:visited {
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	
	text-decoration: none;
	font-size: 16px;
	display: block;
	height: 35px;
	width: 40px;
	text-align: center;
	padding: 5 0 0 0;
	color: #5F5F5F;
}

a.button_top:hover,
a.button_top_first:hover {
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

a.button_top:active,
a.button_top_first:active, 
a.button_login:active{
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}

a.current {
	-webkit-transition: all 0.8s ease-in;
	-moz-transition: all 0.8s ease-in;
	transition: all 0.8s ease-in;
}

a.uitloggen {
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	
	text-decoration: none;
	font-size: 12px;
	display: block;
	height: 27px;
	width: 120px;
	text-align: center;
	padding: 13px 0px 0px 0px;
	border-color: #B2B2B2 !important;
	border-style: none solid none none;
	border-width: 1px;
	color: #9F9F9F;
	margin: 0px;
}

a.uitloggen:hover {
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	color: #5F5F5F;
}



img {
	border: none;
	text-decoration: none;
}

select {
	width: 150px;
	border='0';
	background-color: #DDD;

	-webkit-box-shadow: 2px 2px 10px 3px #666;
	-moz-box-shadow: 2px 2px 10px 3px #666;
	box-shadow: 2px 2px 10px 3px #666;
}

/*
td, th {
	text-align: left;
}
*/

.label {
	text-align: none;
	font-size: 10px;
	display: inline;
}

table.rooster {
	-webkit-box-shadow: 0px 1px 5px #555;
	-moz-box-shadow: 0px 1px 5px #555;
	box-shadow: 0px 1px 5px #555;
	margin: 0px;
	padding: 0px;
}

table.rooster td.content {
	border-style: solid;
	border-color: #333;
	border-width: 1px;
	font-size: 14px;
	padding: 4px;
	margin: 0px;
	height: 60px;
	width: 100px;
}

table.rooster td.header {
	border-style: solid;
	border-color: #333;
	border-width: 1px;
	font-size: 14px;
	padding: 4px;
	margin: 0px;
}

table.rooster td.uur {
	display: block;
	background-color: #C2C2C2;
	text-align: center;
	border-style: none solid solid solid;
	
}

table.rooster td.dag {
	display: block;
	border-style: solid solid solid none;
	background-color: #C2C2C2;
	text-align: center;
	padding: 1 4 0 4;
}

table.rooster td.vrij {
	display: block;
	border-style: none solid solid none;
	background-color: #979797;
	background-image: url('../images/vrij.png');
}

table.rooster td.les {
	display: block;
	border-style: none solid solid none;
	background-color: #A3A3A3;
	padding: 0 0 0 10;
}	

table.rooster td.les:hover {
	background-color: #838383;
}	

table.rooster td.corner {
	display: block;
	border-style: solid none none solid;
	background-color: #C2C2C2;
}




input[type="text"],
input[type="text"]:hover,
input[type="password"],
input[type="password"]:hover,
input[type="email"],
input[type="email"]:hover {
	width: 160px;
	border: none;
	border-style: solid;
	border-width: 1px;
	border-color: #BBB;
}

input[type="search"]:hover,
input[type="search"] {
	border: none;
	border-style: solid;
	border-width: 1px;
	border-color: #BBB;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus {
	outline-color:#777;
}

.login_but {
	 color: #E2E2E2;
	 font-size: 15px;
	 width: 120px;
	 height: 30px;
	 border: none;
	 margin: 0;
	 padding: 0;
	 margin-left: 1px;
	 background-color: #777;
}

.login_but:hover {
	 color: #F0F0F0;
	 font-size: 15px;
	 width: 120px;
	 height: 30px;
	 border: none;
	 margin: 0;
	 padding: 0;
	 margin-left: 1px;
	 background-color: #888;
}

.login_but:active {
	 color: #C2C2C2;
	 font-size: 15px;
	 width: 120px;
	 height: 30px;
	 border: none;
	 margin: 0;
	 padding: 0;
	 margin-left: 1px;
	 background-color: #AAA;
}

h1, h2, h3, h4, h5, h6 {
		display: inline;
}

ul.stijl,
li.stijl {
	display: inline;
	margin:	none;
	margin-right: 10px;
	padding: none;
	-webkit-padding-start: 0px;
}

img.stijl {
	border-style: solid;
	border-width: 2px;
	border-color: #999;
}

img.stijl:hover {
	border-style: solid;
	border-width: 2px;
	border-color: #FFF;
}

img.current {
	border-style: solid;
	border-width: 2px;
	border-color: #FFF;
}

ul.lokaal {
	display: inline;
	float: left;
}

span.mailcontainer {
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}


/* SIDEBAR */

#sidebar {
  position: absolute;
  display:none;
  top: 0px;
  left: 0;
  width: 0px;
  height: 100%;
  background-color: #A9A9A9;
  opacity: 0.8;

  -webkit-box-shadow: 0px 1px 5px #555;
  -moz-box-shadow: 0px 1px 5px #555;
  box-shadow: 0px 1px 5px #555;
  z-index:250;
}

#sidebarcontent {
  position: absolute;
  display:none;
  top: 0px;
  left: 0;
  width: 380px;
  padding: 10px 10px 0px 10px;
  height: 100%;
  z-index:251;
}

#sidebarToggle {
  position: absolute;
  display: block;
  bottom: 100px;
  left: -57px;
  width: 140px;
  height: 30px;
  padding: 10px;
  background-color: #797979;
  opacity: 0.9;
  text-align: center;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  z-index:200;
}

a.toggler,
a.toggler:visited {
  display: block;
  text-decoration: none;
  color: #9A9A9A;
  z-index:201;
}

#sideheader {
  position: relative;
  top: 40px;
  left: 0px;
  width: auto;
  height: 50px;
}

#sideresult {
  position: relative;
  top: 80px;
  left: 0px;
  width:auto;
  height: 600px;
}

#sidecontrol {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width:auto;
  height: 80px;
}

table.bericht th,
table.bericht td {
	border-bottom-style: solid;
	border-width:1px;
	border-color: #FFFFFF;
}

table.bericht th.leftline,
table.bericht td.leftline {
	border-left-style: solid;
}