/*    		   
_______________________________________________________________
|			                                                  |
|                 THIS STYLESHEET WAS WRITTEN,                |
|	  		     THE XHTML TEMPLATE DESIGNED AND              |
|	       THE ORIGINAL DOTCLEAR FUNCTIONS REWRITTEN BY       |
|	  	                                                      |
|		  		   BERTRAND 'SMITTY' SCHMID                   |
|				     bschmid[at]cbsch.net                     |
|				                                              |
---------------------------------------------------------------
|                                                             |
|  THIS SITE IS PUBLISHED UNDER THE CREATIVE COMMONS LICENCE  |
|          FOR FURTHER INFORMATIONS, PLEASE REFER TO          |
| http://creativecommons.org/licenses/by-nc-sa/2.5/ch/deed.en |
|                                                             |
|PLEASE NOTE THAT THIS STYLESHEET DOES NOT FOLLOW THE ORIGINAL|
|                    GNU DOTCLEAR LICENCE                     |
|                                                             |
| ITS PURPOSE IS NOT TO GIVE USERS AN ALTERNATIVE STYLESHEET  |
|                       FOR DOTCLEAR                          |
|_____________________________________________________________| */

/*	  
FONT SIZES DEFINITION	  
	  - defaut font size (for major UA): 16pt = 100%
      - body, text = 12pt = 0.75em/1em
      - links, footer, etc. = 10pt = 0.625em/1em
      - reference for a 12px base: 10pt = 0.833em/1em
      - this stylesheet is based upon the Trebuchet/default sans-serif font

SYSTEMATIC NAMING PRACTICES
	  Each graphic element is named according to its function
	  and its position in the site.
	     - first element: name of the function
	       (p.ex.: border, background, etc.)
         - second element: position (header, footer, main, etc.)
         - third optional element: position in its internal container (left, right, top, bottom)
		 - fourth optional element: state (_hover, _invis, _alt, etc.)
	  
	  Naming examples:
	     - background image for the main title:
	       bg_title.gif
		 - pattern for the upper corner of the header border:
		   bg_borderTop.gif
		 - image for a rollover in a title (background-image):
		   bg_title_hover.gif
		   
COLORS
	  Very few colors are (and must be) used.
	    CBSCH BLUE
	    - blue: 095edc
	    - medium blue: 84aeed
	    - light blue: e6effb
	    CBSCH ORANGE
		- orange: f6a123
		  (beware: this color, used with white and/or black, doesn't match the minimal contrast)
		- medium orange: fad091
		- light orange: fef5e9
		- white
		- black
		- grey: rgb(223,223,223) == #dfdfdf
*/


/*	BASIC TAGS
	___________________________________ */
* {
	margin: 0;
	padding: 0;
	}
html {
    font-size: 100%;
    }
body {
	background: #ffffff url(img/bg_body.gif) left top;
    color: #404040;
    font: 0.75em Trebuchet,Verdana,sans-serif; /* beware: Trebuchet, but not for win */
    }
a, a:link {
	border-bottom: 1px #095edc solid;
	}
a:visited, a, a:link {
	text-decoration: none;
	color: #095edc;
	}
a:visited {
	border-bottom-style: dotted;
	}
a:active, a:hover {
	background-color: #F6A123;
	border-bottom: none;
	}
a:active, a:hover, .comment-info, .comment-info a, .comment-info a:hover, .comment-info a:link, .comment-info a:active, .comment-info a:visited, .error, #navigation, #navigation a, #profile, #profile h3, #profile p, #profile a, #search input.submit, #search input.submit:hover, #page_footer, #page_footer ul a:link, #page_footer ul a:visited, #page_footer ul a:hover {
	color: #fff;
	}
code {
	font-family: "Courier New", Courier, monospace;
	background-color: #e6effb;
	padding: 0 0.2em
	}
h1, h2, h3, h4, h5, h6 {
    color: #095edc;
    }
h3 {
	color: #f6a123;
	}
