/*---------------------------------
Styles for wion.com
Author: Destry Wion
Last Revised: 11 oct 2008
-----------------------------------*/

/*_________French Quotes_________
-----------------------------------*/

html:lang(fr) {
    quotes: '« ' ' »';
    font-style: italic;
    }

:lang(fr) > q  { quotes: "«" "»" "\2039" "\203A" }
:lang(en) > q  { quotes: "\201C" "\201D" "\2018" "\2019" }


/*______________BASE RULES______________
----------------------------------------*/

body {
	font-size: 83%;
	color: #414141;
	margin: 0;
	padding: 0;
	background: #fff url(../images/atlas-bg.png) left top repeat-x;
	}

h1, h2, h3, h4 {
	font-family: helvetica, arial, sans-serif;
	font-weight: normal;
	}

h1, h2, h3, h4, p {
	text-align: left;
	padding: 0;
	}

h1 { 
	font-size: 1.7em;
	margin-top: 0;
	}

h2 { font-size: 1.4em; }

div#maincol h2 {
	padding: 9px 0 13px 45px;
	background: url(../images/bg-fezheader.png) left center no-repeat;
	}

h2 a {
	font-size: 1.4em;
	border: 0px;
	}

h3 {
	font-size: 1.2em;
	margin-bottom: .5em;
	}

h4 {
	font-size: 1em;
	margin-bottom: .5em;
	}

p, li, dt, dl { 
	font-family: tahoma, arial, helvetica, verdana, sans-serif;
	line-height: 1.5;
	letter-spacing: 1px;
	}

li { padding: .3em 0 .3em 0; }

ol, ul {     }

q {font-style: italic;}

blockquote {
	color: #b98b00;
	text-align: block;
	margin: 0 auto 0 auto;
	padding: 0;
	width: 87.5%;
	}

blockquote p {
	font: normal .95em georgia, times, serif;
	font-style: italic;
	line-height: 1.5;
	}

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

pre {
	font-size: 1.2em;
	color: #000;
	margin-left: 10px;
	border-left: 2px solid #999;
	padding-left: 5px;
	}

kbd {
	font-size: 1em;
	color: #fff;
	border-top: 1px solid #000;
	border-right: 2px solid #000;
	border-bottom: 2px solid #333;
	border-left: 1px solid #333;
	padding-right: 3px;
	padding-left: 2px;
	background: #555;
	}

code {
        font-family:"DejaVu sans Mono",monaco,consolas,monospace;
        font-size:12px;
        }

abbr,
acronym { cursor: help; }

/*____________MORPHOLOGY____________
-------------------------------------*/

/*
*********** Skip-to Rules
*/

div#jumps {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0; 
	width: 100%;
	}

div#jumps ul {
	margin: 0 auto 0 auto;
	padding: 0;
	max-width: 75em;
	min-width: 765px;
	background: none;
	}

div#jumps ul li {
	display: inline;
	letter-spacing: 0;
	margin: 0 .5em 0 0;
	border: 0;
	padding: 0;
	}

div#jumps ul a {
	font: normal .9em "century gothic", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Verdana, Arial, sans-serif;
	color: #333;
	text-decoration: none;
	margin: 0;
	border: 0;
	padding: 0 .5em 0 .5em;
	}

div#jumps ul a:hover {
	color: #fff;
	text-decoration: underline;
	background: transparent;
	}

div#jumps ul a.noleftspace {
	padding-left: 0;
	}

/*
*********** Banner Rules
*/

div#masthead {
	margin: 0;
	border-bottom: 1px solid #ddccc6;
	padding: 0 1% 0 1%;
	height: 145px;
	width: auto;
	background: url(../images/atlasmounts.png) left top no-repeat;
	}

div#mastheadskull {
	margin: 0 auto 0 auto;
	border: 0;
	padding: 0;
	height: 145px;
	max-width: 75em;
	min-width: 765px;
	background: transparent;
	}

div#navbox {
	float: left;
	margin: 0;
	border: 0;
	padding: 0;
	width: 577px;
	height: 145px;
	}

ul#nav {
	margin: 4.5em 0 0 0;
	border: 0;
	padding: 0;
	width: 577px;
	height: 2em;
	}

ul#nav li {
	display: inline;
	margin: 0;
	border: 0;
	padding: 0;
	list-style: none;
	letter-spacing: 0;
	width: 100px;
	height: 2em; 
	}

ul#nav a {
	font: normal 1.3em "century gothic", helvetica, verdana, arial, sans-serif;
	color: #000;
	text-decoration: none;
	line-height: 2em;
	border: 0;
	padding: 0 .75em 0 .75em;
	background: none;
	}

ul#nav a.nopad {padding-left: 0;}

ul#nav li a:hover {text-decoration: underline;}

