Created
April 15, 2010 00:07
-
-
Save jasonmelgoza/366503 to your computer and use it in GitHub Desktop.
test style
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;} | |
table{border-collapse:collapse;border-spacing:0;} | |
fieldset,img{border:0;} | |
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} | |
ol,ul {list-style:none;} | |
caption,th {text-align:left;} | |
h1,h2,h3,h4,h5,h6{font-size:100%;} | |
q:before,q:after{content:'';} | |
/* WRAPPERS | |
Wrappers are not used by default, but this commented example is included to | |
show how they can be used. | |
-------------------------------------------------------------------------------- */ | |
.wrapper { | |
/* background-color: #ff8800; */ | |
} | |
/* BLOCKS (hanging lines or rows) | |
Use .container to wrap units which have nested units. | |
-------------------------------------------------------------------------------- */ | |
.block { | |
position: relative; | |
width: 950px; /* Override this value for narrorwer layouts. Use ( x * 60 ) -10, where x is the number of column you want. */ | |
margin: 0 auto; /* Layouts are typically centered horizontially, but this can be overriden for flush-left. */ | |
} | |
.clear:after, | |
.container:after, | |
.block:after { | |
content: "."; /* Clear fix */ | |
display: block; | |
height: 0; | |
clear: both; | |
visibility: hidden; | |
} | |
.clear, | |
.container, | |
.block { | |
zoom: 1; /* IE fix */ | |
} | |
/* UNITS (columns) | |
-------------------------------------------------------------------------------- */ | |
.unit { | |
float: left; | |
margin-left: 5px; | |
margin-right: 5px; | |
} | |
/* The first and last units or spans in a block do not have margins. The :first-child and :last-child | |
syntax would be nice here, but it doesn't work in IE6 and seems to cause weirdness in Safari, even though | |
Safari technically "supports" :first-child and :last child. | |
Thus, you need to add "first" and "last" classes to your end cap units in each block. An exception | |
is made for .span-16, as it is always both the first and last unit in a block. */ | |
.first { margin-left: 0 } | |
.last { margin-right: 0 } | |
/* .span classes provide elements pre-sized to occupy the width of two or more columns */ | |
.span-1 { width: 50px; } | |
.span-2 { width: 110px; } | |
.span-3 { width: 170px; } | |
.span-4 { width: 230px; } | |
.span-5 { width: 290px; } | |
.span-6 { width: 350px; } | |
.span-7 { width: 410px; } | |
.span-8 { width: 470px; } | |
.span-9 { width: 530px; } | |
.span-10 { width: 590px; } | |
.span-11 { width: 650px; } | |
.span-12 { width: 710px; } | |
.span-13 { width: 770px; } | |
.span-14 { width: 830px; } | |
.span-15 { width: 890px; } | |
.span-16 { | |
width: 950px; | |
margin-left: 0; /* We special-case .span16 with no margins, since it is, by nature always both the first and last span in a block. */ | |
margin-right: 0; | |
} | |
/* .append and .prepend classes allow for "empty columns" by providing padding on a span or unit. */ | |
.append-1 { padding-right: 60px; } | |
.append-2 { padding-right: 120px; } | |
.append-3 { padding-right: 180px; } | |
.append-4 { padding-right: 240px; } | |
.append-5 { padding-right: 300px; } | |
.append-6 { padding-right: 360px; } | |
.append-7 { padding-right: 420px; } | |
.append-8 { padding-right: 480px; } | |
.append-9 { padding-right: 540px; } | |
.append-10 { padding-right: 600px; } | |
.append-11 { padding-right: 660px; } | |
.append-12 { padding-right: 720px; } | |
.append-13 { padding-right: 780px; } | |
.append-14 { padding-right: 840px; } | |
.append-15 { padding-right: 900px; } | |
.append-16 { padding-right: 940px; } | |
.prepend-1 { padding-left: 60px; } | |
.prepend-2 { padding-left: 120px; } | |
.prepend-3 { padding-left: 180px; } | |
.prepend-4 { padding-left: 240px; } | |
.prepend-5 { padding-left: 300px; } | |
.prepend-6 { padding-left: 360px; } | |
.prepend-7 { padding-left: 420px; } | |
.prepend-8 { padding-left: 480px; } | |
.prepend-9 { padding-left: 540px; } | |
.prepend-10 { padding-left: 600px; } | |
.prepend-11 { padding-left: 660px; } | |
.prepend-12 { padding-left: 720px; } | |
.prepend-13 { padding-left: 780px; } | |
.prepend-14 { padding-left: 840px; } | |
.prepend-15 { padding-left: 900px; } | |
.prepend-16 { padding-left: 940px; } | |
body,ul,ol,dl,h1,h2,h3,h4,h5,h6,td,th,caption,pre,p,blockquote,input,textarea { | |
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
font-size: 12px; | |
line-height: 18px; | |
font-weight: normal; | |
color: #222; | |
} | |
a { | |
color: #CC0000; | |
text-decoration: none; | |
outline:none; | |
} | |
a:hover { text-decoration: underline; } | |
h1,h2,h3,h4,h5,h6 { | |
margin: 0; | |
font-weight: bold; | |
} | |
h1 { font-size: 36px; line-height: 36px; padding-top: 18px; padding-bottom: 18px; } | |
h2 { font-size: 28px; line-height: 36px; padding-top: 9px; padding-bottom: 9px; } | |
h3 { font-size: 18px; line-height: 18px; padding-top: 9px; padding-bottom: 9px; } | |
h4 { font-size: 14px; line-height: 18px; padding-top: 9px; padding-bottom: 9px; } | |
h5 { font-size: 12px; line-height: 18px; padding-top: 9px; padding-bottom: 9px; } | |
h6 { font-size: 10px; line-height: 18px; padding-top: 9px; padding-bottom: 9px; } | |
p { margin: 0 0 18px 0; } | |
ul, ol { | |
margin-top: 18px; | |
margin-bottom: 18px; | |
padding-left: 16px; | |
list-style-position: outside; | |
list-style-type: disc; | |
} | |
ol { list-style-type: decimal; } | |
dl { | |
margin-top: 18px; | |
margin-bottom: 18px; | |
} | |
dl dt { | |
font-weight: bold; | |
} | |
blockquote { | |
margin-top: 18px; | |
margin-bottom: 18px; | |
padding-left: 17px; | |
border-left: 1px solid #666; | |
font-style: italic; | |
} | |
blockquote * { color: #666; } | |
strong { font-weight: bold; } | |
em { font-style: italic; } | |
/* DEFAULT STYLES FOR COMMON CLASSES | |
-------------------------------------------------------------------------------- */ | |
.small { | |
font-size: 10px; | |
line-height: 18px; | |
} | |
.large { | |
font-size: 14px; | |
line-height: 18px; | |
} | |
.quiet { | |
color: #666; | |
} | |
/* EXTRA DEFAULT STYLES FOR COMMON TYPOGRAPHIC IDIOMS | |
-------------------------------------------------------------------------------- */ | |
.footnotes { | |
border-top: 1px solid #666; | |
margin-top: -1px; | |
color: #666; | |
font-size: 10px; | |
} | |
/* BUG: This currenty relies on daisy-chained class selectors, which IE doesnt support. Need to find another way. */ | |
.sidenote.right { float: right; } | |
.sidenote.right.span1 { margin-right: -60px; } | |
.sidenote.right.span2 { margin-right: -120px; } | |
.sidenote.right.span3 { margin-right: -180px; } | |
.sidenote.right.span4 { margin-right: -240px; } | |
.sidenote.left { float: left; } | |
.sidenote.left.span1 { margin-left: -60px; } | |
.sidenote.left.span2 { margin-left: -120px; } | |
.sidenote.left.span3 { margin-left: -180px; } | |
.sidenote.left.span4 { margin-left: -240px; } | |
body { padding: 18px 45px; } | |
#page { width: 550px; } | |
h2 {font-family:georgia; font-weight:normal; } | |
.caps {font-size:.92em;} | |
.amp {color:#666; font-size:1.05em;font-family:"Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua",serif; font-style:italic;} | |
.dquo {margin-left:-.38em;} | |
div.about {background:#ddd; padding:1em; margin-bottom:1em;} | |
.about h1 {font-size:1.3em; border-bottom:1px solid #bbb; margin:0 0 4px 0; padding:0 0 4px 0; line-height:1;} | |
.about p { margin:0;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment