Adding css-framework support.

This commit is contained in:
Jeremy Grelle
2007-10-26 19:36:38 +00:00
parent 392074ffca
commit 3d5d0ea49b
13 changed files with 873 additions and 0 deletions

View File

@@ -0,0 +1,100 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
/* FORM ELEMENTS */
form {
margin:0;
padding:0;
}
form div,
form p {
font-size: 1em;
margin: 0 0 1em 0;
padding: 0;
}
label {
font-weight: bold;
}
fieldset {
border: 1px solid #eee;
padding: 5px 10px;
margin: 0 0 1.5em 0;
}
fieldset legend {
color: #666;
font-size: 1.1em;
font-weight: bold;
margin: 0 0 0 0px;
padding: 0;
background-color: white;
}
* html fieldset legend {
margin: 0 0 10px -10px;
}
fieldset ul {
list-style: none;
margin: 0 0 1.5em 0;
padding: 0;
}
fieldset ul li {
list-style: none;
margin: 0 0 0.5em 0;
padding: 0;
}
input, select, textarea {
font-size:1em;
font-family: arial, helvetica, verdana, sans-serif;
margin: 0;
padding: 2px;
}
input, select {
vertical-align:middle;
}
textarea {
width: 200px;
height: 8em;
}
input.check {
border: none;
width: auto;
height: auto;
margin: 0;
}
input.radio {
border: none;
width: auto;
height: auto;
margin: 0;
}
input.file {
height: auto;
width: 250px;
}
input.readonly {
background-color: transparent;
border: none;
}
input.button {
width: 10em;
border:1px solid black;
background-color: #ddd;
}
input.image {
border: none;
width: auto;
height: auto;
}
form div.submit {
margin: 1em 0;
}
form div.submit input {
height: 2em;
width: 15em;
}
/* END FORM ELEMENTS */

View File

@@ -0,0 +1,27 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
@import url("nav-horizontal.css");
/* NAV BAR AT THE TOP AND ONE COLUMN OF CONTENT */
div#content {
position: relative;
width: 701px;
margin: 0 auto 20px auto;
padding: 0;
text-align: left;
}
div#main {
width: 100%;
}
div#local {
display: none;
}
div#sub {
display: none;
}
div#nav {
display: none;
}
/* END CONTENT */

View File

@@ -0,0 +1,31 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
@import url("nav-vertical.css");
/* NAV BAR ON THE LEFT AND ONE COLUMN OF CONTENT */
div#content {
position: relative;
width: 780px;
margin: 0 auto 20px auto;
padding: 0;
text-align: left;
}
div#main {
float: right;
width: 560px;
display: inline;
}
div#local {
display: none;
}
div#sub {
display: none;
}
div#nav {
float: left;
width: 200px;
display: inline;
}
/* END CONTENT */

View File

@@ -0,0 +1,39 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
@import url("nav-vertical.css");
/* NAV BAR ON THE LEFT AND TWO COLUMNS OF CONTENT */
div#content {
position: relative;
width: 780px;
margin: 0 auto 20px auto;
padding: 0;
text-align: left;
}
div#main {
float: right;
width: 340px;
display: inline;
margin-right: 220px;
margin-left: -220px;
}
div#local {
display: none;
}
div#sub {
float: right;
width: 200px;
display: inline;
margin-right: -340px;
margin-left: 200px;
}
div#nav {
float: left;
width: 200px;
display: inline;
}
/* END CONTENT */

View File

@@ -0,0 +1,32 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
@import url("nav-horizontal.css");
/* NAV BAR AT THE TOP AND ONE COLUMN OF CONTENT */
div#content {
position: relative;
width: 701px;
margin: 0 auto 20px auto;
padding: 0;
text-align: left;
}
div#main {
width: 100%;
}
div#local {
width: 100%;
}
div#sub {
width: 100%;
}
div#nav {
position: absolute;
top: -15px;
left: 0;
width: 100%;
text-align: left;
}
/* END CONTENT */

View File

@@ -0,0 +1,43 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
@import url("nav-horizontal.css");
/* NAV BAR AT THE TOP, LOCAL NAV ON THE LEFT AND TWO COLUMNS OF CONTENT */
div#content {
position: relative;
width: 701px;
margin: 0 auto 20px auto;
padding: 0;
text-align: left;
}
div#main {
float: left;
width: 300px;
display: inline;
margin-right: -200px;
margin-left: 200px;
}
div#sub {
float: right;
width: 180px;
display: inline;
}
div#local {
float: left;
width: 180px;
display: inline;
margin-left: -300px;
}
div#nav {
position: absolute;
top: -15px;
left: 0;
width: 701px;
text-align: left;
}
/* END CONTENT */

View File