body#about ul#nav li.about a,
body#portfolio ul#nav li.portfolio a,
body#articles ul#nav li.articles a,
body#archive ul#nav li.archive a,
body#contact ul#nav li.contact a {text-decoration: underline;}

div#logobox {
	float: right;
	width: 159px;
	}

#maincoldiv#logobox,
a.logo, 
a:hover.logo, 
a:visited.logo {
	margin: 0;
	border: 0;
	padding: 0;
	}

a.logo, 
a:hover.logo, 
a:visited.logo {background: none;}

/*
*********** Corps
*/

div#container {
	margin: 0 auto 0 auto;
	padding: 0 1% 0 1%;
	max-width: 75em;
	min-width: 765px;
	background: #fff;
	}

div#mainwrap {
	margin: 0 0 2em 0;
	border: 0;
	padding: 1.5em 0 0 0;
	width: auto;
	}

div#maincol,
div#home-extra,
div#sidecol,
div#thumbprints { float: left; } 
	
div#maincol, 
div#sidecol,
div#thumbprints
	{
	margin-bottom: 1.5em;
	border: 0;
	padding: 0;
	}

div#sidecol,
div#thumbprints { margin-left: 3%; }

/* Home Page */
	
body#home div#maincol  { width: 46%; }

body#home div#home-extra,
body#home div#sidecol { width: 24%; }

body#home div#home-extra { margin: 0 0 1em 3%; padding: 0; }

/* Contact Page */

body#contact div#maincol { width: 48%; margin: 0 2% 1.5em 0; }
body#contact div#sidecol { width: 50%; margin: 0 0 1.5em 0; }

/* All Other Pages */

body#about div#maincol,
body#articles div#maincol,
body#specs div#maincol,
body#policies div#maincol,
body#portfolio div#maincol {width: 73%;}

body#about div#sidecol, 
body#articles div#sidecol,
body#specs div#sidecol,
body#policies div#sidecol,
body#portfolio div#thumbprints {width: 24%;}

/*
*********** maincol Rules
*/


p.xerpt { font-size: 1.2em; color: #898628; }

p.xerptspace {margin-bottom: 2em;}

p.articleinfo {
	font-size: .9em;
	letter-spacing: 1;
	color: #999966;
	}
	
.brightner { color: #990000; }

/* RSS list on Specs page */

ul#feeditem li  {
	font-family: tahoma, helvetica, arial, sans-serif;
	line-height: 1.7;
	letter-spacing: 1px;
	list-style: none;
	padding: 0 0 0 22px;
	border: none;
	background: url(../images/feedicon.png) left center no-repeat;
	}
	
/*
*********** home-extra and sidecol Rules
*/

div#home-extra h3,
div#sidecol h3 {
	font-size: 1.2em;
	font-weight: normal;
	color: #fff;
	line-height: 40px;
	margin: 0 0 1em 0;
	padding-left: 3.5em;
	background: url(../images/bg-colheader.png) left center repeat-x;
	width: auto;
	}

div#home-extra h3.notopmarg,
div#sidecol h3.notopmarg  {margin-top: .5em;}

div#home-extra ul,
div#sidecol ul {
	margin: 0 0 25px 0;
	padding: 0;
	}

div#home-extra p, div#sidecol p,
div#home-extra li, div#sidecol li {
	font-family: tahoma, helvetica, arial, sans-serif;
	font-size: .85em;
	margin: 0;
	}
	
div#home-extra p,
div#sidecol p { line-height: 1.5; }

div#home-extra li,
div#sidecol li {
	line-height: 1.2em;
	list-style: none;
	margin-top: 1em;
	padding:  0 0 0 15px;
	background: url(../images/col-bullet.gif) 0 3px no-repeat;
	}

div#home-extra li a,
div#sidecol li a { display:block; }

.listdate { /* overrides parent settings */
	font-weight: normal;
	letter-spacing: 0;
	color: #999966; 
	}

.colexcerpt {font-size: 100%;}

/*
*********** sidecol specific Rules
*/

div#sidecol h2 {
	font: normal 1.2em cursive;
	text-align: center;
	border-top: 3px double #ddccc6;
	}

div#sidecol p {
	font-size: .85em;
	margin-top: 0;
	padding-top: 0;}

div#sidecol p img {margin-bottom: 1em;}

body#home #sidecol h2 {margin-top: 1em; padding-top: 1em;}

body#home div#sidecol a.graphiclinks {
	border: 0;
	text-decoration: none;
	background: none;
	}

/*
*********** Footer Rules
*/

div#foot {
	clear: both;
	margin: 0;
	border-top: 1px solid #ddccc6;
	padding: 0;
	width: auto;
	height: 160px;
	background: #feeb86 url(../images/dwelling.png) left bottom no-repeat;
	}

p.footnotes {
	font: normal .85em verdana, tahoma, helvetica;
	text-align: left;
	}

