/* CSS Document */


/***** COGS  ***********************************************************************************/


/***hook and weight***/
#hook {background:url(../img/gears/slider2.png) no-repeat right top; width:94px; height:180px; position:fixed; right:0; top:20px; z-index:16;}

#weight {width:79px; height:253px; position:fixed; right:90px; bottom:0; z-index:22;}
#weight .main {background-image:url(../img/gears/counterweight.png); width:100%; height:100%; position:relative; top:156px;}

#hook .chain, #weight .chain {background:url(../img/gears/chain.png) repeat-y center bottom; width:6px; height:1000px; position:absolute; z-index:18;}
#hook .chain {left:4px; bottom:96px;} 
#weight .chain {left:40px; bottom:90px;}

#weightshadow  {background-image:url(../img/gears/counterweight_shadow.png); width:90px; height:270px; position:fixed; right:50px; bottom:-200px;  z-index:17;}
#weightshadow .chain {background:url(../img/gears/chainShadow.png) repeat-y center bottom; width:12px; height:1000px; position:absolute; opacity:0.55;left:31px; bottom:121px;}



/***Large Cog***/
#largecog {height:100%; width:450px; position:fixed; left:65%; top:0; z-index:5;}

#cog4 {width:312px; height:312px; position:absolute; bottom:50%; right:142px; margin-bottom:-56px; z-index:1; -moz-transform:rotate(8deg); -webkit-transform:rotate(8deg); -o-transform:rotate(8deg); -ms-transform:rotate(8deg);}

#cog3a, #cog3b {width:148px; height:148px; position:absolute; bottom:50%; right:224px; margin-bottom:26px; z-index:2; -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg); -ms-transform:rotate(10deg);}
#cog3b {-moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg);}




/***RIGHT***/
#right {height:100%; width:320px; position:fixed; left:65%; top:0; margin-left:130px; z-index:7;}
#rightshadow {height:100%; width:320px; position:fixed; left:50%; top:0; margin:80px 0 0 190px; z-index:2; opacity:0.25;}


/*turning chains*/
#mfchain {width:26px; height:50%; position:absolute; bottom:50%; right:245px; margin-bottom:260px; z-index:11;}
#mfchain #mfchainleft, #mfchain #mfchainright {background-image:url(../img/gears/chain.png); width:6px; height:100%; position:absolute; bottom:0; z-index:4;}
#mfchain #mfchainleft {left:0;}
#mfchain #mfchainright {right:0;}

#mfschain {width:32px; height:50%; position:absolute; bottom:50%; right:245px; margin:0 -3px 260px 0;}
#mfschain #mfschainleft, #mfschain #mfschainright {background-image:url(../img/gears/tumblr_inline_msnq0fGiX61qz4rgp.png); width:12px; height:100%; position:absolute; bottom:0;}
#mfschain #mfschainleft {left:0;}
#mfschain #mfschainright {right:0;}

#mfspin {width:38px; height:38px; position:absolute; bottom:-20px; left:-6px;}
#mfspin .bottomlayer, #mfspin #mfmiddle, #mfspin .toplayer {width:100%; height:100%; position:absolute; top:0;}
#mfspin .bottomlayer {background-image:url(../img/gears/brownCap.png); z-index:1;}
#mfspin #mfmiddle {background-image:url(../img/gears/chainDrive.png); z-index:2; -moz-transform:rotate(15deg); -webkit-transform:rotate(15deg); -o-transform:rotate(15deg); -ms-transform:rotate(15deg);}
#mfspin .toplayer {background-image:url(img/gears/spinTop.png); z-index:3;}
#mfcover {width:38px; height:38px; position:absolute; bottom:-20px; left:-6px; background-image:url(../img/gears/coverShadow.png); z-index:5;}


/* Initial Rotations */
#cog1a, #cog1b {width:92px; height:92px; position:absolute; bottom:50%; right:212px; margin-bottom:213px; z-index:10; -moz-transform:rotate(15deg); -webkit-transform:rotate(15deg); -o-transform:rotate(15deg); -ms-transform:rotate(15deg);}

#cog2a, #cog2b, #cog2c {width:92px; height:92px; position:absolute; bottom:50%; right:182px; margin-bottom:140px; z-index:9; -moz-transform:rotate(6deg); -webkit-transform:rotate(6deg); -o-transform:rotate(6deg); -ms-transform:rotate(6deg);} 

#cog1b, #cog2b {-moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg);}

/***LEFT***/

#content { left:130px; right:150px; top: 50px; position:absolute; z-index:16;  }
#content img.bgtop {display:block; width:300px; height:111px; position:absolute; z-index:1; top:-111px; left:126px;}
#content img.bgbottom {display:block; width:302px; height:13px; position:absolute; z-index:1; bottom:-13px; left:123px;  box-shadow:60px 80px 5px rgba(0,0,0,0.25);}