/********************/
/* GENERAL SETTINGS */
/********************/
body {
    background-color: beige;
    font-size: 16px;
    margin-top: 50px;
    margin-bottom: 500px;
    margin-right: 150px;
    margin-left: 150px;
    
}

#menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.clear {
    clear: both;
}


/********************/
/* EXPANDABLE LIST  */
/********************/
#listContainer{
  margin-top:15px;
}

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
    
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url(../img/expanded.png);
}
#expList {
    clear: both;
}

.listControl{
  margin-bottom: 15px;
    position: fixed;
    top: 30px;
    right: 50px;
}
.listControl a {
    border: 1px solid #555555;
    color: #555555;
    cursor: pointer;
    height: 1.5em;
    line-height: 1.5em;
    margin-right: 5px;
    padding: 4px 10px;
}
.listControl a:hover {
    background-color:#555555;
    color:#222222; 
    font-weight:normal;
}


/*******************/
/**** Checkboxes****/
/*******************/



form {
	margin: 40px 0;
}

div {
	clear: both;
	margin: 0 50px;
}

#label1 {width: 170px;}

#label2 {width: 190px;}

#label3 {width: 230px;}

#label4 {width: 250px;}

label {
  border-radius: 3px;
  border: 1px solid #D1D3D4
}

/* hide input */
input.radio:empty {
	margin-left: -99999px;
}

/* style label */
input.radio:empty ~ label {
	position: relative;
	float: left;
	line-height: 2.5em;
	text-indent: 3.25em;
	margin-top: 2em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input.radio:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 2.5em;
	background: #D1D3D4;
	border-radius: 3px 0 0 3px;
}

/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #C2C2C2;
}

input.radio:hover:not(:checked) ~ label {
	color: #888;
}

/* toggle on */
input.radio:checked ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #FFFFFF;
	/*background-color: #4DCB6D;*/
}
#radio1.radio:checked ~ label:before {
	background-color: #FF3333;
}

#radio2.radio:checked ~ label:before {
	background-color: #FFFF33;
}

#radio3.radio:checked ~ label:before {
	background-color: #4DCB6D;
}

#radio4.radio:checked ~ label:before {
	background-color: #0066FF;
}

input.radio:checked ~ label {
	color: #777;
}

/* radio focus */
input.radio:focus ~ label:before {
	box-shadow: 0 0 0 3px #999;
}

.tradio{position:relative;
	/*bottom:10px;*/
	right:100px;
	z-index:9999999;
}

/*******************/
/****  OTHER  *****/
/*****************/

table{
    width:100%;
}

.table input{
    display:block;
    width:80%;
    margin-left:auto;
    margin-right:auto;
    font-weight: normal;
}

img {opacity:0;
-moz-transition: opacity .5s; /* Firefox 4 */
-webkit-transition: opacity .5s; /* Safari and Chrome */
-o-transition: opacity .5s;
transition: opacity .5s;
}