* { margin: 0; padding: 0; } body { font: 12px/14px Arial, Helvetica, sans-serif; color: #666; text-align: left; background: #f7f7f7 url(../images/background.gif) repeat-x; } /* Styles */ a { color: #0088cc; text-decoration: none;} a:hover { text-decoration: underline;} a img { border: none;} p { margin: 0px 0px 20px 0px; line-height: 18px;} ul { margin: 5px 0px 15px 0px; padding: 0px;} li { margin-left: 20px;} .notice { margin: 0 0 15px; padding: 0 10px; background: #fffbcc; border: 1px solid #e6db55; line-height: 25px; color: #222; } .success { margin: 0 0 15px; padding: 0 10px; background: #d1ecb8; border: 1px solid #81c445; line-height: 25px; color: #222; } .error { margin: 0 0 15px; padding: 0 10px; background: #ffebe8; border: 1px solid #f0baa2; line-height: 25px; color: #222; } .editable { background: #fffbcc; } .clear { clear:both;} /* Header */ #header { height: 45px; margin: 0 auto; padding: 0 20px; max-width: 1280px; min-width: 760px; } #header h1 { float: left; font: bold 20px/21px Helvetica, Arial, sans-serif; line-height: 45px; } #header h1 a { color: #fff; text-decoration: none; } #header .menu { float: right; line-height: 45px; } #header .menu a { color: #fff; } /* Wrapper */ #wrapper { margin: 0 auto; padding: 25px 20px; max-width: 1280px; min-width: 760px; } #wrapper h2 { margin: 0 0 10px; font: bold 20px/21px Helvetica, Arial, sans-serif; color: #333; } .box { margin: 0 0 20px; padding: 15px 15px 0 15px; border: 1px solid #e8e8e8; background: #fff; position: relative; } /* Sidebar */ #sidebar { float: left; width: 220px; position: relative; } /* Navigation */ .navigation { margin: 0 0 20px; background: #fff; border-left: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; } .navigation ul { margin: 0; padding: 0; list-style: none; } .navigation ul li { margin: 0; padding: 0 15px; border-top: 1px solid #e8e8e8; background: url(../images/navigation-off.gif) repeat-x; line-height: 24px; height: 100%; display: block; font-size: 12px; } .navigation ul li a { color: #666; height: 100%; width: 100%; display: block; } .navigation ul li.active { background: url(../images/navigation-on.gif) repeat-x; } .navigation ul li.active a { color: #fff; } .navigation ul li ul { margin: 5px 0; } .navigation ul li ul li { margin: 0; padding: 0; font-size: 11px; border: none; background: none; } .navigation ul li ul li a { color: #0088cc; } /* Search */ #search-form { height: 33px; } .search-input { border: 1px solid #d2d2d2; width: 133px; height: 12px; padding: 3px 5px; position: absolute; font-size: 11px; } .search-submit { left: 160px; position: absolute; } /* Blog */ #blog li { margin: 0; padding: 0; list-style: none; } #blog li h4 { margin: 0 0 5px; font-size: 12px; font-weight: normal; } #blog li h4 abbr { font-size: 10px; color: #999; border: none; } /* Content */ #content { padding-left: 240px; } #content h3 { margin: 0 0 15px; padding: 0 0 10px; color: #222; font-size: 16px; border-bottom: 1px dotted #d2d2d2; } #content h4 { margin: 0 0 15px; color: #222; font-size: 14px; } /* Pagination */ .pagination { text-align: right; display: block; margin: 0 0 15px; font-weight: bold; position: relative; } .pagination ul { margin: 0; padding: 0; list-style: none; } .pagination ul li { display: inline; margin: 0 5px 0 0; padding: 0; color: #222; } .pagination ul li a { } .pagination ul li.clickable { color: #0088cc; cursor: pointer; } .pagination ul li.active { color: #222; cursor: default; } /* Footer */ #footer { background: #fff; border: 1px solid #e8e8e8; padding: 15px; height: 12px; clear: both; } #footer .left { float: left;} #footer .right { float: right;} /* Buttons */ .buttons { float: left; padding-bottom: 20px; clear: both; } a.button { color: #6e6e6e; font: bold 12px Helvetica, Arial, sans-serif; text-decoration: none; padding: 7px 12px; position: relative; display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background: #f3f3f3; background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); border: solid 1px #dcdcdc; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin-right: 10px; } a.button.locked { color: #333; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } a.button:hover { color: #333; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } a.button:active { color: #000; border-color: #444; } a.left { -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; margin: 0; } a.middle { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-left: solid 1px #f3f3f3; margin: 0; border-left: solid 1px rgba(255, 255, 255, 0); } a.middle:hover, a.right:hover { border-left: solid 1px #999 } a.right { -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; border-left: solid 1px #f3f3f3; border-left: solid 1px rgba(255, 255, 255, 0); } a.big { font-size: 16px; padding: 10px 15px; } a.supersize { font-size: 20px; padding: 15px 20px; } a.save { background: url(../images/icons/tick.png) 10px center no-repeat #f3f3f3; padding-left: 30px; } a.add { background: url(../images/icons/plus-circle.png) 10px center no-repeat #f3f3f3; padding-left: 30px; } a.delete { background: url(../images/button-sprite.png) 10px -59px no-repeat #f3f3f3; padding-left: 30px; } a.flag { background: url(../images/button-sprite.png) 10px -94px no-repeat #f3f3f3; padding-left: 30px; } a.cancel { background: url(../images/icons/slash.png) 10px center no-repeat #f3f3f3; padding-left: 30px; } a.up { background: url(../images/button-sprite.png) 13px -131px no-repeat #f3f3f3; width: 18px; } a.down { background: url(../images/button-sprite.png) 13px -166px no-repeat #f3f3f3; width: 18px; } a.save-big { background: url(../images/button-sprite.png) 15px 13px no-repeat #f3f3f3; font-size: 16px; padding: 10px 15px 10px 35px; } a.add-big { background: url(../images/button-sprite.png) 15px -21px no-repeat #f3f3f3; font-size: 16px; padding: 10px 15px 10px 35px; } a.delete-big { background: url(../images/button-sprite.png) 15px -55px no-repeat #f3f3f3; font-size: 16px; padding: 10px 15px 10px 35px; } a.flag-big { background: url(../images/button-sprite.png) 15px -90px no-repeat #f3f3f3; font-size: 16px; padding: 10px 15px 10px 35px; } a.up-big { background: url(../images/button-sprite.png) 15px -126px no-repeat #f3f3f3; width: 18px; font-size: 16px; padding: 10px 15px; } a.down-big { background: url(../images/button-sprite.png) 15px -161px no-repeat #f3f3f3; width: 18px; font-size: 16px; padding: 10px 15px; } /* Tabs */ ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 27px; /*--Set height of tabs--*/ border-bottom: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 26px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 26px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #e8e8e8; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0 url('../images/navigation-off.gif'); } ul.tabs li a { text-decoration: none; color: #000; display: block; padding: 1px 21px; outline: none; } ul.tabs li a:hover { background: #f0f0f0; } html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ background: #fff; border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ } .tab_container { border: 1px solid #e8e8e8; border-top: none; overflow: hidden; background: #fff; } .tab_content { padding: 20px; }