/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/Pru33qjShpZSmG3z6VYwnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v18/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

body { 
	margin:0px; 
	padding:0px;  
	height:100%; 
	min-height:100%; 
	font-family: 'Roboto', sans-serif; 
	font-size:16px; 
	background: url(../img/skooly-bgcenter.jpg) no-repeat top center #fff;
}

a {color: #2393d2; text-decoration: none; FONT-WEIGHT: normal;}
a:visited {color:#2393d2; text-decoration: none; FONT-WEIGHT: normal;}
a:hover {color: #2393d2; text-decoration: underline ; FONT-WEIGHT: normal;}
a:active { color:#2393d2; text-decoration: none; FONT-WEIGHT: normal;}

#kopf {
	position: absolute;
	height: 220px;
	width: 1000px;
	vertical-align: bottom;
	left: 50%;
	margin-left: -500px;
}
#anmelden {
	float:left;
	display:block;
	height: 40px;
	margin: 178px 0 0 137px;
	text-indent:-9999px;
	width: 150px;
}
#content {
	width: 500px;
	text-align:right;
	min-height: 80px;
	margin: 0 auto;
	padding: 250px 200px 20px 0;
	/*border: 1px solid #2393d2;*/
}

h2{
	color: #0076a3;
	font-family:'Roboto', sans-serif; 
	font-size:24px;
	padding: 0;
	margin: 0;
}

#content3 {
	width: 500px;
	text-align:left;
	height: 330px;
	margin: 0 auto;
	padding: 250px 200px 70px 0;
	/*border: 1px solid #2393d2;*/
}

#content2 {
	width: 700px;
	text-align:left;
	height: 50px;
	margin: 0 auto;
	padding: 0 0 70px 0;
	/*border: 1px solid #2393d2;*/
}

#footer{
	position: fixed;
	width: 100%;
	height: 70px;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	float:left;
	background-color: #fff;
	padding-top: 10px;
	border-top: 3px solid #2393d2;
	z-index:99;
	padding-top:0px;
	text-align:center;
	padding-top: 10px;
}

.input {
	background-color: #FFFFFF;
    border: 1px solid #69c7e9;
    border-radius: 3px 3px 3px 3px;
    color: #555555;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 9px;
    padding: 4px 4px 4px 23px;
    width: 210px;
    font-family: 'Roboto', sans-serif; 
}
.user{
	background:url(../images/user.png) 4px no-repeat ;
}
.passcode{
	background:url(../images/lock.png) 4px no-repeat;
}
.schulkennzahl{
	background:url(../images/house.png) 4px no-repeat;
}
.gutscheincode{
	background:url(../images/code.png) 4px no-repeat;
}
.email{
	background:url(../images/email.png) 4px no-repeat;
}

.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Tahoma, Verdana, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-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);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

.bigrounded {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.medium {
	font-size: 12px;
	padding: .4em 1.5em .42em;
}
.small {
	font-size: 11px;
	padding: .2em 1em .275em;
}

.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
	color: #d9eef7;
	text-shadow: white 0.1em 0.1em 0.2em;
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
.blue:visited {
	color: #d9eef7;
}
/* global */
div.ui-cluetip {
	font-size: 1em;
}
.ui-cluetip-header,
.ui-cluetip-content {
	padding: 12px;
}
.ui-cluetip-header {
	font-size: 1em;
	margin: 0;
	overflow: hidden;
}

#cluetip-title #cluetip-close {
	float: right;
	position: relative;
}
#cluetip-close img {
	border: 0;
}

#cluetip-waitimage {
	width: 43px;
	height: 11px;
	position: absolute;
	background-image: url(images/wait.gif);
}
.cluetip-arrows {
	display: none;
	position: absolute;
	top: 0;
	left: -11px;
	width: 11px;
	height: 22px;
	background-repeat: no-repeat;
	background-position: 0 0;
	border-width: 0;
}
#cluetip-extra {
	display: none;
}