p.footline1 {
	margin-top: 15px;
	margin-left: 210px; 
	}

p.footline2 { margin-left: 230px; }
p.footline3 { margin-left: 240px; }
p.footline4 { margin-left: 275px; }


/*________________FORM RULES________________
--------------------------------------------*/

fieldset {
	margin-bottom: 2em;
	padding-left: 1em;
	background: #fffff0;
	}

fieldset, 
legend, 
input, 
textarea {border: 1px solid #c0c0c0;}

legend {
	font: bold 100% "trebuchet ms", verdana;
	margin: 1em 0 1em 0;
	padding: .2em;
	background: #fff;
	}

input, select, textarea {
	margin: 0;
	}

p.formlabels {
	font-size: 1em;
	line-height: 1.4em;
	}

/* France stuff */

fieldset,
legend {border:1px solid #ececec;}

legend { padding:5px 8px; border-top:0; border-bottom:0; }

label {font-size:.9em;}

input, select, textarea { margin-bottom:13px; }

input.zemText, textarea.zemTextarea,
input#name, input#email, input#web, 
textarea#message { width: 100%; }

form {
	margin: 0;
	border: 0;
	}

/*
********* Contact Form
*/

.zemThanks {border: 2px solid #a4a4a4; padding: 1em;}
.zemThanks h3 {font:bold 1.5em georgia, serif;}
.zemThanks p {font-size: .95em; color: 333;}

body#contact fieldset { 
     border-right: 0; 
     border-bottom: 0; 
     border-left: 0; 
     background: 0;
     }

body#contact legend { 
     padding: 2px 6px;
     border-top: 0; 
     border-bottom: 0;
     }

.selectcontrol, 
.emailcontrol, 
.txtareacontrol, 
.txtcontrol { font-family: tahoma, helvetica, verdana, sans-serif; }

.txtareacontrol { width: auto; }

label.zemRequired { font-weight: bold; }

p.formnote { font: 80% verdana, helvetica, sans-serif; }

/* Comments */

h2#comment { 
	margin: 1em 0 0 0; padding: 10px 4px 4px 6px;
	border-bottom: 1px dotted #000;
 }

#comments-help {font-size:.82em; color:#666; margin-bottom:1em; }

div.comment-block {
        width:auto; margin:.8em 0 0 0; 
        padding:.8em 0 0 0;
        border-top:1px solid #ededed;
        font-size:.87em; color:#333;
}

.comment-block p { margin:.5em 0 .8em 0; padding:0;}

p.comment-meta { font-size:.85em; font-weight:bold; }

.comment-block blockquote { 
        font-style: italic; color: #dbdbdb;
        border-left:3px solid #999; 
        padding-left:.5em; }

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

form#txpCommentInputForm { width:80%; margin-top: 2em; }

#txpCommentInputForm fieldset {padding-top: .7em; }

p#txpCommentInputForm {
        text-align:center;
        margin:1em 0; 
        border:1px solid #5d84b2;
        padding:.5em;
        background:#9fe0ff;
}

/*_____________TABLE RULES_______________
------------------------------------------*/

caption {
	font: bold .9em arial, helvetica, verdans, sans-serif;
	text-align: left;
	margin-bottom: .5em;
	width: 99%;
	}

table {
	font-size: .95em;
	font-family: arial, helvetica, verdana, sans-serif;
	border-spacing: 0;
	width: auto;
	}

table.narrow { margin-left: 3em; }

