/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { font-family: "Times New Roman",Arial,Georgia,Serif;background-color: #ccc;font-size: 13px; color: #666666;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}	
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
button {background:none;border:none;color: #fff;text-align:right;float: left;margin:2px;}
.button p, .Switch p, .wire-switch p{
display: block;
margin-top: 8px;
margin-right: 3px;
-webkit-margin-before: 0.2em;
-webkit-margin-after: 0.2em;
float:right;
color: #fff;
}
	
/* Structure */
#wrapper {width: 94%;max-width: 1920px;margin: auto;padding: 2%;	} 
#slide {width: 40%;margin-right: 2%;float: left;min-width:480px;}
#truthtable {width: 40%;margin-right: 2%;float: left;min-width:400px;}			
	aside {width: 10%;min-width:200px;float: left;}
	nav {float: left;}

.anim_1s  {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.init,
.bulb-and,
.battery-and,
.battery-1V1Cand {
  -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
  -moz-transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
  -o-transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
  -ms-transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
  transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
}
.bulb-or,
.battery-or,
.battery-1V1Cor {
  -webkit-transform: translate(0px, 25px);
  -moz-transform: translate(0px, 25px);
  -o-transform: translate(0px, 25px);
  -ms-transform: translate(0px, 25px);
  transform: translate(0px, 25px);
} 
.bulb-nor,
.battery-nor{
  -webkit-transform: translate(0px, 25px);
  -moz-transform: translate(0px, 25px);
  -o-transform: translate(0px, 25px);
  -ms-transform: translate(0px, 25px);
  transform: translate(0px, 25px);
} 
.bulb-nand,
.battery-1V1Cnand,
.battery-nand {
  -webkit-transform: translate(0px, 20px);
  -moz-transform: translate(0px, 20px);
  -o-transform: translate(0px, 20px);
  -ms-transform: translate(0px, 20px);
  transform: translate(0px, 20px);
} 
.rotate0 {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}	
.rotate,.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}	
.rotate180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}	
.show {opacity: 1.0;}
.scale_show {  
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
 }
.hide {opacity: 0.0;}
.scale_hide {  
  -webkit-transform: scale(0.01, 0.01);
  -moz-transform: scale(0.01, 0.01);
  -o-transform: scale(0.01, 0.01);
  -ms-transform: scale(0.01, 0.01);
  transform: scale(0.01, 0.01);
  height:0px;width:0px;
 }
.button {
position: relative;
text-align:center;
padding: 10px;
margin-right: 5px;
margin-bottom: 5px;
height: auto;
background-color: #fff;
border-radius: 1em;
box-shadow:3px 3px 3px #666;
-webkit-box-shadow:3px 3px 3px #666;
-moz-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
color: #000;
}
.Switch {
position: relative;
text-align:center;
padding: 0px;
margin-right: 3px;
margin-bottom: 3px;
height: auto;
box-shadow:3px 3px 3px #666;
-webkit-box-shadow:3px 3px 3px #666;
-moz-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
color: #fff;
}
.Switch.True {background: url(../images/mnu_true.png) no-repeat center center;}
.Switch.False {background: url(../images/mnu_false.png) no-repeat center center;}

span.green,span.red  {
text-align:center;
padding: 2px;
height: auto;
border-radius: 1em;
}
span.red,.button.red {background:#c75757;}
span.green,.button.green {background:#5ba65b;}

/* Header H1 */
header h1 {
	height: 70px;
	text-align: center;
	width: 100%;
	float: left;
	display: block;
	}
		
/* menu */
        #menuA,#menuB {
            margin: 0;
            padding: 0;
            width: 175px;
            list-style-type: none;
            color: #000000;
            line-height: 120%;
        }

        #menuA a,#menuB a {
            display: block;
            font-weight: normal;
            text-decoration: none;
        }

        #menuA ul,#menuB ul {
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        #menuA li,#menuB li {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        #menuA li a,#menuB li a {
            font-weight: bold;
            width: 160px;
            padding: 5px 0 0 15px;
            display: block;
            color: #000000;
            background-image: url(../images/ha-header.jpg);
            height: 25px;
        }

        #menuA li a.closed,#menuB li a.closed {
            color: #000000 !important;
            background-image: url(../images/ha-header.jpg) !important;
        }

        #menuA li.firstitem a.closed,#menuB li.firstitem a.closed {
            color: #000000 !important;
            background-image: url(../images/ha-header-first.png) !important;
        }

        #menuA li.lastitem a.closed,#menuB li.lastitem a.closed {
            color: #000000 !important;
            background-image: url(../images/ha-header-last.png) !important;
        }

        #menuA li li,#menuB li li {
            border-left: 2px solid #E5E5E5;
            border-right: 2px solid #E5E5E5;
            padding: 10px;
            /*height: auto;*/
        }

        #menuA li a.opened,#menuB li a.opened {
            background-image: url(../images/ha-header-active.jpg);
            color: #FFFFFF;
        }

        #menuA li.firstitem a.opened,#menuB li.firstitem a.opened {
            background-image: url(../images/ha-header-first-active.png);
            color: #FFFFFF;
        }

        #menuA li.lastitem li,#menuB li.lastitem li {
            margin-bottom: -4px;
        }

        #menuA li.lastitem ul,#menuB li.lastitem ul {
            background-image: url(../images/ha-footer.png);
            background-repeat: no-repeat;
            background-position: bottom;
            padding-bottom: 4px;
        }

/* 
 * umbrUI checkboxes by @simurai
 * Usage: <input type="checkbox" data-icon1="P" data-icon2="v" /> 	
 */


/* ----------- Checkbox */