h3, h4, h5, h6, p, ul, .form-help {
	margin: 1em 0;
	}
h3, h4 {
    font-size: 1.1em;
    }
label {
	margin-top: 1em;
	cursor: pointer;
	}
p, li {
	line-height: 1.5em;
	}
pre {
	border: 1px solid #CCC;
	}
textarea {
	width: 80%;
	}
ul {
    list-style-type: circle;
    }
    
/*	'hidden' elements using the LIR technique
___________________________________ */

.cat, .date {
	float: left;
	padding-top: 18px;
	width: 20px;
	background-position: left top; /* beware the padding-top property of parent's element */
	background-repeat: no-repeat;
	}
.cat, .date, .subtitle h2, #menu h2, .title h1 a, #syndicate h3, #archives h3, #categories h3, #profile h3, #search h3, #contact h3, .wai, #aup, #adown {
	overflow: hidden;
	height: 0;
	}
.comment-info {
	background: ;
	margin: 1em 0 0 4em;
	padding: 0.8em;
	background-color: #84aeed;
	}
	.comment-info span {
		display: block;
		margin-bottom: 0.5em;
		}
	.comment-info a, .comment-info a:hover, .comment-info a:link, .comment-info a:active, .comment-info a:visited {
		border-bottom-color: #fff;
		}
	.comment-info a:hover, .comment-info a:active {
		background-color: transparent;
		}
.error {
	background: #F6A123;
	padding: 5px;
	}
.field label, .title h1 a, .cat, .date {
	display: block;
	}
.suite {
	margin-bottom: 3em;/* this creates the margin between articles */
	}
#navigation ul, #search p, #search h3, #page_footer ul, #footer ul, #content div div, .wai {
	margin: 0;
	}
#navigation, #navigation li, #page_footer li, .wai {
	padding: 0;
	}
#profile a, fieldset, img, #main_title a, #footer a, .wai {
	border: 0;
	}
.wai {
	width: 0;
	}
    
/*    content description
    -------------------- */
.suite, .published, .comment-info, .form-help {
    font-size: 0.833em; /* ±10pt */
    }
#trackbacks h3, #comments h3 {
	background-repeat: no-repeat;
	padding-left: 20px;
	}
#trackbacks h3 { /* 'silk icons' by http://www.famfamfam.com/ under CC by-nc-sa licence */
	background-image: url(img/tb.png);
	}
#comments h3 {
	background-image: url(img/comment_add.png);
	}
.date {
	background-image: url(img/calendar.png);
	}
.cat {
	background-image: url(img/folder.png);
	}

/* PAGE
___________________________________ */
#page {
	width: 67%;
	position: absolute;
	left: 11%;
	top: 0;
	z-index: 1;
    }

/* HEADER 
___________________________________ */

/*    title
    -------------------- */
#main_title {
    height: 150px; /* to keep it on the visual flow */
    }
.subtitle {
	position: absolute;
	right: 0;
	top: 0;
	margin-left: 250px;
    background: transparent url(img/bg_subtitle.gif) no-repeat right top; /* right background */
    }
.title {
    width: 67%;
    height: 150px;
    background: transparent url(img/bg_title.gif) repeat-x left top; /* title's background */
    }
    .title h1 a {/* kind of background-image-map ;) */
    	background: url(img/bg_h1.gif) no-repeat left top; /* title's background */
    	width: 250px; /* to enclose the background image corresponding to the titel */
    	z-index: 3;
        }
	.subtitle h2, .title h1 a {
		padding-top: 150px;
		}
    

/*    NAVIGATION
___________________________________ */

/* links only: see the links section at the end of this file */
#navigation {
	text-align: left;
    font-weight: bold;
	background: transparent url(img/bg_navig_left.gif) repeat-x left 13px;
	height: 50px; /* i.e. 1/3 of the #main_title */
    }
#navigation li {
	font-size: 0.833em; /* ±10pt */
	list-style-type: none;
    line-height: 25px;
    float: left;
    }