@@ -0,0 +1,36 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
@import url("nav-horizontal.css");
/* NAV BAR AT THE TOP, LOCAL NAVIGATION ON THE LEFT AND ONE COLUMN OF CONTENT */
div#content {
position: relative;
width: 701px;
margin: 0 auto 20px auto;
padding: 0;
text-align: left;
}
div#main {
float: right;
width: 500px;
display: inline;
}
div#local {
float: left;
width: 200px;
display: inline;
}
div#sub {
display: none;
}
div#nav {
position: absolute;
top: -15px;
left: 0;
width: 100%;
text-align: left;
}
/* END CONTENT */

View File

@@ -0,0 +1,36 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
@import url("nav-horizontal.css");
/* NAV BAR AT THE TOP AND TWO COLUMNS OF CONTENT */
div#content {
position: relative;
width: 701px;
margin: 0 auto 20px auto;
padding: 0;
text-align: left;
}
div#main {
float: left;
width: 480px;
display: inline;
}
div#sub {
float: right;
width: 200px;
display: inline;
}
div#local {
display: none;
}
div#nav {
position: absolute;
top: -15px;
left: 0;
width: 100%;
text-align: left;
}
/* END CONTENT */

View File

@@ -0,0 +1,125 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
/* SITE SPECIFIC LAYOUT */
body {
margin: 0;
padding: 0;
background: white;
text-align: center;
}
div#page {
width: 780px;
margin: 0 auto;
padding: 0;
background: white;
text-align: center;
}
/* HEADER */
div#header {
margin: 0 0 5em 0;
padding: 40px 20px;
color: white;
background: black;
text-align: left;
}
div#branding {
float: left;
width: 40%;
margin: 0;
padding: 10px 0 10px 20px;
text-align: left;
}
div#search {
float: right;
width: 49%;
margin: 0;
padding: 16px 20px 0 0;
text-align: right;
}
/* END HEADER */
/* CONTENT */
div#content {
}
/* MAIN */
div#main {
}
/* END MAIN */
/* SUB */
div#sub {
}
/* END SUB */
/* END CONTENT */
/* FOOTER */
div#footer {
color: white;
background-color: black;
}
div#footer p {
font-size: 0.8em;
margin: 0;
padding: 15px;
}
/* END FOOTER */
/* END LAYOUT */
/* UL.SUBNAV */
ul.subnav {
margin: 0;
padding: 0;
font-size: 0.8em;
list-style: none;
}
ul.subnav li {
margin: 0 0 1em 0;
padding: 0;
list-style: none;
}
ul.subnav li a,
ul.subnav li a:link,
ul.subnav li a:visited,
ul.subnav li a:active {
text-decoration: none;
font-weight: bold;
color: black;
}
ul.subnav li a:hover {
text-decoration: underline;
}
ul.subnav li strong {
padding: 0 0 0 12px;
background: url("../i/subnav-highlight.gif") left top no-repeat transparent;
}
ul.subnav li strong a,
ul.subnav li strong a:link,
ul.subnav li strong a:visited,
ul.subnav li strong a:active {
color: white;
background-color: black;
}
/* END UL.SUBNAV */

View File

@@ -0,0 +1,80 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
/* NAV */
div#nav {
font-size: 0.8em;
}
* html div#nav {
/* hide ie/mac \*/
height: 1%;
/* end hide */
}
div#nav div.wrapper {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
div#nav ul {
width: auto;
width: 100%;
margin: 0;
padding: 0;
line-height: 1em;
list-style: none;
}
div#nav li {
float: left;
display: inline;
list-style: none;
margin: 0;
padding: 0;
line-height: 1em;
border-right: 1px solid #aaa;
}
div#nav li.last {
border-right: none;
}
div#nav a,
div#nav a:link,
div#nav a:active,
div#nav a:visited {
display: inline-block;
/* hide from ie/mac \*/
display: block;
/* end hide */
font-weight: bold;
text-decoration: none;
margin: 0;
padding: 5px 38px 5px 38px;
color: black;
background: #ddd;
}
div#nav a:hover {
text-decoration: underline;
}
div#nav strong {
display: inline-block;
/* hide from ie/mac \*/
display: block;
/* end hide */
color: white;
background: black;
}
div#nav strong a,
div#nav strong a:link,
div#nav strong a:active,
div#nav strong a:visited,
div#nav strong a:hover {
color: white;
background-color: black;
}
/* END NAV */

View File

