/* Main */
#main { background-color: #171c22; padding: 20px 0 0 0; }

/* Top */
#main .top { background-color: #171c22; height: 300px; }

#main .top .left { float: left; width: 220px; height: 322px; background: url(../img/team-top-bg.jpg) repeat-x; }

#main .top .right { float: left; width: 680px; height: 282px; padding: 20px; background-color: #1d232a;  }
#main .top .right .image { float: left; }
#main .top .right .image .transparent { width: 187px; height: 9px; position: absolute; background: url(../img/project-box-transparent.png) repeat-x; border-top: 2px solid #3f444a; }
#main .top .right .text { float: left; margin-left: 30px; width: 400px; }
#main .top .right .text h3 { font-size: 20px; color: #d6d7d9; }
#main .top .right .text h4 { font-size: 17px; margin-bottom: 10px; color: #f0a22c; }
#main .top .right .text p { color: #e8e9e9; }
#main .top .right .text hr { background-color: #333940; color: #333940; height: 4px; margin: 10px 0 10px 0; border: 0; }

/* Middle */
#main .middle { clear: both; background-color: #262b32; border-top: 3px solid #383a43; padding-bottom: 20px; }
#main .middle .left { float: left; width: 200px; background-color: #262b32; padding: 10px; }
#main .middle .left .box { background-color: #20262c; padding: 10px; margin-left: 5px; }
#main .middle .left .box p { color: #d6d7d9; font-size: 13px; }
#main .middle .left .box p.small { font-size: 11px; margin-top: 20px; }

#main .middle .right { float: left; width: 680px; height: 140px; padding: 20px; background-color: #262b32; }
#main .middle .right ul { width: 650px; list-style: none; margin-top: -10px; }
#main .middle .right ul li { float: left; margin: 10px 15px 0 0; width: 50px; height: 50px; background-color: #22282f; overflow: hidden; }
#main .middle .right ul li img { filter: alpha(opacity=60); opacity: .60; }

/* Tooltip */
#tooltip { position: absolute; z-index: 3000; font-size: 12px; color: #fff; padding: 10px 10px 0 10px; }
#tooltip h3 { margin: 0; font-size: 13px; font-family: Arial; font-weight: bold; }
#tooltip div { margin: 0; }

.management-tooltip, .other-tooltip { background: url(../img/management-tooltip.png) no-repeat; height: 81px; width: 190px; }
.design-tooltip { background: url(../img/design-tooltip.png) no-repeat; height: 81px; width: 190px; }
.digital-tooltip { background: url(../img/digital-tooltip.png) no-repeat; height: 81px; width: 190px; }
.pr-tooltip { background: url(../img/pr-tooltip.png) no-repeat; height: 81px; width: 190px; }
.reporting-tooltip { background: url(../img/reporting-tooltip.png) no-repeat; height: 81px; width: 190px; }

h4.management, h4.other { color: #7a1e82 !important; }
h4.design { color: #6d9dc7 !important; }
h4.digital { color: #729941 !important; }
h4.pr { color: #db7c00 !important; }
h4.reporting { color: #cb0048 !important; }