MediaWiki:Myskin.css: Difference between revisions

Revision as of 17:37, 15 August 2006

/*aburton's olpc mediawiki skin*/

/*SITE NOTICE
 * what you want everyone to see on every page.
 */

#siteNotice{
    display:none;
}



/*GLOBAL STYLE
 * Define what styles should be default for most elements
 *  on the page.
 */

body{
    font-family: arial, "lucida console", sans-serif;
    font-size: small;
    background-color: #FFF;
    width:99%;
    margin: 0;
}

a{
    text-decoration: none;
    border-bottom: 1px dotted ;
    color: #4444FF;
}

/*image links shouldn't be underlined.*/
a.internal{
    border-bottom: 0;

}



/*the little numbers that go after external links*/

a.autonumber {
    vertical-align: super;
    border-bottom: none;
    font-size: x-small;
}


/*This is pretty much everything except the footer.*/
#content {

}



/*END global style*/






/*HEADER SECTION
 * Change whatever you want for the different headers
 */


/*This is the title of the page*/
h1.firstHeading{
    z-index: 3;
    font-size: 2.5em;
    font-weight: 400;
    position: relative;
    top: 0;
    left: 4.6em;
    float: left;
    padding-top: .7em;
    padding-left: 1em;
    background-color: transparent;
}

#contentSub{
    clear: left;
    position: relative;
    left: 2.5em;
    top: -1.5em;
    font-style: italic;
    font-size: small;
}

#jump-to-nav{
   display: none; 
}


h2{
    position: relative;
    left: -1em;
    border-bottom: 1px solid #aaa;

}

/*This is just a secondary header. It's used for advertising the site.
 */
h3#siteSub{
    display:none;
}

h4{
border-bottom: 1px solid #aaa;
}

.portlet h5{
    background-color: #FFA64D;
    white-space: nowrap;
    text-align: center;
}




/*END header section*/





/*LOGO PLACEMENT
 *The logo is a block element and should only contain
 *a background image. 
 */
#p-logo {
    z-index: 2;
    position:absolute; /* needed to use z-index */
    top: 0;
    left: 0;
    height: 8.8em;
    width: 11.5em;
    overflow: visible;
    background-image: url(http://dev.laptop.org/www/olpc_banner_small.gif); 
    background-color: transparent; /*#FBF4D1; /*a light orange*/
    background-repeat: no-repeat;
    background-position:1.5em 1.5em;
    display: block;
}
/*END logo section*/

/*NAVIGATION CONTENT GEOGRAPHY
 * This specifies the location of the navgation content. 
 * This is essentially "column one"
 */

#column-one{
    position: absolute;
    top: 0;
    left: .75em;
    width: 10.5em;   
    max-width: 30%;
    
   /*padding-right: 1.5em;*/
    
}

.pBody{
    width: 10.5em;
}


#column-one div.portlet{
    top:0em;
}

.pBody li {
    position: relative;
    top: -1em;
    left: -2.8em;
    width: 9em ;    
}



/*END navigation content geography*/

/*NAVIGATION CONTENT STYLE
 * This specifies the location of the navgation content. 
 * This is essentially "column one"
 */


.portlet a {
    border-bottom-width: 0;
    color: #E44400;
}

.portlet li:hover {
    background-color: #FFEBCC;

}

.portlet ul {
    list-style: none;

}

.portlet li {
    padding: .1em;
    border-bottom: 1px solid #FFEBCC;
}

/*END navigation content style*/






/*PAGE TABS GEOGRAPHY
 * where on the page you want your tabs, and how you want them
 * ordered.
 */

#p-cactions { /*this is the list of tabs*/ 
    position: fixed;
    z-index: 3;
    left: 30em;
}


/*END page tabs geography*/



/*PAGE TABS STYLE
 * how you want your tabs to look
 */

#p-cactions h5{
    display: none; /*this is so the label "Views" doesn't show*/ 
}

#p-cactions li{
    display: inline;
    background-color: #FFF0C0;
    white-space: nowrap;
    border: 1px solid #000 !important;
    padding-left: .5em !important;
    padding-right: .5em !important;
}


#p-cactions ul{
    white-space: nowrap;
    padding-left: 0;
    position: absolute;
    top: -1em;
    marker-offset: 0;
    list-style-type: none;
    background-color: #FFF;
    border-right: .2em solid #FFF;
    border-left: .2em solid #FFF;
}

#p-cactions a{
    font-size: small;
    color: #000;
}

#p-cactions a:hover{
    text-decoration: underline;
}

/*END page tabs style




/*ARTICLE CONTENT GEOGRAPHY
 * this specifies the location of the article. This is essentially
 * "column two" 
 */

#bodyContent{
    width: 55em;
    position:relative;
    left: 13em;
    z-index: 1;
    /*visibility: hidden; /*debugging*/

}


#bodyContent p{
    clear:left;
    position:relative;
    left: 1em;
}

#bodyContent img{
    border: 1px dotted #aaa;
}


div.thumb.tleft{
    float: left;
    white-space: nowrap;
}    

div.thumb.tright{
    float: right;
    whitespace: nowrap;
}


/*END article content geography*/




/*ARTICLE CONTENT STYLE
 * this specifies the style of text within the article.
 */

#bodyContent{
    background-color: #FFFFFF;
    border-left: .08em solid #000;
    padding-left: 2em;
    /* letter-spacing: .1pt;
    word-spacing: 2pt;
    line-height: 1.5em; */

}

#bodyContent a:hover {
    border-bottom-style: solid ;
}


/*END article content style */




/*PAGE FOOTER STYLE
 * the style for your page footer
 */

/*END page footer style*/



/*PAGE FOOTER GEOGRAPHY
 * the location of your page footer
 */

/*visualClear keeps the footer at the bottom of the page*/
.visualClear{
    clear:both;
}

div#footer{
    float:left;
    position:relative;
    left: 13em;
    margin: 2em;
}

/*END page footer style*/




/*HACKS*/

#p-personal { 
    position: relative;
    margin-top: 8.8em;
}

/*END hacks*/