RELEASE_2_1_13/src/blocks/linotype/samples/styles/main.css - cocoon - Git at Google

 /*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 /*
  * I wish I was a digital artist, but, in fact, I'm not.
  *
  * Great designers create, poor designers blatantly copy, so/so designers, well,
  * "cite". Up to you to decide in which category I belong :-)
  *
  * Anyway, citations or blatant steals, here are the sites that influenced me:
  *
  *  1) http://www.stupidfool.org/ -> an *awesome* example of how a web page
  *     should be designed. I generally like Movable Type blogs because they
  *     are used by people who care about readability of their text. Using
  *     the correct fonts, giving the proper "air" (read: space) between
  *     paragraphs and the like. And this comes straight fromt the people who
  *     designed the tool. I seriously thought about using it, but I'm too
  *     "hacker inside" and proud of my work on Cocoon to use another publishing
  *     system so I wrote Linotype.
  *
  *  2) http://www.x180.org/ -> Dundan's blog. Another example of readability
  *     clean design and well balanced space. To be honest, not much is
  *     really 'cited' from his stylesheets or web design, if not the
  *     general philosophy of 'cut the crap' which I find refreshing in
  *     today's web where screen space feels like land to conquer pixel by pixel.
  *
  *  3) http://daringfireball.net/ -> hypertext has great potentials, but
  *     most bloggers don't understand how visually aggressive (and distracting)
  *     those scattered underlined blue single words can be. Some try to lower
  *     this visual and cognitive aggression by removing the visual semantics
  *     of color keying or the use of underline and move onto a mouseover.
  *     One step up and two steps back: mouseover removes the hyperlink
  *     information from the visual semantics realms into a mixted bidimensional
  *     space of vision associated to motion, failing completely to provide a
  *     'block overview' that is normally done when you are "eye scanning"
  *     a block of text to see if something interests you or not. This site
  *     concentrates a lot in making hyperlinks readable, coherent and meaningful
  *     without attacking your ability to read the text sequentially.
  *
  *  So, as you see, a lot of effort has been put into this stylesheet by
  *  many different people. If you use it, please, at least cite us in the
  *  stylesheet comments so that the word will spread :-)
  *
  *  Stefano.
  */

 /* ----------------------------- Global Definitions -------------------- */

 @media screen
   {

 body {
     margin: 0px;
     padding: 0px;
 	font-family: "georgia", "times", "times new roman", serif;
     color: #222;
     background-color: #fff;
     /* font-size: 12px; */
     quotes: "\201C" "\201E" "\2018" "\2019";
 }

 img {
     border: 0;
 }

 a:link {
 	color: #222;
 }

 a:visited {
 	color: #555;
 }

 a:hover {
 	color: #000;
 }

 a:active {
 }

 a:focus {
 }

 h1 {
     font-size: 28px;
     text-transform: uppercase;
     letter-spacing: 0.25em;
     padding: 5px 0px 20px 0px;
     margin: 5px 0px 0px 0px;
     color: #000;
     font-weight: normal;
 }

 h1 a:link, h1 a:visited {
     text-decoration:none;
     color: #000;
 }

 h1 a:hover {
     text-decoration:none;
     color: #555;
 }

 h2 {
     font-family: "verdana", "helvetica", "arial", sans-serif;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     font-size: 11px;
     color: #666;
     font-weight: normal;
     padding: 0px 0px 0px 0px;
     margin: -20px 0px 30px 0px;
 }

 h3 {
 	padding: 0px 0px 6px 0px;
 	margin: 30px 0px 30px 0px;
 }

 h3 .separator {
 	margin: 0px 10px 0px 10px;
 	color: #bbb;
 }

 p {
 	padding: 1px;
 	margin: 5px 0px 5px 0px;
 }

 div.separator {
 	text-align: center;
 	margin: 15px 0px 15px 0px;
 }

 blockquote {
 	padding: 1px;
 	margin: 10px 40px 10px 40px;
 }

 input, select {
 	font-family: "georgia", "times", "times new roman", serif;
 	font-size: 13px;
     color: #333;
 }

 input[type="text"] {
 	border: 1px dashed #ccc;
 	padding: 3px;
 }

 input[type="password"] {
 	border: 1px dashed #ccc;
 	padding: 3px;
 }

 input[type="button"] {
     margin: 5px 5px 5px 5px;
 	border-width: 1px;
 }

 input[type="submit"] {
     margin: 5px;
 }

 /* ----------------------------- Sidebar  -------------------------- */

 #sidebar {
     position: fixed;
     width: 200px;
     height: auto;
     top: 0;
     right: auto;
     bottom: auto;
     left: 0;
     text-align: center;
 }

 #sidebar img {
     margin: 20px;
 }

 #sidebar h1 {
     font-size: 12px;
     font-weight: bold;
     margin: 20px 20px 3px 40px;
 }

 #sidebar ul {
     padding: 0px 20px 10px 40px;
     margin: 0px;
 }

 #sidebar li {
     margin-left: 0px;
     list-style-type: none;
     font-family: "verdana", "helvetica", "arial", sans-serif;
     font-size: 10px;
     margin-bottom: 5px;
 }

 /* ----------------------------- Bottombar ---------------------------- */

 #bottombar {
     position: fixed;
     width: 200px;
     height: auto;
     top: auto;
     right: 0;
     bottom: 0;
     left: 0;
     text-align: center;
     margin: 10px 0px 20px 0px;
 }

 /* ----------------------------- Footer ---------------------------- */

 #footer {
 	margin: 30px 20px 20px 220px;
 	text-align: center;
 }

 /* ----------------------------- Path ---------------------------- */

 #path {
 	margin: 10px 20px 10px 220px;
 	padding: 0px;
 	text-align: left;
 }

 /* ----------------------------- Page ---------------------------- */

 #page {
 	margin: 20px 20px 10px 220px;
 }

 /* ----------------------------- News ---------------------------- */

 .news {
 	padding: 3px 0px 3px 0px;
 	margin: 10px 0px 10px 0px;
 }

 .news a {
 	text-decoration: none;
 	color: #000;
 	border-bottom: 1px dotted #777;
 	margin: 0px 2px 0px 2px;
 	padding: 1px 1px 1px 1px;
 }

 .news a:hover {
 	border: 1px dotted #000;
 	background-color: #eee;
 	padding: 1px 2px 1px 2px;
 	margin: 0px;
 }

 .news a:active {
 	background-color: #ccc !important;
 	position: relative;
 	top: 1px;
 	left: 1px;
 	padding: 1px 2px 1px 2px;
 	margin: 0px;
 }

 .news a:focus {
 	border: 1px solid #fff !important;
 	background-color: #ccc !important;
 	padding: 1px 2px 1px 2px;
 	margin: 0px;
 }

 .news h1 {
     font-size: 13px;
     letter-spacing: 0em;
     text-transform: none;
     color: #333;
     font-weight: bold;
     padding: 0px;
     margin: 0px;
     border: 0px;
 }

 .news h1 img {
 	padding-right: 5px;
 }

 .news h2 {
     font-family: "verdana", "helvetica", "arial", sans-serif;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     font-size: 10px;
     color: #666;
     font-weight:normal;
     padding-top: 2px;
     margin: 0px;
     border: 0px;
 }

 .news .info {
     font-family: "verdana", "helvetica", "arial", sans-serif;
     font-size: 10px;
 }

 .news .separator {
 	text-align: center;
 	margin: 10px 0px 10px 0px;
 }

 .template {
 	background-color: #eee;
 	border: 1px dashed #ccc;
 	padding-left: 5px;
 }

 /* ----------------------------- Body ---------------------------- */

 .body {
 	margin: 10px 0px 10px 0px;
 }

 .body h1, .body h2, .body h3, .body h4 {
 	font-family: "georgia", "times", "times new roman", serif;
     text-transform: none;
     margin: 0px 0px 0px 0px;
     color: #333;
     font-weight: bold;
 }

 .body h1 {
     font-size: 14px;
     letter-spacing: 0.15em;
     padding: 8px 0px 2px 0px;
 }

 .body h2 {
     font-size: 13px;
     letter-spacing: 0.10em;
     padding: 8px 0px 2px 0px;
 }

 .body h3 {
     font-size: 12px;
     letter-spacing: 0.05em;
     padding: 8px 0px 0px 0px;
 }

 .body h4 {
     font-size: 11px;
     letter-spacing: 0em;
     padding: 8px 0px 0px 0px;
 }

 .body p {
     font-size: 12px;
     line-height: 16px;
 }

 .body p.figure {
 	text-align: center;
 	margin: 10px 10px 10px 10px;
 	font-style: italic;
 }

 .body .first {
 	text-transform: uppercase
 }

 .body .firstletter {
 	font-size: 38px;
 	line-height: 30px;
     font-weight: normal;
     color: #111;
 	text-transform: uppercase;
 	float: left;
 	margin: 0px 5px 0px 0px;
 }

 .body img.floating-left {
 	float: left;
 	margin: 2px 5px 2px 0px;
 }

 .body img.floating-right {
 	float: right;
 	margin: 2px 5px 2px 5px;
 }

 .body blockquote {
 	margin: 10px 20px 10px 20px;
 	padding: 5px;
 }

 .body blockquote.quote {
 	text-align: justify;
 	font-style: italic;
 	border: 1px solid #ddd;
 	background-color: #eee;
 }

 .body blockquote.code {
 	font-family: monospace;
 	border: 1px solid #ddd;
 }

 .body blockquote.note:before {
 	content: "Note: ";
 	font-weight: bold;
 }

 .body blockquote.note {
 	border: 1px solid #ccc;
 }

 .body blockquote.fixme:before {
 	content: "Fixme: ";
 	font-weight: bold;
 }

 .body blockquote.fixme {
 	border: 1px dashed #ccc;
 	color: #888;
 }

 .body ul, .body ol {
 	margin: 10px 35px 10px 35px;
 	padding: 0px;
 	counter-reset: item;
 }

 .body ul > ul, .body ul > ol, .body ol > ul, .body ol > ol {
 	margin: 0px 0px 0px 35px;
 	padding: 0px;
 }

 .body li {
 	margin: 0px;
 	padding: 0px;
 }

 .body strong {
 	font-weight: bolder;
 }

 .body em {
 	text-style: italic;
 }

 .body q:before {
 	content: open-quote;
 }

 .body q:after {
 	content: close-quote;
 }

  /*
   * Workaround for missing suppport of position:fixed in IE6
   * From http://devnull.tagsoup.com/fixed/
   */
   * html
     {
     overflow-y: hidden;
     }
   * html body
     {
     overflow-y: auto;
     height: 100%;
     font-size: 100%;
     }
   * html #sidebar
     {
     position: absolute;
     }
   /* All done. */
   }
	/*
	* Licensed to the Apache Software Foundation (ASF) under one or more
	* contributor license agreements. See the NOTICE file distributed with
	* this work for additional information regarding copyright ownership.
	* The ASF licenses this file to You under the Apache License, Version 2.0
	* (the "License"); you may not use this file except in compliance with
	* the License. You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	* limitations under the License.
	*/
	/*
	* I wish I was a digital artist, but, in fact, I'm not.
	*
	* Great designers create, poor designers blatantly copy, so/so designers, well,
	* "cite". Up to you to decide in which category I belong :-)
	*
	* Anyway, citations or blatant steals, here are the sites that influenced me:
	*
	* 1) http://www.stupidfool.org/ -> an awesome example of how a web page
	* should be designed. I generally like Movable Type blogs because they
	* are used by people who care about readability of their text. Using
	* the correct fonts, giving the proper "air" (read: space) between
	* paragraphs and the like. And this comes straight fromt the people who
	* designed the tool. I seriously thought about using it, but I'm too
	* "hacker inside" and proud of my work on Cocoon to use another publishing
	* system so I wrote Linotype.
	*
	* 2) http://www.x180.org/ -> Dundan's blog. Another example of readability
	* clean design and well balanced space. To be honest, not much is
	* really 'cited' from his stylesheets or web design, if not the
	* general philosophy of 'cut the crap' which I find refreshing in
	* today's web where screen space feels like land to conquer pixel by pixel.
	*
	* 3) http://daringfireball.net/ -> hypertext has great potentials, but
	* most bloggers don't understand how visually aggressive (and distracting)
	* those scattered underlined blue single words can be. Some try to lower
	* this visual and cognitive aggression by removing the visual semantics
	* of color keying or the use of underline and move onto a mouseover.
	* One step up and two steps back: mouseover removes the hyperlink
	* information from the visual semantics realms into a mixted bidimensional
	* space of vision associated to motion, failing completely to provide a
	* 'block overview' that is normally done when you are "eye scanning"
	* a block of text to see if something interests you or not. This site
	* concentrates a lot in making hyperlinks readable, coherent and meaningful
	* without attacking your ability to read the text sequentially.
	*
	* So, as you see, a lot of effort has been put into this stylesheet by
	* many different people. If you use it, please, at least cite us in the
	* stylesheet comments so that the word will spread :-)
	*
	* Stefano.
	*/

	/* ----------------------------- Global Definitions -------------------- */

	@media screen
	{

	body {
	margin: 0px;
	padding: 0px;
	font-family: "georgia", "times", "times new roman", serif;
	color: #222;
	background-color: #fff;
	/* font-size: 12px; */
	quotes: "\201C" "\201E" "\2018" "\2019";
	}

	img {
	border: 0;
	}

	a:link {
	color: #222;
	}

	a:visited {
	color: #555;
	}

	a:hover {
	color: #000;
	}

	a:active {
	}

	a:focus {
	}

	h1 {
	font-size: 28px;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	padding: 5px 0px 20px 0px;
	margin: 5px 0px 0px 0px;
	color: #000;
	font-weight: normal;
	}

	h1 a:link, h1 a:visited {
	text-decoration:none;
	color: #000;
	}

	h1 a:hover {
	text-decoration:none;
	color: #555;
	}

	h2 {
	font-family: "verdana", "helvetica", "arial", sans-serif;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-size: 11px;
	color: #666;
	font-weight: normal;
	padding: 0px 0px 0px 0px;
	margin: -20px 0px 30px 0px;
	}

	h3 {
	padding: 0px 0px 6px 0px;
	margin: 30px 0px 30px 0px;
	}

	h3 .separator {
	margin: 0px 10px 0px 10px;
	color: #bbb;
	}

	p {
	padding: 1px;
	margin: 5px 0px 5px 0px;
	}

	div.separator {
	text-align: center;
	margin: 15px 0px 15px 0px;
	}

	blockquote {
	padding: 1px;
	margin: 10px 40px 10px 40px;
	}

	input, select {
	font-family: "georgia", "times", "times new roman", serif;
	font-size: 13px;
	color: #333;
	}

	input[type="text"] {
	border: 1px dashed #ccc;
	padding: 3px;
	}

	input[type="password"] {
	border: 1px dashed #ccc;
	padding: 3px;
	}

	input[type="button"] {
	margin: 5px 5px 5px 5px;
	border-width: 1px;
	}

	input[type="submit"] {
	margin: 5px;
	}

	/* ----------------------------- Sidebar -------------------------- */

	#sidebar {
	position: fixed;
	width: 200px;
	height: auto;
	top: 0;
	right: auto;
	bottom: auto;
	left: 0;
	text-align: center;
	}

	#sidebar img {
	margin: 20px;
	}

	#sidebar h1 {
	font-size: 12px;
	font-weight: bold;
	margin: 20px 20px 3px 40px;
	}

	#sidebar ul {
	padding: 0px 20px 10px 40px;
	margin: 0px;
	}

	#sidebar li {
	margin-left: 0px;
	list-style-type: none;
	font-family: "verdana", "helvetica", "arial", sans-serif;
	font-size: 10px;
	margin-bottom: 5px;
	}

	/* ----------------------------- Bottombar ---------------------------- */

	#bottombar {
	position: fixed;
	width: 200px;
	height: auto;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
	margin: 10px 0px 20px 0px;
	}

	/* ----------------------------- Footer ---------------------------- */

	#footer {
	margin: 30px 20px 20px 220px;
	text-align: center;
	}

	/* ----------------------------- Path ---------------------------- */

	#path {
	margin: 10px 20px 10px 220px;
	padding: 0px;
	text-align: left;
	}

	/* ----------------------------- Page ---------------------------- */

	#page {
	margin: 20px 20px 10px 220px;
	}

	/* ----------------------------- News ---------------------------- */

	.news {
	padding: 3px 0px 3px 0px;
	margin: 10px 0px 10px 0px;
	}

	.news a {
	text-decoration: none;
	color: #000;
	border-bottom: 1px dotted #777;
	margin: 0px 2px 0px 2px;
	padding: 1px 1px 1px 1px;
	}

	.news a:hover {
	border: 1px dotted #000;
	background-color: #eee;
	padding: 1px 2px 1px 2px;
	margin: 0px;
	}

	.news a:active {
	background-color: #ccc !important;
	position: relative;
	top: 1px;
	left: 1px;
	padding: 1px 2px 1px 2px;
	margin: 0px;
	}

	.news a:focus {
	border: 1px solid #fff !important;
	background-color: #ccc !important;
	padding: 1px 2px 1px 2px;
	margin: 0px;
	}

	.news h1 {
	font-size: 13px;
	letter-spacing: 0em;
	text-transform: none;
	color: #333;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
	border: 0px;
	}

	.news h1 img {
	padding-right: 5px;
	}

	.news h2 {
	font-family: "verdana", "helvetica", "arial", sans-serif;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	font-size: 10px;
	color: #666;
	font-weight:normal;
	padding-top: 2px;
	margin: 0px;
	border: 0px;
	}

	.news .info {
	font-family: "verdana", "helvetica", "arial", sans-serif;
	font-size: 10px;
	}

	.news .separator {
	text-align: center;
	margin: 10px 0px 10px 0px;
	}

	.template {
	background-color: #eee;
	border: 1px dashed #ccc;
	padding-left: 5px;
	}

	/* ----------------------------- Body ---------------------------- */

	.body {
	margin: 10px 0px 10px 0px;
	}

	.body h1, .body h2, .body h3, .body h4 {
	font-family: "georgia", "times", "times new roman", serif;
	text-transform: none;
	margin: 0px 0px 0px 0px;
	color: #333;
	font-weight: bold;
	}

	.body h1 {
	font-size: 14px;
	letter-spacing: 0.15em;
	padding: 8px 0px 2px 0px;
	}

	.body h2 {
	font-size: 13px;
	letter-spacing: 0.10em;
	padding: 8px 0px 2px 0px;
	}

	.body h3 {
	font-size: 12px;
	letter-spacing: 0.05em;
	padding: 8px 0px 0px 0px;
	}

	.body h4 {
	font-size: 11px;
	letter-spacing: 0em;
	padding: 8px 0px 0px 0px;
	}

	.body p {
	font-size: 12px;
	line-height: 16px;
	}

	.body p.figure {
	text-align: center;
	margin: 10px 10px 10px 10px;
	font-style: italic;
	}

	.body .first {
	text-transform: uppercase
	}

	.body .firstletter {
	font-size: 38px;
	line-height: 30px;
	font-weight: normal;
	color: #111;
	text-transform: uppercase;
	float: left;
	margin: 0px 5px 0px 0px;
	}

	.body img.floating-left {
	float: left;
	margin: 2px 5px 2px 0px;
	}

	.body img.floating-right {
	float: right;
	margin: 2px 5px 2px 5px;
	}

	.body blockquote {
	margin: 10px 20px 10px 20px;
	padding: 5px;
	}

	.body blockquote.quote {
	text-align: justify;
	font-style: italic;
	border: 1px solid #ddd;
	background-color: #eee;
	}

	.body blockquote.code {
	font-family: monospace;
	border: 1px solid #ddd;
	}

	.body blockquote.note:before {
	content: "Note: ";
	font-weight: bold;
	}

	.body blockquote.note {
	border: 1px solid #ccc;
	}

	.body blockquote.fixme:before {
	content: "Fixme: ";
	font-weight: bold;
	}

	.body blockquote.fixme {
	border: 1px dashed #ccc;
	color: #888;
	}

	.body ul, .body ol {
	margin: 10px 35px 10px 35px;
	padding: 0px;
	counter-reset: item;
	}

	.body ul > ul, .body ul > ol, .body ol > ul, .body ol > ol {
	margin: 0px 0px 0px 35px;
	padding: 0px;
	}

	.body li {
	margin: 0px;
	padding: 0px;
	}

	.body strong {
	font-weight: bolder;
	}

	.body em {
	text-style: italic;
	}

	.body q:before {
	content: open-quote;
	}

	.body q:after {
	content: close-quote;
	}

	/*
	* Workaround for missing suppport of position:fixed in IE6
	* From http://devnull.tagsoup.com/fixed/
	*/
	* html
	{
	overflow-y: hidden;
	}
	* html body
	{
	overflow-y: auto;
	height: 100%;
	font-size: 100%;
	}
	* html #sidebar
	{
	position: absolute;
	}
	/* All done. */
	}