html { margin: 0; padding: 0; background: #e1e3e3 url(./../../styles/eugene/img/back.png) repeat-y center 0; } #logocontainer { background-color: #ffffff; } #logo { width: 960px; margin: 0 auto; position: relative; } #logo img { display: block; border: 0; margin-left: 24px; } #navcontainer { background-color: #3473b2; background-position: center top; background-repeat: no-repeat; height: 320px; border-bottom: 1px solid rgba(0,0,0,0.1); } #nav { background: url(./../../styles/eugene/img/fade.png) repeat-x; height: 48px; } #nav>ul { width: 960px; margin: 0 auto; display: block; list-style: none; height: 46px; font: 15px / 18px Signika; letter-spacing: 0.5px; } #nav>ul>li { display: block; float: left; min-width: 96px; position: relative; } #nav>ul>li>a { line-height: 18px; height: 18px; padding: 14px 20px; color: rgba(255,255,255,0.7); text-decoration: none; display: block; text-align: center; background: url(./../../styles/eugene/img/active.png) no-repeat; background-position: center 48px; transition: background-position 0.5s, color 0.5s; } #nav>ul>li:hover>a, #nav>ul>li.active>a { background-position: center 0; color: rgba(255,255,255,1); } #nav>ul>li ul { position: absolute; z-index: 1000; border: 1px solid rgba(255,255,255,0.5); width: 240px; list-style: none; display: block; margin: 0; padding: 0; left: -9999px; opacity: 0; background: url(./../../styles/eugene/img/menu.png) no-repeat left bottom; } #nav>ul li:hover>ul { transition: opacity 0.3s; left: 0; opacity: 1; } #nav>ul li li:hover>ul { left: 240px; top: -1px; } #nav>ul>li>ul li { display: block; margin: 0; padding: 0; position: relative; } #nav>ul>li>ul li>a { line-height: 18px; height: 18px; padding: 0px 20px; color: rgba(255,255,255,0.7); text-decoration: none; display: block; background-color: rgba(0,0,0,0.5); transition: padding 0.2s, color 0.5s, background-color 0.5s; } #nav>ul li:hover>ul>li>a { padding: 14px 20px; } #nav>ul>li>ul li:hover>a { color: rgba(255,255,255,1); background-color: rgba(0,0,0,0.8); } #logo form { border: 1px solid #3473b2; width: 240px; padding: 0; margin: 0; height: 24px; position: absolute; display: block; right: 24px; top: 24px; } #logo form button { background: #3473b2 url(./../../styles/eugene/img/search.png) no-repeat center center; display: block; width: 24px; height: 24px; border: none; position: absolute; top: 0; right: 0; cursor: pointer; } #logo form input { border: 0; width: 210px; padding: 0; margin: 0; background-color: transparent; font: 14px / 18px 'Trebuchet MS',Tahoma,Helvetica,sans-serif; position: absolute; top: 3px; left: 3px; color: #444444; } #logo form input:focus{ outline: 0; } #maincontainer { width: 960px; margin: 0 auto; } #common { text-align: center; margin: 0 40px 0 40px; padding: 10px 20px; color: #3473b2; border-top: 1px solid #e1e3e3; } #common a { color: #3473b2; text-decoration: none; transition: color 0.5s; } #common a:hover { color: #000000; } #header { margin: 20px 40px; width: 880px; } #contentcontainer { margin: 20px 40px; } #sidebarleft { float: left; margin-right: 40px; } #sidebarright { float: left; margin-left: 40px; } #content { float: left; } #footer { margin: 0 40px 40px 40px; width: 900px; } #caption { margin: 20px 40px; }