#navigation a {
    font-weight: bold;
    text-decoration: none;
    border-right: 1px solid #fff;
   	border-bottom: 0;
    padding: 0 30px;
	display: block;
	margin-top: 1px;
	text-shadow: #535353 1px;
    }
#navigation a:hover {
	background: transparent url(img/bg_navig_hover.gif) repeat-x right top;
	}
.shortcuts {
    width: 100%; /* for the navigation bar to fullfill the #page width */
   	background: transparent url(img/bg_navig.gif) right top no-repeat;
   	padding: 12px 0 13px;
   	height: 25px;
    }
#navigation #adown, #navigation #aup {
	width: 35px;
	padding: 25px 15px 0;
	border-right: none;
	}
#navigation #aup {
	background: transparent url(img/bg_aup.gif) no-repeat center center;
	margin-left: 15px;
	}
#navigation #aup:hover {
	background: transparent url(img/bg_aup.gif) no-repeat center center;
	cursor: n-resize;
	}
#navigation #adown {
	background: transparent url(img/bg_adown.gif) no-repeat center center;
	cursor: s-resize;
	}
#navigation #adown:hover {
	background: transparent url(img/bg_adown.gif) no-repeat center center;
	}


/*    MENU
___________________________________ */
#menu {
	width: 32%;
	position: absolute;
	right: 0;
    top: 200px;
    background: #ffffff url(img/bg_menu.gif) no-repeat right top;
    border-left: 1px #095edc solid;
    }
    #menu ul, #menu p {
    	padding-left: 22px; /* pixels due to the background image */
    	}
    #menu li {
    	list-style-type: none;
    	}
#syndicate h3, #archives h3, #categories h3, #profile h3, #contact h3 {
	padding: 35px 0 0; /* to display the background-image properly */
	}
#archives h3 {
	background: transparent url(img/bg_h3_archives.gif) no-repeat left top;
	}
#categories h3 {
	background: transparent url(img/bg_h3_categories.gif) no-repeat left top;
	}
#contact h3 {
	background: transparent url(img/bg_h3_contact.gif) no-repeat left top;
	}
#contact p {
	margin-right: 50px;
	font-size: 0.9em;
	}
#profile {
	background: transparent url(img/bg_gradient.gif) repeat-x left center;
	padding: 0 0 10px 0;
	margin-right: 48px; /* fix the width of the parent element */
	}
	#profile a:hover, #profile a:active {
		color: #095edc;
		}
	#profile h3 {
		background: transparent url(img/bg_h3_profile.gif) no-repeat center top;
		}
	#profile a:hover {
		background-color: #fff;
		}
#search {
	position: absolute;
	z-index: 2;
	top: -38px;/* very important to fix it using pixels */
	right: 40px;
	}
	#search input, #search #q  {
		float: left;
		}
	#search #q {
		background:#FFFFFF url(img/q.png) no-repeat scroll 4px center;
		border:1px solid #84AEED;
		height:17px;
		margin:2px 0 0;
		padding:2px 0 0 16px;
		width: 105px;
		}
	#search input.submit {
		background: #84AEED none repeat scroll 0 0;
		border: 1px solid #84AEED;
		height: 21px;
		margin-top: 2px;
		width: 25px;
		padding-top: 1px;
		cursor: pointer;
		}
	#search input.submit:hover {
		background-color: #095EDC;
		border-color: #095EDC;
		}
#syndicate h3 {
	background: transparent url(img/bg_h3_syndication.gif) no-repeat left top;
	}
	#menu li.rss {
			background: url(img/rss.png) no-repeat center left;
			padding-left: 20px;
			}
	#menu #profile li.linkedin {
			background: url(img/linkedin.gif) no-repeat center left;
			padding-left: 20px;
			}
	#menu li.cv {
		background: url(img/pdf.png) no-repeat center left;
		padding-left: 20px;
		}
	#menu li.facebook {
		padding-left: 20px;
		background: url(img/facebook.gif) no-repeat center left;
		}