/***************************************
   =cluetipClass: 'default'
-------------------------------------- */

.cluetip-default {
	background-color: #d9d9c2;
}
.cluetip-default .ui-cluetip-header {
	background-color: #87876a;
}

/* default arrows */
div.cluetip-default .cluetip-arrows {
  border-width: 0;
  background: transparent none;
}
div.clue-right-default .cluetip-arrows {
  background-image: url(images/darrowleft.gif);
}
div.clue-left-default .cluetip-arrows {
  background-image: url(images/darrowright.gif);
  left: 100%;
  margin-right: -11px;
}
div.clue-top-default .cluetip-arrows {
  background-image: url(images/darrowdown.gif);
  top: 100%;
  left: 50%;
  margin-left: -11px;
  width: 22px;
  height: 11px;
}
div.clue-bottom-default .cluetip-arrows {
  background-image: url(images/darrowup.gif);
  top: -11px;
  left: 50%;
  margin-left: -11px;
  width: 22px;
  height: 11px;
}

/***************************************
   =cluetipClass: 'jtip'
-------------------------------------- */
.cluetip-jtip {
  background-color: #fff;
}
.cluetip-jtip #cluetip-outer {
  border: 2px solid #ccc;
  position: relative;
  background-color: #fff;
}

.cluetip-jtip #cluetip-inner {
  padding: 5px;
  display: inline-block;
  background-color: #fff;
}
.cluetip-jtip div#cluetip-close {
  text-align: right;
  margin: 0 5px 0;
  color: #900;
}

.cluetip-jtip .ui-cluetip-header {
  background-color: #ccc;
  padding: 6px;
/*  margin-bottom: 1em;*/
}

/* jtip arrows */
div.cluetip-jtip .cluetip-arrows {
  border-width: 0;
  background: transparent none;
}
div.clue-right-jtip .cluetip-arrows {
  background-image: url(images/arrowleft.gif);
}
div.clue-left-jtip .cluetip-arrows {
  background-image: url(images/arrowright.gif);
  left: 100%;
  margin-right: -11px;
}
div.clue-top-jtip .cluetip-arrows {
  background-image: url(images/arrowdown.gif);
  top: 100%;
  left: 50%;
  width: 22px;
  height: 11px;
  margin-left: -11px;
}
div.clue-bottom-jtip .cluetip-arrows {
  background-image: url(images/arrowup.gif);
  top: -11px;
  left: 50%;
  width: 22px;
  height: 11px;
  margin-left: -11px;
}

/***************************************
   =cluetipClass: 'rounded'
-------------------------------------- */
.cluetip-rounded {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.cluetip-rounded  .cluetip-arrows {
  border-color: #ccc;
}

/* need to be more specific here to override ThemeRoller defaults */
div.cluetip-rounded  .cluetip-arrows {
  font-size: 0;
  line-height: 0%;
  width: 0;
  height: 0;
  border-style: solid;
  background: transparent none;
}
div.clue-right-rounded .cluetip-arrows {
  border-width: 11px 11px 11px 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
div.clue-left-rounded .cluetip-arrows {
  left: 100%;
  margin-right: -11px;
  border-width: 11px 0 11px 11px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;

}
div.clue-top-rounded .cluetip-arrows {
  top: 100%;
  left: 50%;
  border-width: 11px 11px 0 11px;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}
.clue-bottom-rounded .cluetip-arrows {
  top: -11px;
  left: 50%;
  border-width: 0 11px 11px 11px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;

}
/* stupid IE6 HasLayout hack */
.cluetip-rounded #cluetip-title,
.cluetip-rounded #cluetip-inner {
  zoom: 1;
}

.prio-pos { background-color:#ff3333; color:#ffffff; }
.prio-pos-1 { background-color:#ff7700; color:#ffffff; }
.prio-zero { background-color:#dedede; color:#ffffff; }