@charset "utf-8";

/*  -------------------------------------------------------------
    Black Concrete design - Purple accent
    A black design for www.dereckson.be, my personal web site
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Author:         Sébastien Santoro aka Dereckson [DcK]
    Tags:           black purple destroy retro
    Filename:       theme.css
    Version:        1.0
    Created:        2007-12-17
    Updated:        2008-09-07 ; 2012-04-01
    Licence:        Creative Commons BY SA 3.0
    -------------------------------------------------------------    */

/*  -------------------------------------------------------------
    Global layout & style
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -    */
body {
    margin: 14px 0 0 0;
    background-color: #000000;
    background-image: url(concrete.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #e3e3e3;
    font-family: "Lucida Sans Unicode", "Trebuchet MS", "Helvetica", "Arial", sans-serif;
    font-size: 80%;
}

#avatar {
    position: absolute;
    left: 48px;
    top: 40px;
    background-image: url(Avatar.png);
    width: 96px;
    height: 96px;
}

#content {
    position: absolute;
	left: 200px;
    border-top: 3px solid #4a4464;
    margin: 23px 20px 0 0;
}

img {
    border-width: 0;
}

/*  -------------------------------------------------------------
    Titles
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -    */

h1 {
    color: white;
}

h2 {
    color: #16c3cc;
    font-size: 120%;
}

h3 {
   color: #664771;
   font-size: 110%;
}

.icoTitle img {
    vertical-align: middle;
    margin-right: 8px;
}

/*  -------------------------------------------------------------
    Links
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */

a {
	text-decoration: none;
}

a:link {
	color: #16c3cc;
	/* color: #adcf4f; */
	/* color: #ff8000;*/
}

a:hover {
	color: red;
}

a:visited {
	color: #4a4464;
}

/*  -------------------------------------------------------------
    Articles
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */

.article p {
    text-align: justify;
    text-indent: 6px;
}

.centered {
	text-align: center;
}

.block {
	float: left;
}

/*  -------------------------------------------------------------
    Misc
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */

pre {
	font-size: 1.25em;
	font-family: "Fixedsys Excelsior 3.01", Consolas, Menlo, Monaco, Lucida Console, DejaVu Sans Mono, Bitstream Vera Sans Mono, monospace
}

/*  -------------------------------------------------------------
    Top menu
    
    Author: Stu Nicholls's - www.cssplay.co.uk
    http://www.cssplay.co.uk/menus/pro_horizontal.html
    
    To recreate the same menu I use, download Professional #1, edit
    the GIF images in Adobe Photoshop, menu Image > Mode > RGB Color
    then menu Image > Adjustments > Hue/Saturation.
    Here, I've used 253° as hue, 19% as saturation.
    The bottom border should be dropped with dark backgrounds.
    The gray text should be edited to match the main hue.

                                                              DcK.
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -    */

.topmenu {
    padding: 0 0 0 32px;
    margin: 0 0 0 0;
    list-style: none;
    height: 35px;
    background: #fff url(TopMenuPurple1.gif);
    position: relative;
    border: 1px solid #000;
    border-width: 0 1px;
    /* border-bottom: 1px solid #444; */
}

.topmenu li { float: left; }

.topmenu li a {
    display: block;
    float: left;
    height: 35px;
    line-height: 35px;
    color: #a19aba;
    text-decoration: none;
    font-size: 11px;
    font-family: arial, verdana, sans-serif;
    font-weight: bold;
    text-align: center;
    padding: 0 0 0 8px;
    cursor: pointer;
}

.topmenu li a strong {
    float: left;
    display: block;
    padding: 0 16px 0 8px;
} 

.topmenu li.current a {
    color: #fff;
    background: url(TopMenuPurple3.gif);
}

.topmenu li.current a strong { background: url(TopMenuPurple3.gif) no-repeat right top; }

.topmenu li a:hover {
    color: #fff;
    background: #000 url(TopMenuPurple2.gif);
}

.topmenu li a:hover strong { background: url(TopMenuPurple2.gif) no-repeat right top; }

.topmenu li.current a:hover {
    color: #fff;
    background: #000 url(TopMenuPurple3.gif);
    cursor: default;
}

.topmenu li.current a:hover strong { background: url(TopMenuPurple3.gif) no-repeat right top; }

/*  -------------------------------------------------------------
    Left menu
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */

#leftMenu {
    position: absolute; 
	top: 150px;
	left: 0;
    width: 170px;
    margin: 0 10px 0 10px;
    padding: 10px 0 10px 0;
    border-top: 3px solid #4a4464;
    border-bottom: 3px solid #4a4464;
}

.navMenu {
    list-style-type: none;
    font-size: 120%;
    font-variant: small-caps;
}

.navMenu li {
    padding: 0 0 4px 0;
    margin-left: -32px;
}

.navMenu a {
    color: #4a4464;
    text-decoration: none;
    padding-left: 16px;
}

.navMenu a:hover {
    color: #16c3cc;
    text-decoration: none;
    padding-left:12px;
    border-left: 4px solid #16c3cc;
}

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

#footer {
    background: black;
    width: 100%;
    border-top: 3px solid #323232;
    border-bottom: 3px solid #323232;
    position: relative;
    margin: 0 0 21px 0;
    font-size: 95%;
	padding: 4px 0;
	visibility: hidden;
}

#footer .left {
    float:left;
    width:67%;
    margin-left: 8px;
}

#footer .left img {
        vertical-align: middle;
        margin-right: 8px;
}


#footer .right {
    text-align: right;
    margin-right: 8px;
}

/*  -------------------------------------------------------------
    Errors
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */

.FatalError {
    padding: 0.5em 1em 1em 72px;
    margin-top: 1em;
    border: solid 3px #4a4464;

   background-image: url(/_pict/ico/cancel.png);
   background-repeat: no-repeat;
   background-position: 1em 50%;

}

.FatalErrorTitle {
   vertical-align: middle;

   color: #16c3cc;
   font-size: 110%;
   font-weight: bold;
}