/* Mostly stolen from the Blue Robot's 3 column css
    http://bluerobot.com/web/layouts/layout3.html
    severeal dis-improvements added by me. 
    If in doubt, better copy from the original.
    Sven-S. Porst <ssp-web@earthlingsoft.net>
    
    I guess by now there are so many additions to the original CSS
    that it may be hard to recognise.
*/

body
{
    color: #333;
    background-color: white;
    /*margin: 1.5em; */
    padding: 0px;
    font-family: Georgia,Palatino,serif;
    /*  font-size:93%;*/
    line-height: 130%;
    background: url(http://nederspania.eu/wikiimg/feuille.png) no-repeat right top;
}

/* ---------------------------------------------------
        HEADINGS
   --------------------------------------------------- */

h1,h2, .dashedbox, .np
{
    font-family: Optima,Tahoma,Verdana,sans-serif;
    font-weight: bold;
    line-height: 120%;

}

#editthis
{
    background: url(http://nederspania.eu/wikiimg/fork.png) no-repeat right top;
}

h1
{
    margin: 0px;
    padding: 0px;
}

h1
{
    font-size: 200%;
    color: black;
    #background-color: white;
}

h1 a
{
    font-weight: bold;
    color: black;
}

#wikititle
{
    font-size: 80%;
    font-weight: normal;
}
h2#subtitle
{
    font-size: 100%;
    margin-bottom: 0px;
    color: #666;
}

#content {
    /* margin: 1.5em; */
    line-height: 120%;
    border: 1px solid #cccccc;
    padding: 1em 2em 1em 2em;
    background: #ffffee
    }


h3
{
    margin-top: 1.4em;
    margin-bottom: 0.4em;
}

h4[id]:hover:after {
    content:"#" attr(id);
    background:rgba(255,255,255,0.9);
    color:#999;
    padding-left:0.5em;
    position:absolute;
    right:0em;
}

h4.monthlyEntry, h4.weeklyEntry
{
    margin: 0em;
    font-size: 120%;
}


p.wordcount
{
    padding-left:3em;
    font-style:italic;
    color:#999;
}

h4.monthlyEntry>span:first-child
{
    color:#eee;
    font-size:200%;
}

.content .info
{
    font-style:italic;
    margin-top:-0.7em;
    padding:0px;
    color:#aaa;
}

.content .info:hover
{
    color:#666;
}


.content>div>.date
{
    font-style:italic;
    color:#eee;
}

div:hover>h4.monthlyEntry>span:first-child, .content>div:hover>.date
{
    color:#999;
}


/*
h5
{
    font-size: 100%;
    font-style: italic;
    font-weight: normal;
    float: left;
    margin-top: 1em;
    margin-bottom: 0px;
    margin-right: 0.5em;
}*/


/*p>h5 {
    font-size: 100%;
    font-style: italic;
    display:inline;
    }
*/

/* ---------------------------------------------------
        LINKS
   --------------------------------------------------- */

a { text-decoration: none; }

a:link
{
    color: #069;
   /*font-weight: bold;*/
    text-decoration:underline;
}

.content a[href^="http://earthlingsoft.net/ssp/blog/"]:link {
    color: #069;
    font-weight:normal;
}

a:hover 
{ 
/*  background-color: #eee; */
    text-decoration:underline;
}

a:visited
{
    color: #069;
}

/* found at: http://lists.w3.org/Archives/Public/www-archive/2002Dec/0102.html */
a[hreflang]:after
{
    content: "[" attr(hreflang) "]";
    margin-left: 0.3em;
}




/* iTMS links */
a[href^="itms"]:before, a[href^="http://phobos.apple.com"]:before
{
    vertical-align:middle;
    padding-right:2px;
    content: url(http://earthlingsoft.net/ssp/blog/includes/iTunesStore.png);
}


/* OS X.4 Dictionary links */
a[href^="dict"]:before
{
    vertical-align:middle;
    padding-right:2px;
    content: url(http://earthlingsoft.net/ssp/blog/includes/Dictionary.png);
}




/* AppleShare links */
a[href^="afp"]:before
{
    vertical-align:middle;
    padding-right:2px;
    content: url(http://earthlingsoft.net/ssp/blog/includes/AFPVolume.png);
}


/* PDF links */
a[href$=".pdf"]:before
{
    vertical-align:middle;
    padding-right:2px;
    content: url(http://earthlingsoft.net/ssp/blog/includes/PDF.gif);
}

/* PS links */
a[href$=".ps"]:before
{
    vertical-align:middle;
    padding-right:2px;
    content: url(http://earthlingsoft.net/ssp/blog/includes/PS.gif);
}

/* ZIP file links */
a[href$=".zip"]:before
{
    vertical-align:middle;
    padding-right:2px;
    content: url(http://earthlingsoft.net/ssp/blog/includes/ZIP.png);
}


/* Script links */
a[href$=".scpt"]:before
{
    vertical-align:middle;
    padding-right:2px;
    content: url(http://earthlingsoft.net/ssp/blog/includes/scpt.png);
}

/* RealPlayer links */
a[href$=".ram"]:before, a[href$=".rm"]:before
{
    vertical-align:middle;
    padding-right:2px;
    content: url(http://earthlingsoft.net/ssp/blog/includes/RealPlayer.png);
}




/* ---------------------------------------------------
        GENERAL TAGS & TIDBITS
   --------------------------------------------------- */

ins { text-decoration: none; }


.aside:before {
    content:"Aside:";
    color:#333;
}

.update:before {
    content:"Update:";
    color:#333;
}

.aside, .aside p, .update, .update p {
    padding-left:3em;
    color:#666;
}

pre, code
{
    font-family: Courier,fixed;
    font-size: 90%;
    line-height: 100%;
}

/*pre {overflow:auto;}*/

.hilite
{
    background-color: #09c;
    color: white;
    font-weight: bold;
    padding-left: 0.15em;
    padding-right: 0.15em;
}

p.note, .note
{
    margin-left: 3em;
    text-align: right;
    font-size: small;
}

p.note:first-child { font-style: italic; }
.type { font-style: italic; }

p.time, .by
{
    margin-top: 0em;
    font-style: italic;
    text-align: right;
    color: #666666;
    padding-right: 0.3em;
    clear: right;
}

/* ---------------------------------------------------
        QUOTING
   --------------------------------------------------- */

/*
.quote
{
    padding-top: 0.7em;
    padding-bottom: 0.7em;
}

.quote p
{
    margin-top: 0px;
    margin-bottom: 0px;
}

.quote p:before { content: open-quote; }
.quote p:after { content: close-quote; }

p.quote, .quote, p.cite
{
    margin-left:1.5em;
    margin-right:0.7em;
    font-style: italic;
}

q { font-style: italic; }
*/

/*
Safari can't deal with this
q 
{
    quotes: '\201C' '\201D' '\2018' '\2019';
}
*/

q:before { content: "\201C"; }
q:after { content: "\201D"; }
q q:before { content: "\2018"; }
q q:after { content: "\2019"; }
.quote, q, blockquote { font-style: italic; }

.quote, blockquote
{
    margin-left: 0.2em;
    padding-left: 1.3em;
    padding-right: 0.7em;
    margin-top: 0.7em;
    margin-bottom: 0.5em;
    border-left: thin solid #ccc;
}

/*
.quote:hover, blockquote:hover
{
    border-left:thin solid #09c;
}
*/

.quote em, q>em, p.quote>em, blockquote>em { font-style: normal; }

.quote>.by, blockquote>.by
{
    margin-top: 0.5em;
    padding-bottom: 0.2em;
}

.quote:hover>.by { color: black; }
.quote>.by:before, blockquote>.by:before { content: "-- "; }
.quote>.by:after, blockquote>.by:after { content: ""; }

/* ---------------------------------------------------
        CONTENT GENERAL
   --------------------------------------------------- */

.content
{
    /* Position is declared "relative" to gain control of stacking order (z-index). */
    position: relative;
    width: auto;
    min-width: 15em;
    margin: 0px 13em 1.5em 10.5em;
    border: none;
    background-color: white;
    padding: 0.8em;
    /* This allows the content to overlap the right menu in narrow windows in good browsers. */
    z-index: 3;
}

.content#titles { margin-bottom: 0px; }
.content>p { margin: 0px; }
.content>p+p, .content>h5+p { margin-top: 1em; }

.centred 
{
    text-align:center;
}

.content img, .gravatar
{
    border: 0px none;
    float: right;
    padding: 0.2em;
    padding-left: 0.5em;
    padding-right: 0px;
}

/* 
img.im is for 150x150 pixel graphics:
will leave this using px for the time being as it should be the best way to ensure 150pixel images are drawn at that size 
*/

.content img.im
{
    height: 150px;
    width: 150px;
}


.centred img, img.centred
{
    float:none;
    text-align:center;
}

img.formula
{
    float: none;
    vertical-align: text-bottom;
}

img.displaymath
{
    display: block;
    text-align: center;
    float: none;
    margin: 0.4em auto 0.4em auto;
}

img {
    max-width: 100%;
}

/* ---------------------------------------------------
        CONTENT HEADINGS
   --------------------------------------------------- */

.content>h1.date
{
    font-size: 1.5em;
    color: #ccc;
}

.content>h3 a, .content>h3
{
    font-weight: normal;
    font-size: 123%;
    font-family: Zapfino,Optima,Tahoma,Verdana,sans-serif;
    margin-bottom: 1em;
    margin-top: 0.1em;
    padding-top: 1em;
    z-index: 4;
    color: black;
}

.content>h3 a:visited { color:black;}
.content>h3 a.par:visited { color:#09c; }

.content>h3 .par
{
    font-weight: normal;
    /* so Safari doesn't replace sans-serif font for Zapfino bold */
    margin-left: 0.3em;
    z-index: 4;
    color:#09c;
}

.content .np
{
    width: 40%;
    font-weight: bold;
    margin: 0px 0px 0.3em 0.3em;
    float: right;
    /*  position:relative;
    bottom:5em;
    display:inline;
    */
}

.content .np p { margin: 0px 0.3em 0px 0.6em; }

/* labels for comment field */
.content .label {
    color:#666;
}

.content .label:hover {
    color:black;
    letter-spacing:2px;
}


/* ---------------------------------------------------
         BIG NAVIGATION CONTAINERS
   --------------------------------------------------- */

.bigbox
{
    position: absolute;
    top: 1.4em;
    padding: 0px;
    z-index: 1;
}

.bigbox#alpha
{
    width: 9.7em;
    left: 1.4em;
}

.bigbox#beta
{
    width: 12.5em;
    right: 1.4em;
}

#largelogo
{
    height: 9.7em;
    width: 9.7em;
    padding: 0px;
    float: none;
    /*  background-image:url(http://earthlingsoft.net/ssp/blog/graphics/qlclarge.gif);
    background-repeat:no-repeat;*/
    border: 1px solid white;
    margin-bottom: 0.5em;
}

img#largelogo:hover
{
    border: 1px solid #ddd;
    color: white;
}

/* ---------------------------------------------------
         DASHED BOXES
   --------------------------------------------------- */

div.dashedbox, div.np, div.delicious-posts
{
    border: 1px dashed #eee;
    color: #999; /* neu */
    background-color: #eee;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    font-size: 88%;
    line-height: 145%;
    overflow:hidden;
}

div.dashedbox ul a, div.np ul a, div.delicious-posts ul a 
{
    color:#bbb;
}

div.dashedbox h3 a, div.np h3 a, div.delicious-posts h2.delicious-banner a
{
    color:white;
    font-weight:bold;
}


div.dashedbox:hover ul a, div.np:hover ul a, div.delicious-posts:hover ul a
{
    color: #69c;
}

div.dashedbox:hover, div.np:hover, div.delicious-posts:hover
{ 
    color:#999;
    border: 1px solid #ccc; 
}

div.dashedbox:hover h3, div.np h3, div.delicious-posts:hover h2.delicious-banner
{
    background-color:#ccc;
}


div.dashedbox>h3, .np>h3, div.delicious-posts>h2.delicious-banner
{
    font-size: 120%;
    color: white;
/*  background-color: #aaa; */
    background-color: #ddd;
    padding-left: 1em;
    padding-right: 0.7em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    margin: 0px;
    margin-bottom: 0.6em;
}


div.dashedbox ul, div.np ul, div.delicious-posts ul
{
    list-style-type: none;
    list-style-position: inside;
    padding-left: 1.1em;
    padding-right: 1em;
    margin: 0px;
    padding-bottom: 0.2em;
    padding-top: 0.2em;
    text-indent: -1em;
    margin-left: 1em;
}


div.dashedbox ul ul {
    padding-left:0em;
    padding-right:0em;
}

div.dashedbox ul li .author, .author a:link
{
    font-weight:normal; 
    text-indent:0px;
}


div.dashedbox ul li, div.np ul li, div.delicious-posts ul li
{ 
    margin-bottom: 0.1em; 
}

/* Nicely positioned Google Ads */
div.dashedbox iframe {
    margin-left:1.5em;
}


/* *********************  */
/* FORMS                  */
/* *********************  */

form { margin: 0px; }
input#search { font-size: 88%; }

input#searchbutton
{
    font-size: 88%;
    text-align: center;
    display: none;
}

textarea {
    width:100%;
}

input.commentsubmitbutton {
    margin-left:auto;
    display:block;
    float:right;
}


/* *********************  */
/* RANDOM NONSENSE        */
/* *********************  */
div#foot
{
    padding-top: 0.2em;
    border-top: dashed 1px #666;
    text-align: center;
    font-style: italic;
}

/* hide stuff */
.i
{
    color: white;
    display: none;
}

/* *****************************  */
/* COMMENTS AND TRACKBACKS        */
/* *****************************  */
input.author, input.email, input.url { width: 20em; }


/* for Flickr images in sidebar */

#flickr img {padding:0px 7% 0.4em 7%; width:9.1em; height:9.1em; border:none;}
#flickr a:link, #flickr a:visited, #flickr a:active, #flickr a:visited {border:none;}





/* *****************************  */
/* FOR PRINTING                   */
/* Used to be in qlcprint.css     */
/* *****************************  */

@media print {

.content {
    margin:0px;
}

.content h1.title:after {
    content:url(http://earthlingsoft.net/ssp/blog/graphics/qlc.gif);
}

.backforward, #commentform, .noprint, .bigbox {
    display:none;
}
}

@media (min-width: 600px) {
#content {
       margin: 1.5em; 
    }
}
@media (min-width: 900px) {
    body {
       margin: 1.5em; 
    }
}