th { border-bottom: 4px double #999; }

th, 
.xaxis, 
.yaxis { text-align: center; }

th, td { 
	vertical-align: top;
	padding: .4em .5em .4em .5em;
	}

.leftline { border-left: 1px solid #999; }
.bgeven { background: #f0f0d2; }


/*________________IMAGE RULES_______________
---------------------------------------------*/

img,
img.figures,
img.photos,
img.inline { margin: 0; border: 0; padding: 0; }

img.inline { vertical-align: middle; }

div.sitright { /* box for images floated right. */
	float: right;
	margin: .5em 0 0 1em;
	padding: 0;
	}

div.sitleft { /* box for images floated left */
	float: left;
	margin: .5em 1em 0 0;
	padding: 0;
	}

div.sitright p,
div.sitleft p,
div.nofloat p { font: normal .8em arial, helvetica, verdana, sans-serif; }


/*____LINK RULES (COLOR, SPACING, DECOR)____
----------------------------------------------*/

a,
a:visited  {
	color: #dd4800;
	border-bottom: 1px dotted #dd4800;
	}

a:hover {
	color: #414141;
	border-bottom: 1px solid #414141;
	}

a.offsite {
	padding-right: 14px;
	background: url(../images/offsite.gif) right center no-repeat; 
	}

a,
a:hover,
a:visited,
div#maincol h1 a,
div#maincol h1 a:hover,
div#maincol h1 a:visited, 
div#home-extra a,
div#home-extra a:hover, 
div#home-extra a:visited {text-decoration: none;}

div#maincol h1 a,
div#maincol h1 a:visited {color: #dd4800; border: 0;}

div#maincol h1 a:hover {color: #414141; border-bottom: 2px solid #414141;}

div#home-extra a, 
div#home-extra a:visited,
div#sidecol a,
div#sidecol a:hover, 
div#sidecol a:visited {border: 0;}

div#home-extra h3 a,
div#home-extra h3 a:visited { color: #ccc; }

div#home-extra a:hover,
div#home-extra h3 a:hover { color: #414141; }

div#home-extra a.titre { display: block; }

body#home a.linkedin {color: #414141; text-decoration: none; border-bottom: 1px dotted #414141;}

body#home a:hover.linkedin {border-bottom: 1px solid #414141;}

body#home span.linkedinblue {color: #fff; margin-left: 1px; padding-left: 2px; border: 1px solid #006699; padding-right: 2px; background: #2f8fb8;}

/*
*********** Portfolio Thumbnails
*/

body#portfolio div#thumbprints h3 {
	font-size: 1.1em;
	margin: .5em 0 .5em 0;
	}

body#portfolio div#thumbprints ul {
	margin: 0;
	padding: 0;
	}

body#portfolio #thumbprints li {
	text-decoration: none;
	list-style: none;
	display: inline;
	margin-right: 3px;
	border: 0;
	padding: 0;
	background: transparent;
	}

body#portfolio #thumbprints li a {border-bottom: 0;}

body#portfolio #thumbprints li a img {
	border: 1px solid #999;
	padding: 3px;
	width: 50px;
	height: 50px;
	}

body#portfolio #thumbprints li a img, 
body#portfolio #thumbprints li a:visited img {
	background: transparent;
	}

body#portfolio #thumbprints li a:hover img {
	background: #ccc;
	}

body#portfolio #thumbprints li a img, 
body#portfolio #thumbprints li a:visited img, 
body#portfolio #thumbprints li a:hover img {
	text-decoration: none;
	width: 4.4em;
	height: 4.4em;
	}

body#portfolio #thumbprints li a:hover { background: none; }


/*___________ARCHIVE PAGE RULES___________*/

/*
****** Archive Lists
*/

body#archive #mainwrap {
	margin: 0; border: 0; padding: 0;
	width: auto;
	height: 1%; /* for IE6 */
	}

#gauche {
	float: left;
	margin: .5em 1% 2em 0;
	}

#droit {
	float: right;
	margin: .5em 0 2em 1%;
	}

#gauche, 
#droit {
	padding: 0;
	width: 47%;
	display: inline; /* kills the IE6 double-margin bug on floats */
	}

div.archives {
        margin: 0; border: 0; padding: 0;
        height: 1%; /* for IE */
	}

#gauche ul, 
#droit ul, 
.archives ul { margin: 0; padding: 0; }

.archives li {
	font: normal .9em tahoma, helvetica, arial, sans-serif;
	letter-spacing: 1px;
	line-height: 1.6em;
	list-style: none;
	margin: 0;
	padding: 0 0 0 15px;
	background: url(../images/col-bullet.gif) left 4px no-repeat;
	}

#gauche a, #droit a,
#gauche a:visited, #droit a:visited {
	color: #cc6633;
	text-decoration: none;
	border: 0;
	}

#gauche a:hover, #droit a:hover {
	color: #ff6600;
	text-decoration: none;
	border: 0;
	}

#gauche a.titre, 
#droit a.titre { display: block; }

/*___________CUSTOM RULES___________
-------------------------------------*/

span.highlight {background: yellow;}


/*
*********** Plugin Def List (Colophon Page)
*/


dl.plugins-list dt { line-height: 1.2em; margin: .8em 0 0 0; }

dl.plugins-list dd { letter-spacing: normal; line-height: 1.5; }

/*
*********** Notes/Edits Dialog
*/

div.editorsbox,
div.notebox {
	margin-left: auto;
	margin-right: auto;
	}

div.editorsbox {
	border: 1px solid #84c1ff;
	background: #d8e2f5;
	}

div.notebox {
	border-top: 1px solid #c5ca9b;
	border-bottom: 1px solid #c5ca9b;
	background: #ffffe6;
	width: 90%;
	}

div.notebox ul,
div.notebox ol { margin: .5em; }

div.editorsbox p,
div.notebox p,
div.notebox li {
	font: normal .8em verdana, helvetica, tahoma, sans-serif;
	line-height: 1.5;
	letter-spacing: 0;
	}

div.editorsbox p,
div.notebox p {
	margin-left: 1em;
	margin-right: 1em;
	}

/*
*********** Crapitis
*/

.hint { font-size: 50%; } /* span for work header hint */