@@ -0,0 +1,79 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
/* NAV */
div#nav {
font-size: 0.8em;
}
* html div#nav {
/* hide ie/mac \*/
height: 1%;
/* end hide */
}
div#nav div.wrapper {
width: 100%;
background: #ddd;
}
div#nav ul {
width: auto;
width: 100%;
margin: 0;
padding: 0;
line-height: 1em;
list-style: none;
}
div#nav li {
display: block;
list-style: none;
margin: 0;
padding: 0;
line-height: 1em;
}
* html div#nav li {
/* hide ie/mac \*/
height: 1%;
/* end hide */
}
div#nav li.last {
}
div#nav a,
div#nav a:link,
div#nav a:active,
div#nav a:visited {
display: block;
font-weight: bold;
text-decoration: none;
margin: 0;
padding: 5px 10px 5px 10px;
color: black;
background: white;
}
div#nav a:hover {
color: white;
background: black;
text-decoration: underline;
}
div#nav strong {
display: block;
color: white;
background: black;
}
div#nav strong a,
div#nav strong a:link,
div#nav strong a:active,
div#nav strong a:visited,
div#nav strong a:hover {
color: white;
background-color: black;
}
/* END NAV */

View File

@@ -0,0 +1,68 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
/* clearing */
.stretch,
.clear {
clear:both;
height:1px;
margin:0;
padding:0;
font-size: 15px;
line-height: 1px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html>body .clearfix {
display: inline-block;
width: 100%;
}
* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}
/* end clearing */
/* replace */
.replace {
display:block;
background-repeat: no-repeat;
background-position: left top;
background-color:transparent;
}
/* tidy these up */
.replace * {
text-indent: -10000px;
display:block;
background-repeat: no-repeat;
background-position: left top;
background-color:transparent;
}
.replace a {
text-indent:0;
}
.replace a span {
text-indent:-10000px;
}
/* end replace */
/* accessibility */
span.accesskey {
text-decoration:none;
}
.accessibility {
position: absolute;
top: -999em;
left: -999em;
}
/* end accessibility */

View File

@@ -0,0 +1,177 @@
/* A CSS Framework by Mike Stenhouse of Content with Style */
/* TYPOGRAPHY */
body {
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 76%;
line-height: 1em;
color: #333;
}
div {
font-size: 1em;
}
img {
border: 0;
}
/* LINKS */
a,
a:link
a:active {
color: blue;
background-color: white;
text-decoration: underline;
}
a:visited {
color: purple;
background-color: transparent;
}
a:hover {
color: white;
background-color: black;
text-decoration: none;
}
/* END LINKS */
/* HEADINGS */
h1 {
font-size: 2em;
line-height: 1.5em;
margin: 0 0 0.5em 0;
padding: 0;
color: black;
}
h2 {
font-size: 1.5em;
line-height: 1.5em;
margin: 0 0 0.5em 0;
padding: 0;
color: black;
}
h3 {
font-size: 1.3em;
line-height: 1.3em;
margin: 0 0 0.5em 0;
padding:0;
color: black;
}
h4 {
font-size: 1.2em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
padding: 0;
color: black;
}
h5 {
font-size: 1.1em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
padding: 0;
color: black;
}
h6 {
font-size: 1em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
padding: 0;
color: black;
}
/* END HEADINGS */
/* TEXT */
p {
font-size: 1em;
margin: 0 0 1.5em 0;
padding: 0;
line-height:1.4em;
}
blockquote {
border-left:10px solid #ddd;
margin-left:10px;
}
pre {
font-family: monospace;
font-size: 1.0em;
}
strong, b {
font-weight: bold;
}
em, i {
font-style:italic;
}
code {
font-family: "Courier New", Courier, monospace;
font-size: 1em;
white-space: pre;
}
/* END TEXT */
/* LISTS */
ul {
line-height:1.4em;
margin: 0 0 1.5em 0;
padding: 0;
}
ul li {
margin: 0 0 0.25em 30px;
padding: 0;
}
ol {
font-size: 1.0em;
line-height: 1.4em;
margin: 0 0 1.5em 0;
padding: 0;
}
ol li {
font-size: 1.0em;
margin: 0 0 0.25em 30px;
padding: 0;
}
dl {
margin: 0 0 1.5em 0;
padding: 0;
line-height: 1.4em;
}
dl dt {
font-weight: bold;
margin: 0.25em 0 0.25em 0;
padding: 0;
}
dl dd {
margin: 0 0 0 30px;
padding: 0;
}
/* END LISTS */
/* TABLE */
table {
font-size: 1em;
margin: 0 0 1.5em 0;
padding: 0;
}
table caption {
font-weight: bold;
margin: 0 0 0 0;
padding: 0 0 1.5em 0;
}
th {
font-weight: bold;
text-align: left;
}
td {
font-size: 1em;
}
/* END TABLE */
hr {
display: none;
}
div.hr {
height: 1px;
margin: 1.5em 10px;
border-bottom: 1px dotted black;
}
/* END TYPOGRAPHY */