Difference between revisions of "MediaWiki:Typogridphy.css"

From TeleCafeWiki
Jump to navigation Jump to search
m (Comment out html and body elements.)
m (Changed body font size to 100%)
 
Line 6: Line 6:
 
/* MAIN STRUCTURE STYLES */
 
/* MAIN STRUCTURE STYLES */
  
/* html{
+
html{
 
font-size:100%;
 
font-size:100%;
 
min-height:101%;
 
min-height:101%;
Line 12: Line 12:
  
 
body{
 
body{
font-size:62.5%;
+
font-size:100%;
 
font-family:Georgia, "Times New Roman", serif;
 
font-family:Georgia, "Times New Roman", serif;
 
color:#666;
 
color:#666;
Line 18: Line 18:
 
border-top:0.5em solid #666;
 
border-top:0.5em solid #666;
 
padding:0 1em;
 
padding:0 1em;
} */
+
}
  
 
.wrapper{
 
.wrapper{

Latest revision as of 19:58, 16 September 2011

/* Based on Typogridphy. */


/* Begin Typogridphy CSS grid elements. */

/* MAIN STRUCTURE STYLES */

html{
	font-size:100%;
	min-height:101%;
}

body{
	font-size:100%;
	font-family:Georgia, "Times New Roman", serif;
	color:#666;
	background:/*url(images/grid.gif) top center repeat-y*/ #fff; /* Uncomment to display the grid */
	border-top:0.5em solid #666;
	padding:0 1em;
}

.wrapper{
	width:94em;
	margin:0 auto;
}

.header{
	width:94em;
	padding-top:1.5em;
	margin-bottom:2em;
}

/* GRIDS */

/* Set styles common among all grids - all grid divs must be assigned this class */
.generic{
	border-top:0.5em solid #666; /* The border at the top of each grid */
	float:left;
	padding-top:1em;
	margin-bottom:2em;
}

/* Sets styles for any 'start' grids - this class MUST be given to a grid that is the first in a horizontal series */
.clear{
	clear:both;
}

/* Sets styles for any 'end' grids - this class MUST be given to a grid that is the last in a horizontal series */
.end{
	margin-left:0 !important;
	margin-right:0 !important;
}

/* 220px */
.twotwenty{
	width:22em;
	margin-right:2em;
}

/* 280px */
.twoeighty{
	width:28em;
	margin-right:2em;
}

/* 340px */
.threeforty{
	width:34em;
	margin-right:2em;
}

/* 400px */
.fourhun{
	width:40em;
	margin-right:2em;
}

/* 460px */
.foursixty{
	width:46em;
	margin-right:2em;
}

/* 520px */
.fivetwenty{
	width:52em;
	margin-right:2em;
}

/* 580px */
.fiveeighty{
	width:58em;
	margin-right:2em;
}

/* 640px */
.sixforty{
	width:64em;
	margin-right:2em;
}

/* 700px */
.sevenhun{
	width:70em;
	margin-right:2em;
}

/* 760px */
.sevensixty{
	width:76em;
	margin-right:2em;
}

/* 820px */
.eighttwenty{
	width:82em;
	margin-right:2em;
}

/* 880px */
.eighteighty{
	width:88em;
	margin-right:2em;
}

/* 940px */
.nineforty{
	width:94em;
}

/* FONT STYLES */

/* PARAGRAPHS */
.generic p{
	font-size:1.2em;
	line-height:1.5em;
	margin-bottom:1.5em;
}

/* Styles an introductory paragraph, similar to newspapers. Assign this class to the first paragraph in an article */
p.intro:first-line{
	font-variant:small-caps;
}

/* Styles a drop cap on each paragraph with this class */
p.drop:first-letter{
	float:left;
	font-size:3em;
	margin-top:-0.05em;
	margin-right:0.1em;
	margin-bottom:-0.5em;
}

/* ALL THE TRIMMINGS */

blockquote p{
	font-size:1.2em!important;
	line-height:1.5em!important;
	margin-bottom:1.5em!important;
	font-style:italic;
	font-weight:bold;
}

blockquote p cite{
	font-style:normal;
}

.generic strong{
	font-variant:small-caps;
}

.generic em{
	font-style:italic;
	font-weight:inherit;
}

.amp{ /* Give those ampersands a right sexy look */
	font-family:Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
	font-style:italic;
	font-weight:normal;
	line-height:inherit;
}

abbr{
	border-bottom:1px dotted #666;
	border-color:inherit;
	cursor:help;
}

.clear{
	clear:both;
}

.right-float{ /* Float any item to the right */
	float:right;
	margin-left:2em;
	margin-right:0;
}

.left-float{ /* Float any item to the left */
	float:left;
	margin-right:2em;
	margin-left:0;
}

.code{ /* Styling for and code type items */
	font-family:Courier, "Courier New", monospace;
	background:#ddd;
	font-size:1em;
}

/* IMAGE STYLES */

img{
	font-size:1em;
}

img.left-img{ /* Float any image to the LEFT and give it some margin */
	font-size:1em;
	float:left;
	padding:4px;
	border:1px solid #ccc;
	margin-bottom:1.8em;
	margin-right:2em;
	margin-top:0.3em;
}

img.right-img{ /* Float any image to the RIGHT and give it some margin */
	font-size:1em;
	float:right;
	padding:4px;
	border:1px solid #ccc;
	margin-bottom:1.8em;
	margin-left:2em;
	margin-top:0.3em;
}

/* End Typogridphy CSS grid elements. */