/* Main */
#main { background-color: #171c22; padding: 50px 0 50px 30px; }
#main h1 { color: #d6d7d9; font-size: 26px; }
#main h2 { color: #d6d7d9; font-size: 14px; font-weight: normal; margin-top: 10px; }

/* Box */
#main .top { width: 870px; margin-top: 30px; background-color: #12161b; padding: 10px 30px 10px 0; text-align: right; color: #565a5f; border-bottom: 3px solid #383a43; }
#main .top a { color: #d6d7d9; margin: 0 10px 0 10px; outline: none; }
#main .top a:hover, #main .top a.selected { color: #7a1e82; }

#main .box { width: 900px; float: left; background: #1d232a url(../img/our-work-bg.jpg) top right repeat-y; }

#main .box .left { float: left; width: 225px; background-color: #1d232a; padding: 15px 0 0 0; }
#main .box .left ul { list-style: none;  }
#main .box .left ul li { margin: 0 0 10px 15px; font-size: 12px; }
#main .box .left ul li a { color: #d6d7d9; outline: none; }
#main .box .left ul li a:hover, #main .box .left ul li a.selected { color: #7a1e82; }

#main .box .right { float: left; width: 675px; padding: 15px 0 15px 0; }
#main .box .right ul { list-style: none; margin-left: 20px; }
#main .box .right ul li { margin: 0 0 15px 15px; float: left; width: 142px; height: 102px; background-color: #12161b; overflow: hidden; }

/* Tooltip */
#tooltip { position: absolute; z-index: 400; background: url(../img/our-work-tooltip.png) no-repeat; font-size: 12px; height: 81px; width: 190px; color: #fff; padding: 10px 10px 0 10px; }
#tooltip h3 { margin: 0; font-size: 13px; font-family: Arial; font-weight: bold; }
#tooltip div { margin: 0; }