body {background: #f3f3f3; 
			padding: 20px;}

a:active, a:link, a:visited {color: #21759b; text-decoration: none}
a:hover {color: #333333; text-decoration: underline}

#main {width: 999px; 
			 margin: 0 auto;}

#header {font: bold 32px/1.0cm "Trebuchet MS", Arial, Tahoma; 
				 color: #21759b;
				 text-align: center;
				 z-index: 1;}

.header {width: 979px;
				 padding: 4px 10px 4px;
				 background: #797979;
				 border: 1px solid #dfdfdf;
				 font: bold 16px/0.45cm Tahoma, Verdana, Arial; 
				 color: #ffffff;
				 margin-top: 20px;
				 position: relative;
				 z-index: 1;}

.content {width: 979px;
					padding: 8px 10px 10px;
					background: #ffffff;
					border: 1px solid #dfdfdf;
					font: normal 12px/0.45cm Tahoma, Verdana, Arial;
					color: #777777;
					z-index: 1;}

.wrapper {margin: 10px 0px 10px; position: relative;}
.motors {margin: 0px !important;}
.wrapper:hover {background: #e8e8e8;}
.motors:hover {background: transparent !important;}
.closer {display: none; position: absolute; top: 4px; right: 10px;}
.wrapper:hover .closer {display: block;}
#w-1:hover .closer {display: none !important}

#add {display: block; width: 100px; height: 100px; border: 2px solid #aeaeae; background: transparent url('images/gears/add.png') no-repeat top center;}

.driver {width: 100px; height: 100px; border: 2px solid #aeaeae; background: transparent url('images/gears/driver.png') no-repeat top center; float: left; margin-right: 10px; position: relative; cursor: pointer;}
.follower {width: 100px; height: 100px; border: 2px solid #aeaeae; background: transparent url('images/gears/follower.png') no-repeat top center;  float: left; margin-right: 10px; position: relative; left: 0px; cursor: pointer;}
.output {height: 100px;}

.drivergears {position: absolute; top: 105px; left: 0px; display: none; z-index: 2; width: 850px;}
.followergears {position: absolute; top: 105px; left: 112px; display: none; z-index: 2; width: 850px;}
.gear, .motor {width: 100px; height: 100px; border: 2px solid #aeaeae; float: left; position: relative; cursor: pointer;}
.gear span {display: block; width: 22px; height: 22px; padding: 78px 78px 0px 0px; background: transparent url('images/dot.png') no-repeat top center; color: #ffffff; text-align: center; line-height: 22px;}
.wg1 {background: transparent url('images/gears/wg1.png') no-repeat top center;}
.g8 {background: transparent url('images/gears/g8.png') no-repeat top center;}
.g12b {background: transparent url('images/gears/g12b.png') no-repeat top center;}
.g12db {background: transparent url('images/gears/g12db.png') no-repeat top center;}
.g14 {background: transparent url('images/gears/g14.png') no-repeat top center;}
.g16 {background: transparent url('images/gears/g16.png') no-repeat top center;}
.g16wc {background: transparent url('images/gears/g16wc.png') no-repeat top center;}
.g20b {background: transparent url('images/gears/g20b.png') no-repeat top center;}
.g20bo {background: transparent url('images/gears/g20bo.png') no-repeat top center;}
.g20db {background: transparent url('images/gears/g20db.png') no-repeat top center;}
.d24, .d16 {background: transparent url('images/gears/d24.png') no-repeat top center;}
.d28n {background: transparent url('images/gears/d28n.png') no-repeat top center;}
.d28o {background: transparent url('images/gears/d28o.png') no-repeat top center;}
.g24 {background: transparent url('images/gears/g24.png') no-repeat top center;}
.g24c {background: transparent url('images/gears/g24c.png') no-repeat top center;}
.g24wc {background: transparent url('images/gears/g24wc.png') no-repeat top center;}
.g36 {background: transparent url('images/gears/g36.png') no-repeat top center;}
.g40 {background: transparent url('images/gears/g40.png') no-repeat top center;}
.t56n {background: transparent url('images/gears/t56n.png') no-repeat top center;}
.t56o {background: transparent url('images/gears/t56o.png') no-repeat top center;}
.g168 {background: transparent url('images/gears/g168.png') no-repeat top center;}
.clear {background: transparent url('images/gears/clear.png') no-repeat top center;}
.driver:hover, .follower:hover, .gear:hover, .motor:hover {border: 2px solid #21759b;}
.extra, #total, #c-output, #speed {display: none;}
.excerpt {padding: 6px; border: 1px solid #aeaeae;}
.loading {width: 100%; height: 100px; background: transparent url('images/loading.gif') no-repeat center;}

#drive-motor {width: 100px; height: 100px; border: 2px solid #aeaeae; background: transparent url('images/motors/drive.png') no-repeat top center; margin-top: 10px; position: relative; cursor: pointer;}
#m-output {position: absolute; top: 28px; left: 110px;}
#motors {position: absolute; top: 132px; left: 0px; display: none; z-index: 2; width: 816px;}
.mpfm {background: transparent url('images/motors/pfm.png') no-repeat top center !important;}
.mpfxl {background: transparent url('images/motors/pfxl.png') no-repeat top center !important;}
.mnxt {background: transparent url('images/motors/nxt.png') no-repeat top center !important;}
.mrc1 {background: transparent url('images/motors/rc1.png') no-repeat top center !important;}
.mrc2 {background: transparent url('images/motors/rc2.png') no-repeat top center !important;}
.m71427 {background: transparent url('images/motors/71427.png') no-repeat top center !important;}
.m43362 {background: transparent url('images/motors/43362.png') no-repeat top center !important;}
.m47154 {background: transparent url('images/motors/47154.png') no-repeat top center !important;}
.m2838 {background: transparent url('images/motors/2838.png') no-repeat top center !important;}
.mtrain {background: transparent url('images/motors/train.png') no-repeat top center !important;}
.mmicromotor {background: transparent url('images/motors/micromotor.png') no-repeat top center !important;}

#c-wrapper {position: relative;}
#c-liftarms {width: 282px; height: 270px; margin-top: 10px;}
#c-liftarms .liftarm {width: 47px; height: 45px; float: left; background: transparent url('images/liftarm.png') no-repeat top center; cursor: pointer;}
#c-liftarms .liftarm:hover {background-position: 0px -90px;}
#c-liftarms .input, #c-liftarms .input:hover {background-position: 0px -135px; cursor: default;}
#c-liftarms .inactive, #c-liftarms .inactive:hover {background-position: 0px -180px; cursor: default;}
#c-liftarms .active, #c-liftarms .active:hover {background-position: 0px -45px; cursor: default;}
#c-bricks {width: 276px; height: 330px; display: none;}
#c-bricks .brick {width: 46px; height: 55px; float: left; background: transparent url('images/brick.png') no-repeat top center; cursor: pointer;}
#c-bricks .brick:hover {background-position: 0px -110px;}
#c-bricks .input, #c-bricks .input:hover {background-position: 0px -165px; cursor: default;}
#c-bricks .top, #c-bricks .top:hover {background-position: 0px -275px; cursor: default;}
#c-bricks .inactive, #c-bricks .inactive:hover {background-position: 0px -220px; cursor: default;}
#c-bricks .active, #c-bricks .active:hover {background-position: 0px -55px; cursor: default;}
#c-output {margin-top: 10px;}

#footer {padding: 20px 0px 0px;
				 text-align: center;
				 border-top: 1px solid #dfdfdf;}
#footer img {border: 0px;
						 margin: 0px 20px 0px;}