/*############################################################################*/
/*## MAIN CSS for all Sites ##################################################*/
/*############################################################################*/
body {
	padding: 0px;
	margin: 0px;
	font-family: verdana, "Open Sans", sans-serif;
    font-size: 70%;
    overflow-y: scroll;
	background: #DDDDDD;
}

/*############################################################################*/
/*## BASICS ##################################################################*/
/*############################################################################*/

/*## Inputs ##################################################################*/
input[type=text] {
    -webkit-box-sizing: border-box  !important; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box     !important;    /* Firefox, other Gecko */
    box-sizing: border-box          !important;         /* Opera/IE 8+ */     
    font-family: verdana, "Open Sans", sans-serif;
    font-size: 100%;
	border: solid 1px #FFFFFF;
	background: #FFFFFF !important;	
}
input[type=password] {
    -webkit-box-sizing: border-box  !important; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box     !important;    /* Firefox, other Gecko */
    box-sizing: border-box          !important;         /* Opera/IE 8+ */     
    font-family: verdana, "Open Sans", sans-serif;
    font-size: 100%;
	border: solid 1px #FFFFFF;
	background: #FFFFFF !important;	
}
select {
    -webkit-box-sizing: border-box  !important; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box     !important;    /* Firefox, other Gecko */
    box-sizing: border-box          !important;         /* Opera/IE 8+ */     
    font-family: verdana, "Open Sans", sans-serif;
    font-size: 100%;
    border: none;
	border: solid 1px #FFFFFF;
	background: #FFFFFF !important;	
}

button {
    -webkit-box-sizing: border-box  !important; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box     !important;    /* Firefox, other Gecko */
    box-sizing: border-box          !important;         /* Opera/IE 8+ */        
    font-family: verdana, "Open Sans", sans-serif;
    font-size: 100%;
	border: none 0px #FFFFFF;
	border-radius: 5px;
	padding: 5px;
	text-align: center;
	width: 300px;
	margin-top: 15px;
	background: #333333;
	color: #FFFFFF;
}
button:hover{
	background: #666666;
}

/*## basic formats ####################################################################*/
.c { text-align: center; }
.l { text-align: left; }
.r { text-align: right; }
.b { font-weight: 700; }
.i { font-style: italic; }

/*## border box sizing ################################################################*/
.bb {
    -webkit-box-sizing: border-box  !important; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box     !important;    /* Firefox, other Gecko */
    box-sizing: border-box          !important;         /* Opera/IE 8+ */    
}

/*## standard size for icons ##########################################################*/
.icon {
  width: 16px;
  height: 16px;
  border: none !important;
  vertical-align: middle;
}

/*## Login ##################################################################*/
.startbar{
	display: inline-block;
    width: 100%;
	text-align: left;    
    font-size: 18px;
    padding: 6px;
}
.eyecandyBox {
    position: absolute;
	display: block;
	width: 300px;
    margin-left: -150px;
    left:50%;
	top: 5%;
	height: 10%;
	margin-top: 10%;
	text-align: center;
}
.loginBox {
    position: absolute;
	display: block;
	width: 300px;
    margin-left: -150px;
    left:50%;
	top: 20%;
	margin-top: 10%;
	text-align: center;
}

/*################################################################*/
/*################################################################*/
/* @group Layouts for resolutions */
/*################################################################*/
/*# SMALLEST ###### SMALLEST SCREEN, NON-RETINA #### <= 400 px ####################*/
/*################################################################*/
@media only screen and (max-width: 400px) {

}
/*################################################################*/
/*# SMALL #### SMALL SCREEN, NON-RETINA ######################################*/
/*################################################################*/
@media only screen and (min-width: 401px) and (max-width: 550px){
 
}
/*################################################################*/
/* MIDDLE SMALL SCREEN, NON-RETINA ######################################*/
/*################################################################*/
@media only screen and (min-width: 551px) and (max-width: 700px) {
    
}
/*################################################################*/
/* MIDDLE BIG SCREEN, NON-RETINA ######################################*/
/*################################################################*/
@media only screen and (min-width: 701px) and (max-width: 900px) {

}
/*################################################################*/
/* BIG SCREEN, NON-RETINA ######################################*/
/*################################################################*/
@media only screen and (min-width: 901px) and (max-width: 1200px) {

}
/*################################################################*/
/* BIGGEST SCREEN, NON-RETINA ######################################*/
/*################################################################*/
@media only screen and (min-width: 1201px) {

    
}  

/*################################################################*/
/* RETINA SCREENS ################################################*/
/*################################################################*/
/*################################################################*/
/* GENERAL for all resolutions ###################################*/
/*################################################################*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2)     ,
only screen and (   min--moz-device-pixel-ratio: 2)     ,
only screen and (     -o-min-device-pixel-ratio: 2/1)   ,
only screen and (        min-device-pixel-ratio: 2)     ,
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	body {
		font-size: 100%;
	}

    input[type=text] {
        font-size: 100%;
        padding: 6px;
    }
    input[type=password] {
        font-size: 100%;
        padding: 6px;
    }
    select {
        font-size: 100%;
        padding: 5px;
    }	
    button {
        font-size: 120%;
        padding: 15px;
    }
	
    .icon {
      width: 24px;
      height: 24px;
    }
	
    .startbar{
		font-size: 28px;
		padding: 15px;
	}
    .login {
        font-size: 120%;
        padding: 15px;
    }
}

/*################################################################*/
/* RETINA SCREENS and resolutions ################################*/
/*################################################################*/
/*################################################################*/
/* Smallest screen, retina, stuff to override above media query ##*/
/*################################################################*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 400px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 400px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 400px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 400px),
only screen and (                min-resolution: 192dpi) and (max-width: 400px),
only screen and (                min-resolution: 2dppx)  and (max-width: 400px){
	.eyecandyBox {
		display: none;

	}

}
/*################################################################*/
/* Small screen, retina, stuff to override above media query #####*/
/*################################################################*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 401px) and (max-width: 550px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 401px) and (max-width: 550px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 401px) and (max-width: 550px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 401px) and (max-width: 550px),
only screen and (                min-resolution: 192dpi) and (min-width: 401px) and (max-width: 550px),
only screen and (                min-resolution: 2dppx)  and (min-width: 401px) and (max-width: 550px){

}
/*################################################################*/
/* Middle screen, retina, stuff to override above media query #####*/
/*################################################################*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 551px) and (max-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 551px) and (max-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 551px) and (max-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 551px) and (max-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 551px) and (max-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 551px) and (max-width: 700px){

}