view static/css/styles.css @ 462:5ca151c7a4e6

frontpage: remove autowidth class, wrap words in quick start example

Right now this means that the first line (with the repo URL) will get
word-wrapped, and it doesn't look too good:

"""
$ hg clone
https://selenic.com/repo/hello
"""

The next patch will use a different URL for a different effect.

@font-face
{
    font-family: Optimer;
    src: url(/MgOpenCosmeticaRegular.ttf);
}

/*
 * Reset
 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
fieldset, img { border: none; vertical-align: middle; }
hr { display: none; }

/*
 * Margins
 */
p, ul, ol, dl, table { margin: 0 0 1em 0; }

/*
 * Hyperlinks
 */
a { color: #00b5f1; text-decoration: underline; overflow: hidden; }
a:hover, a:focus { text-decoration: none; }

/*
 * General Document Settings
 */
body { font: .975em/1.4285em "Helvetica Neue", DejaVuSans, Helvetica, Verdana, Arial, sans-serif; color: #111; background-color: #fff; width: 900px; margin: 0 auto; position: relative; }

/*
 * Headings
 */
h1, h2, h3 { font-family: Optimer, DejaVuSans, Helvetica, Arial, sans-serif; margin: 0 0 .5em 0; font-weight: normal; line-height: 1em; }
h4, h5, h6 { font-size: 1em; margin: 0 0 .5em 0; }
h1 { font-size: 3em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }

/*
 * Lists
 */
ul { margin-left: 2.2em; line-height: 1.5em; }
li ul, li ol { margin-top: 0; margin-bottom: 0; }
li { margin: .3em 0; }
ol { margin-left: 2.2em; }
ol li { list-style-type: decimal; }
ol li ol li { list-style-type: lower-alpha; }
ol li ol li ol li { list-style-type: upper-roman; }

dt { font-weight: bold; margin-top: 10px; }
dt em { font-style: normal; display: block; font-weight: normal; }
dd em { font-style: normal; font-weight: bolder; }
dd { background: url(../images/bullet.gif) no-repeat 10px .5em; padding-left: 20px; }
dl {
    padding-bottom: 1em;
}

/*
 * Forms
 */
input, textarea, select { font-family: DejaVuSans, Helvetica, Arial, sans-serif; font-size: .8571em; vertical-align: top; }
textarea { overflow: auto; width: 220px; height: 90px; }
form ol { margin: 0; }
form ol li { list-style: none; margin: 0 0 10px 0; display: block; overflow: hidden; }
label { float: left; width: 100px; padding-right: 10px; text-align: right; }
.submit { margin-left: 110px; }

/*
 * Table
 */
table { border-collapse: separate; border-spacing: 0; font-size: 90% }
caption, th, td { text-align: left; font-weight: normal; }
td, th { padding: 6px 8px; }
.latest thead td, .latest thead th { background: #00B5F1; color: #fff; font-weight: bold; }
thead td, thead th { background: #999; color: #fff; font-weight: bold; }
tbody td { border-bottom: 1px solid #ccc; }
tbody td em { font-style: normal; font-weight: bolder; }
tbody td:last-child { width: 5em; }

/*
 * Table expansion
 */
div #more { font-size: smaller; color: #999; }

/*
 * Quotes
 */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/*
 * Layout
 */
.row { display: block; overflow: hidden; border-bottom: 1px solid #ccc; }
.col { float: right; display: inline; width: 295px; margin: 25px; }
.big { float: left; width: 470px; }
.quote { float: right; width: 740px; text-align: right; margin-right: 25px;   }
.big h2 { margin-top: 20px; }

/*
 * Logo
 */
#logo { border-bottom: 1px solid #ccc; margin: 0 0 15px 0; }
#logo a { display: block; width: 184px; height: 61px; background: url(../images/mercurial-logo.png) no-repeat 0 0; text-indent: -9999px; }

/*
 * Nav
 */
#nav { position: absolute; top: 17px; right: 0; background: #999; height: 42px; margin: 0; width: 725px; font-size: 1em; *font-size: 16px; line-height: 42px; font-family: Optimer, DejaVuSans, Helvetica, Arial, sans-serif; overflow: hidden; }
#nav li { float: left; margin: 0; padding: 0; list-style: none; }
#nav a { float: left; color: #fff; text-decoration: none; padding: 0 16px; *padding: 0 14px; }
#nav a:hover, #nav a:focus, #nav .active a { background: #00b5f1; }

/*
 * Search
 */
#search { position: absolute; right: 15px; top: 26px; color: #fff; width: 183px; height: 23px; background: url(../images/search.png) no-repeat 0 0; }
#search legend { display: none; }
#search label { position: absolute; left: -9999px; }
#search .text { width: 150px; background: none; border: none; margin: 0 0 0 5px; position: relative; top: 5px; color: #666; outline:0; }
#search .submit { width: 23px; height: 23px; background: none; border: none; cursor: pointer; text-indent: -9999px; color: #10B8F0; *color: #fff; font-size: 1px; }

/*
 * Download button
 */
.download { display: block; width: 175px; height: 59px; padding: 14px 80px 14px 30px; background: #12baf2 url(../images/download.png) no-repeat 0 0; color: #fff; text-decoration: none; font-family: Verdana, Arial, sans-serif; }
.download strong { display: block; font-size: 1.2857em; margin-bottom: 4px; }
.download em { font-style: normal; font-weight: bold; }
.download span { display: block; font-size: .7142em; }

/*
 * Homepage
 */
#home #logo { margin-bottom: 0 !important; }
#home dl,
#home .dl-note { margin: 0 30px; font-family: Verdana, DejaVuSans, Helvetica, Arial, sans-serif; font-size: .80em; line-height: 1.4em; }
#home .dl-note { padding-bottom: 1em; }
/* #home h1 { font-size: 48px; line-height: 1em; margin: 0 0 20px 0; font-weight: normal; } */
#header { font-size: 48px; line-height: 1em; margin: 0 0 20px 0; font-weight: normal; }
#subheader { font-size: 22px; line-height: 1.2em; margin-bottom: 20px; font-weight: normal; }
/* #home h2, #home h3 { font-size: 22px; line-height: 1.2em; margin-bottom: 20px; font-weight: normal; } */
#home h4 { font-weight: normal; margin: 0; }
#home h4 a { text-decoration: none; }
#home h4 a:hover, #home h4 a:focus { text-decoration: underline; }
#home ol { margin: 0; }
#home ol li { list-style: none; background: url(../images/bullet-big-1.png) no-repeat 0 0; padding-left: 60px; min-height: 43px; _height: 43px; margin-bottom: 1.7em }
#home ol .i-2 { background-image: url(../images/bullet-big-2.png); } 
#home ol .i-3 { background-image: url(../images/bullet-big-3.png); }
#home ol a { text-decoration: none; }
#home ol a:hover { text-decoration: underline; }

/*
 * Footer
 */
#footer { font-family: Verdana, DejaVuSans, Helvetica, Arial, sans-serif; font-size: .6428em; display: block; overflow: hidden; text-align: right; padding: 10px 25px; }
#footer div { float: left; }
#footer a { text-decoration: none; }

/* 
 * Mercurial commands interspersed in text 
 */

#home hg { text-decoration: italic; }

/*
 * Lists without big bullet type...
 */

#home .undecorated_list li { list-style:decimal outside; background: none; padding-left: 0px; min-height: 0px; margin-bottom: 1.7em} #home .undecorated_list li li { list-style: circle outside }

/*
 * Notes
 */
.note {
    border-top: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    padding: 0.3em 1em;
    margin: 0.2em 1em 1em;
    font-size: .90em;
}

/*
 * code and commands
 */
pre, .output {
	font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
	font-size: .90em;
	overflow-x: visible;
}

.output {
    border-left: 1px #ccc solid;
    border-right: 1px #ccc solid;
	background-color: #eee;
    margin: 0.2em 1em 1em;	
    padding: 0.3em 1em;
	white-space: pre-wrap;
}

.output:first-line {
	font-size: .90em;
	font-style: italic;
}

.wrap {
    white-space: pre-wrap;
}