input[type="checkbox"] {
	-webkit-appearance:none;	/* Remove Safari default */
	outline: none;
	width: 120px;
	height: 40px;
	
	position: relative;
	border-radius: 6px;
	background-color: #ccc;
	-webkit-background-clip: padding-box;
	
	border: 0;
	border-bottom: 1px solid transparent;
	-webkit-perspective: 200;
}

input[type="checkbox"]:before, input[type="checkbox"]:after {
	font: bold 22px/32px sans-serif;
	
	text-align: 	center;
	
	position: 	absolute;
	z-index: 	1;
    
    width: 			56px;
	height: 		30px;
    top: 			4px;
    
    border: 0;
	border-top: 1px solid rgba(255,255,255,0.15);
}

input[type="checkbox"]:before {
	content: 	attr(data-icon1);
	left: 		4px;
	border-radius: 3px 0 0 3px;

}

input[type="checkbox"]:after {
	content: 	attr(data-icon2);
	right: 		4px;
	border-radius: 0 3px 3px 0;
}


/* ----------- checked/unchecked */

/* unchecked */
input[type="checkbox"] {
	-webkit-border-image: -webkit-gradient(linear, 100% 0%, 0% 0%, 
							from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 
							color-stop(.1,rgba(255,255,255,.05)),
							color-stop(.3,rgba(5,137,200,0.4)),
							color-stop(.45,rgba(255,255,255,.05)),
							color-stop(.9,rgba(255,255,255,.1)) 
							)100% 100%;
	
	background-image: -webkit-gradient(
		linear, right top, left top,
		color-stop( 0, 	hsl(120,30%,10%) ),
		color-stop( 0.14, 	hsl(120,30%,50%) ),
		color-stop( 0.15, 	hsl(120,30%,10%) )
	);						
	-webkit-box-shadow: inset #5ba65b -7px 0 1px, inset #5ba65b 0 -5px 10px, inset #5ba65b 0 3px 3px;
}
input[type="checkbox"]:after {
	background-image: -webkit-gradient(linear, 70% top, 40% bottom, 
		from( hsl(120,30%,27%) ),to( hsl(120,30%,22%) ) 
	);
	border-right: 1px solid transparent;
	-webkit-border-image: -webkit-gradient(linear, left bottom, left top, 
							from(rgba(255,255,255,0)), 
							color-stop(.2,rgba(255,255,255,0)),
							color-stop(.4,rgba(255,255,255,.5)),
							to(rgba(255,255,255,.05))
							)10% 100%;
	
	-webkit-box-shadow: rgba(0,0,0,.6) 8px 3px 10px;
	-webkit-transform: rotateY(-30deg) scaleX(.9) scaleY(1.1) translateX(-8px);
}


/* checked */
input[type="checkbox"]:checked {
	-webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
							from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 
							color-stop(.1,rgba(255,255,255,.05)),
							color-stop(.3,rgba(5,137,200,0.4)),
							color-stop(.45,rgba(255,255,255,.05)),
							color-stop(.9,rgba(255,255,255,.1)) 
							)100% 100%;
	
	background-image: -webkit-gradient(
		linear, left top, right top,
		color-stop( 0, 	hsl(120,30%,10%) ),
		color-stop( 0.14, 	hsl(120,30%,50%) ),
		color-stop( 0.15, 	hsl(120,30%,10%) )
	);						
	-webkit-box-shadow: inset #5ba65b 7px 0 1px, inset #5ba65b 0 -5px 10px, inset #5ba65b 0 3px 3px;
}
input[type="checkbox"]:checked:before {
	background-image: -webkit-gradient( linear, 30% top, 60% bottom, 
		from( hsl(120,30%,27%) ),to( hsl(120,30%,22%) ) 
	);
	border-left: 1px solid transparent;
	-webkit-border-image: -webkit-gradient(linear, left bottom, left top, 
							from(rgba(255,255,255,0)), 
							color-stop(.2,rgba(255,255,255,0)),
							color-stop(.4,rgba(255,255,255,.5)),
							to(rgba(255,255,255,.05))
							)10% 100%;

	-webkit-box-shadow: rgba(0,0,0,.6) -8px 3px 10px;
	-webkit-transform: rotateY(30deg) scaleX(.9) scaleY(1.1) translateX(8px);
}


/* ----------- active/inactve */

/* Active */
input[type="checkbox"]:before, input[type="checkbox"]:checked:after {
	color: hsl(120,30%,80%);
	text-shadow: 	rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px;
	-webkit-transform: none;
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(120,30%,20%) ), to( hsl(120,30%,15%) )
	);
	-webkit-border-image: none;
	-webkit-box-shadow: none;
	
	z-index: 	2;					
}

/* Inactive */
input[type="checkbox"]:after, input[type="checkbox"]:checked:before {
	color: hsl(120,30%,10%);
	text-shadow: rgba(255,255,255,.1) 0 -1px 0;
	-webkit-box-reflect: none;
	z-index: 	1;
}




/* ----------- hover */

input[type="checkbox"]:hover {
	cursor: pointer;
}

input[type="checkbox"]:hover:before {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(120,30%,20%) ), to( hsl(120,30%,15%) )
	);

}
input[type="checkbox"]:hover:after {
	background-image: -webkit-gradient(linear, 70% top, 40% bottom, 
		from( hsl(120,30%,26%) ),to( hsl(120,30%,22%) ) 
	);
}

input[type="checkbox"]:checked:hover:before {
	background-image: -webkit-gradient( linear, 30% top, 60% bottom, 
		from( hsl(120,30%,26%) ),to( hsl(120,30%,22%) ) 
	);

}
input[type="checkbox"]:checked:hover:after {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(120,30%,20%) ), to( hsl(120,30%,15%) )
	);
}