topical media & game development
lib-jquery-learning-bookstore-styles-bookstore.css / css
* { /* sets 0 margin and 0 padding on everything */
margin: 0;
padding: 0;
}
p, h1, h2, h3, h4, ol, ul, dl {
margin-top: .5em;
margin-bottom: 1em;
}
body {
background: #fff;
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
}
#wrapper {
font-size: 1.2em;
}
#branding {
height: 100px;
padding: 15px 10px 5px;
border-bottom: 1px solid #ccc;
background: #ffd;
}
#primary-nav {
position: absolute;
top: 90px;
left: 0;
height: 30px;
width: 100%;
background: #efd;
}
li {
margin-left: 1.2em;
}
#container {
float: left;
width: 100%;
margin-bottom: 2em;
}
#content {
margin: 0 21em 0 16em; /* Margins for content column. Should be 0, #sidebar width, 0, #secondary-nav width */
}
#secondary-nav {
float: left;
width: 15em;
margin-left: -100%;
background: #efd;
}
#sidebar {
float: left;
width: 20em; /*Width of right column in pixels*/
margin-left: -20em; /*Set margin to that of -(RightColumnWidth)*/
background: #efd;
}
#footer {
clear: left;
width: 100%;
background: #000;
color: #fff;
text-align: center;
padding: 4px 0;
}
**************************************
=MAIN CONTENT AREA
--------------------------------------
/* padding for all child elements within container */
#content *,
#secondary-nav *,
#sidebar * {
padding-right: 10px;
padding-left: 10px;
}
/* NO padding for all grandchild+ elements within container */
#content * *,
#secondary-nav * *,
#sidebar * * {
padding: 0;
}
**************************************
=PRIMARY NAV
--------------------------------------
#primary-nav ul {
list-style-type: none;
padding-left: 5px;
}
#primary-nav li {
float: left;
margin-left: 0;
padding: 5px;
}
**************************************
=SECONDARY NAV - currently left column
--------------------------------------
#secondary-nav h2, #sidebar h2 {
border-bottom: 1px dotted #ccc;
}
#sidebar h3 {
border-top: 1px dotted #ccc;
padding-top: 1em;
}
#secondary-nav h3 {
font-size: 1em;
}
#secondary-nav h3 a {
padding-left: 20px;
color: #15b;
text-decoration: none;
background: url('../icons/cart.png') no-repeat 0 50%;
}
#secondary-nav h3 a.active {
color: #000;
cursor: text;
}
#secondary-nav h3 span {
border-bottom: 1px dotted #15b;
}
#secondary-nav li {
margin-bottom: .5em;
}
#footer a {
color: #ff0;
}
*************************************
=INTERFACE ELEMENTS
--------------------------------------
.clickable {
cursor: pointer;
}
.hover {
text-decoration: underline;
}
/* ----------------------------
=Alsett Clearing Method for floats
-------------------------------*/
.clear-after:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear-after {display: inline-block;}
/* backslash hack hides from IE Mac \*/
* html .clear-after {height: 1%;}
.clear-after {display: block;}
/* end backslash hack */
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.