/*    CONTENT
___________________________________ */
#content {
	width: 65.5%;
	border: 1px #095edc solid;
	background-color: #ffffff;
    }
#content div { /* a necessary instruction until MSIE6 doesn't understand the child selector */
	margin: 0 2em; /* negates the '#content div' recursive margin instruction */
	}
	#content h2 {
		padding: 35px 2em;
		background: url(img/bg_h2.gif) repeat-x right center;
		}
	#content h3.list, #content h2 {
		text-align: center;
		}
	#content ol, #content ul {
		margin: 1em 0 1em 2em;
		}
#comments blockquote {
    margin-left: 3.3em;
	padding: 0.5em;
	border: 1px solid #84aeed;
    }
#comments blockquote p {
    margin: 0;
    }

/*    END OF CONTENT
___________________________________ */

#page_footer {
	width: 65.75%;
	text-align: center;
	}
	#page_footer .navig {
		background: transparent url(img/bg_gradient.gif) repeat-x left center;
		border-left: #095edc 1px solid;
		border-right: #095edc 1px solid;
		border-bottom: #095edc 1px solid;
		line-height: 2.5em;
		}
	#page_footer li {
		display: inline;
		margin: 0 1em 0 0;
		list-style-type: none;
		}
	#page_footer ul a:link, #page_footer ul a:visited { /* must have a high specificity */
		border-color: #ffffff;
		}
	#page_footer ul a:hover {
		border-color: #ffffff;
		background: none;
		}
	#page_footer p {
		color: #095edc;
		font-size: 0.8em;
		}
.technical {
	background-image: url(img/process.png) ;
	}
.copy, .technical {
	text-align: left;
	border: 1px solid #095EDC;
	margin: 1em 0 0;
	padding: 0.3em 0.3em 0.3em 65px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 5px center;
	}
        
/*    FOOTER
___________________________________ */
#footer {
	position: absolute;
	top: 0;
	right: 0;
	width: 200px;
	background: transparent url(img/bg_footer.gif) repeat-y top left;
	}
	#footer ul {
		list-style-type: none;
		}
	#footer a:hover {
		background-color: transparent;
		}
	#footer .version, #footer .cc, #footer .xhtml, #footer .dotclear, #footer .css, #footer .wcag {
		height: 0;
		overflow: hidden;
		display: block;
		background-color: transparent;
		background-repeat: no-repeat;
		background-position: left top;
		}
	#footer .version {
		padding-top: 100px;
		width: 100px;
		background-image: url(img/bg_version.gif);
		}
	#footer .cc {
		padding-top: 125px;
		width: 190px;
		background-image: url(img/bg_cc.gif);
		}
	#footer .xhtml {
		padding-top: 74px;
		width: 114px;
		background-image: url(img/bg_xhtml.gif);
		}
	#footer .dotclear {
		padding-top: 130px;
		width: 200px;
		background-image: url(img/bg_dotclear.gif);
		}
	#footer .css {
		padding-top: 98px;
		width: 200px;
		background-image: url(img/bg_css.gif);
		}
	#footer .wcag {
		padding-top: 141px;
		width: 188px;
		background-image: url(img/bg_wcag.gif);
		}
	
/* LINKS 
___________________________________ */

#content a[hreflang="en"], #content a[hreflang="fr"], #content
a[hreflang="de"] {
    padding-right: 25px;
	margin-right: 5px;
	background-position: right center;
	background-repeat: no-repeat;
    }
#content a[hreflang="en"] {
    background-image: url(img/en.gif);
    }
#content a[hreflang="fr"] {
    background-image: url(img/fr.gif);
    }
#content a[hreflang="de"] {
	background-image: url(img/de.gif);
    }
    
/*	CONTACT PAGE
___________________________________ */

.needed {
	background: transparent url(img/bg_needed.gif) no-repeat left top;
	padding-left: 36px;
	height: 32px;
	line-height: 32px;
	}
form.contact label {
	line-height: 32px;
	}
form.contact label span.needed {
	width: 32px;
	overflow: hidden;
	}