/* GLOBAL WIDTH */
#header, #top-bar {
width: 800px;
margin: 0 auto;
}
body {
background-color: #CCCCCC;
font-size: 0.80em;
font-family: Verdana, Arial, Helvetica;
color: black;
text-indent: 0;
margin-bottom: 20px;
}
div#container-wrap {
background-color: white;
color: black;
border-width: 1px;
border-style: solid;
border-color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 800px;
margin: 0px auto 0px auto;
}
/* HEADER */
#header {
height: 140px;
position: relative;
z-index: 10;
padding-bottom: 22px; /* FOR MENU */
background-image: url(/local--files/dark-blue/header.jpg);
}
#search-top-box {
position: relative;
top: -38px;
float: right;
}
#search-top-box input.button {
display: none;
}
#search-top-box-input{
background-color: transparent;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid black;
border: 0;
}
#search-top-box form {
margin: 0;
background-color: white;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid black;
z-index: 9;
padding: 0;
}
#login-status {
color: white;
font-size: 90%;
z-index: 30;
/*border: 1px solid white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background: #414141;*/
}
#login-status a {
background: transparent;
color: white;
}
#login-status a:hover{
color: white;
}
#login-status ul a {
background: transparent;
color: white;
}
#account-options {
background: #414141;
color: white;
border: 1px solid black;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
#account-options ul li a:hover{
color: white;
background: url(/local--files/dark-blue/topbarbuttonactive.jpg);
}
#account-topbutton {
background: #ccc;
color: white;
}
.printuser img.small {
margin-right: 1px;
}
#header h1 {
margin: 0;
padding: 0;
max-height: 105px;
text-align: left;
}
#header h2 {
margin: 0;
padding: 0;
clear: left;
float: left;
font-size: 105%;
max-height: 38px;
}
#header h1 a {
display: block;
margin: 0;
padding: 80px 0 25px;
padding-left: 20px;
line-height: 0px;
max-height: 0px;
color: white;
text-shadow: 0px 2px black;
text-align: left;
background: transparent;
font-size: 180%;
text-decoration: none;
position: relative;
bottom: 10px;
}
#header h2 span {
display: block;
margin: 0;
padding: 0px 0;
padding-left: 20px;
line-height: 0px;
max-height: 0px;
color: white;
font-weight: bold;
}
/* TOP MENU */
#top-bar {
position: absolute;
z-index: 50;
top: 138px;
//right: 0;
height: 21px;
line-height: 18px;
z-index: 20;
font-size: 90%;
background-image: url(/local--files/dark-blue/top-bar.jpg);
background-repeat: repeat-x;
padding-left: 0px;
}
#top-bar ul {
float: right;
border: 0;
}
#top-bar a {
color: #fff;
background: transparent;
text-shadow: none;
border: 0;
}
#top-bar ul li, #top-bar ul li ul {
/*border-width: 0px 0 0;
border-color: #444;
border-style: solid;*/
border: 0;
}
#top-bar ul li a {
/*border-style: solid;
border-color: #444;
border-width: 0 0 0 0px;*/
border: 0;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
line-height: 1px;
max-height: 1px;
overflow: hidden;
background-color: transparent;
width: auto;
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
width: auto;
border: 0;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
border-width: 0;
width: 150px;
line-height: 160%;
height: auto;
max-height: none;
padding-top: 0;
padding-bottom: 0;
padding-left: 4px;
text-align: left;
background-color: #414141;
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
background: url(/local--files/dark-blue/topbarbuttonactive.jpg) repeat-x;
text-align: left;
text-decoration: none;
}
#top-bar ul li ul {
width: auto;
border-width: 0 1px 1px 1px;
}
#top-bar ul li ul li, #top-bar ul li ul li.sfhover,
#top-bar ul li ul li, #top-bar ul li ul li:hover {
border-width: 0;
}
#top-bar ul li ul li a {
border-width: 0;
}
/*#top-bar ul li ul a, #top-bar a:hover {
}*/
/* IE7 HACK */
#top-bar ul > li > ul {
*margin-top: -4px;
}
/* SIDE MENU */
#side-bar {
padding: 20px 10px 10px 5px;
margin: 0 0 0 2em;
clear: both;
float: left;
width: 200px;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 10pt;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
background-image: url(/local--files/dark-blue/sidebaractive.jpg);
background-repeat: no-repeat;
background-color: #414141;
color: white;
text-indent: 1em;
}
#side-bar h2{
font-size: 12pt;
text-indent: 0px;
}
#side-bar input.button {
color: white;
/*background-color: #313131;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;*/
border: none;
height: 18px;
width: 74px;
background-image: url(/local--files/dark-blue/newpagehudbutton.jpg);
}
#side-bar input.button:hover{
background-image: url(/local--files/dark-blue/newpagehudbuttonactive.jpg);
color: white;
}
#side-bar input.text{
background-color: #414141;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border: 1px solid #9A9CA1;
width: 110px;
}
#side-bar a{
color: white;
}
#side-bar ul li.sfhover a{
background: transparent;
text-decoration: underline;
}
#side-bar ul{
margin: 0;
padding: 0;
}
#side-bar form {
width: 210px;
position: relative;
left: -10px;
}
/* CONTENT */
#main-content {
margin: 0 10px 0 240px;
width: 540px;
text-indent: 1em;
}
/* YUI-TABS */
.yui-navset .yui-content{
background-color: #f5f5f5;
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background-color:#d8d8d8;
background-image: url(../images/yuitabs.png);
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
color:#fff;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
background:#d88 url(/local--files/dark-blue/topbarhover.jpg) repeat-x;
text-decoration: none;
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
border-color: #444;
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
border-color: #444;
}
.yui-navset li {
line-height: normal;
}
/* FOOTER */
#footer {
clear: both;
font-size: 77%;
background: #444;
color: #bbb;
padding: 3px 10px;
}
#footer .options {
visibility: visible;
display: block;
float: right;
width: 50%;
font-size: 100%;
text-align: right;
}
#footer a {
color: #fff;
background: transparent;
}
#license-area{
font-size: 0.8em;
}
/* COMMON */
h1, #page-title {
padding: 0 0 0.25em;
margin: 0 0 0.6em;
font-weight: normal;
}
h1 {
margin-top: 0.7em;
padding: 0;
font-weight: bold;
}
h2, h3, h4, h5, h6, h7 {
margin: 0.5em 0 0.4em;
padding: 0;
letter-spacing: 1px;
}
#page-title {
border-color: #bbb;
}
ul {
list-style: none;
}
li, p {
line-height: 141%;
}
a {
color: black;
text-decoration: none;
}
a.newpage {
color: #d61;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/* SOME NICE BOXES */
div.sexy-box {
background: #eee;
border: 1px solid #ccc;
padding: 0 10px 12px;
margin: 7px 4px 12px;
overflow: hidden;
}
div.sexy-box div.image-container img {
margin: 5px;
padding: 2px;
border: 1px solid #999;
}
love it!
Hi there,
Just wondering if there was any chance of a wide variation (say 1200px or so wide) of this lovely theme? I was avoiding attempting it myself 'cause i'm sure i'd make a hack of it!
Cheers
BMC Creative | RoaringApps | @brycecammo
Ditto, great work.
The waste basket is the writer’s best friend.
This is AMAZING. Just inspires me so much to continue on my site. Nice clean feel that everyone would enjoy. Great job!