/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Site: MocoEng
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HTML
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
html {height: 100%; margin-bottom: 1px}
body {background: #333}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
TEXT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
body,input, textarea  {color: #CCC; font: 11px/1.64em tahoma, sans-serif; margin: 0}
p {margin: 0; padding-bottom: 1.64em}
hr {border: 0; background: #9EBD9D; color: #9EBD9D; height: 1px; margin: 1.64em 0}
.moco {font-family: times new roman, serif; font-style: italic; font-weight: bold}
.white {color: #FFF}
#header p {font-size: 14px; padding: 15px 0 0 190px}
#footer p {font-size: 12px; font-weight: bold; padding: 35px 0 0 190px}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HEADINGS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
h1 {border-bottom: 4px solid #7FAD2D; color: #7FAD2D; font: bold 14px arial, sans-serif; margin: 0 0 1.64em 0}
h2 {color: #7FAD2D; font-size: 11px; margin: 0 0 1.64em 0}
h3 {color: #FFF; font-size: 11px; margin: 0}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
LINKS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a {color: #7FAD2D; text-decoration: none; text-transform: uppercase}
a:hover {text-decoration: underline}
#logo {background: url(../images/moco-logo.gif); display: block; height: 110px; overflow: hidden; text-indent: -999px; width: 210px}
a.close {background: url(../images/close.gif); bottom: -20px; color: #FFF; display: block; height: 20px; line-height: 20px; position: absolute; right: 0; text-align: center; width: 125px}
#footer a {color: #CCC; text-transform: none}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
LISTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
ul {list-style: none; margin: 0 0 1.64em 0; padding: 0}
ul#navigation {left: 0; margin: 0; padding: 0 25px 0 30px; position: absolute; top: 400px; width: 155px; z-index: 2}
ul#navigation li {display: inline}
#navigation li a {background: url(../images/navigation-a-bg.gif) no-repeat 20px center; color: #B0B0B0; display: block; font-weight: bold; padding-left: 40px; text-decoration: none; text-transform: none}
#navigation li a:hover, #navigation li a.active {background-color: #000}
#navigation li a.active {background-color: transparent; color: #FFF; cursor: default}
ol.line {list-style-position: inside; list-style-type: decimal-leading-zero; margin: 0 0 1.64em 0; padding: 0; width: 465px}
ol.line li {border-bottom: 4px solid #7FAD2D; clear: both; color: #7FAD2D; font-weight: bold; padding: 2px 0; position: relative}
ol.line li a {background: url(../images/pdf.gif) no-repeat right center; padding-right: 20px; position: absolute; right: 0; top: 0}
ul.square li {background: url(../images/list-square.gif) no-repeat; padding-left: 10px; width: 455px}
ul.video-thumbnails {width: 465px}
ul.video-thumbnails li {display: inline}
ul.video-thumbnails li a {color: #FFF; display: inline-block; float: left; font-size: 9px; height: 11px; line-height: 9px; margin: 0 7px 15px 7px; padding-top: 55px; text-align: center; text-transform: none; width: 102px}
ul.video-thumbnails li a:hover {background-position: 0 -66px; text-decoration: none}
ul.image-thumbnails li {float: left; height: 65px; padding-bottom: 10px; text-align: center; width: 20%}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
FORMS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
form {margin: 0; padding: 0}
input, textarea {background: #CCC; border: 0; color: #333; margin: 5px 0; padding: 3px 0; width: 100%}
.submit {background: #CCC; border: 0; cursor: pointer; padding: 5px; width: 150px}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
IMAGES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
img {border: none}
img.left {float: left; margin: 0 10px 10px 0}
img.right {float: right; margin: 0 0 10px 10px}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
LAYOUT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#container {margin: 0 auto; padding: 60px 20px 60px 205px; position: relative; width: 515px}
#header {background: url(../images/header-bg.gif); height: 70px}
#home {background: url(../images/home-bg.gif); height: 480px; left: 4px; position: absolute; top: 101px; width: 710px; z-index: 1}
#content {background: url(../images/content-bg.gif) repeat-y; min-height: 470px; padding: 0 25px 5px 25px; position: relative; width: 465px}
#content:after {clear: both; content: "."; display: block; height: 0; visibility: hidden}
* html #content {height: 470px}
#footer {background: url(../images/footer-bg.gif); height: 70px; margin-top: -1.64em; position: relative; z-index: 1}
#sidebar {background: url(../images/sidebar-bg.gif) no-repeat 0 bottom; left: 0; padding-bottom: 150px; position: absolute; top: 120px; width: 210px}
#tab {background: url(../images/tab.gif); height: 147px; padding: 43px 0 0 20px; width: 190px}
.video {background: #727272; padding: 20px; position: relative; width: 425px}
.image {background: #727272; padding: 20px; position: relative; text-align: center; width: 425px}
.clear {clear: both}