/* Copyright 2006 Rob Duncan, roki.ca 

This is the draft css style sheet for dragonfly.roki.ca  */

body {
font-family: Georgia, Times, Serif;
line-height: 1.5em;
color: #639;
margin: 5px 0 0 5px;
padding: 0;
}


/* Main Headline */
h1 {
margin-left: 0.5em;
letter-spacing: -1px;
font-weight: 400;
font-style: italic;
}
h1:first-letter {
font-size: 125%;
}


/* Links */
a {
font-family: sans-serif;
letter-spacing: 1px;
color: #033;
text-decoration: none;
}
a:visited {
color: black;
}
a:hover {
border-bottom: 1px solid;
}
a:active {
color: yellow;
}


/* Non-link tags */
abbr, acronym, dfn {
border-bottom: 1px dotted;
cursor: help;
}


/* Specify pairs of quotes for two levels in two languages */
q:lang(en) { quotes: '“' '”' "‘" "’" }
q:lang(fr) { quotes: "«" "»" "<" ">" }


/*					 */
/*  DEFINED CLASSES  */
/*					 */


/* Drop cap; used on the first letter of <p> on each page */
.drop {
float: left;
font-size: 250%;
font-family: sans-serif;
line-height: 1em;
margin: 2px 6px 2px 0;
padding: 0 6px;
border: 2px solid #75B;
color: #639;
background: #C9C;
}


/* Used when the title of the link makes it too long for the sidebar */
.tight_link {
letter-spacing: 0em;
}


/* Used in Beki's bio to make a line of text stand out - bigger and paler */
.airy {
text-align: right;
line-height:0.8em;
font-style: italic;
font-size:180%;
color:#85b;
letter-spacing: 0.1em;
}


/* Colour and positioning info for the biography pictures */
img.bio_pic {
float: left;
border: 1px dotted purple;
padding: 1px;
background: #8184ff;
margin: 0 20px 5px -0.5em;
}


/* Services listing definition list 
I want the definition to appear only while the mouse is hovered.
This currently will not work on Explorer.
*/
.services dd {
display: none;
font-family: sans-serif;
font-size: 90%;
color: black;
}
.services dt {
text-indent: 25px;
background: url(images/dmt_bullet.png) no-repeat left center;
}
.services a {border:none;}
.services dl:hover dd {
display: block;
}

/* News page formatting - date, title and entry of news in <dl> form */
.news a {
border-bottom: 1px dashed #639;
}
a:hover {
border-bottom: 1px solid #639;
}
.news dt.date {
color: black;
font-size: small;
font-weight: bold;
font-family: monospace;
margin-left: -1em;
display: inline;
vertical-align: bottom;
}
.news dt.title {
margin-left: 10px;
display: inline;
vertical-align: text-bottom;
}
.news dd {
font-family: sans-serif;
font-size: 90%;
margin: 0 0 .5em 8em;
line-height: 1.25em;
color: black;
}


/* Sidebar tip styles - both the h2 and the p are styled */
h2.tip {
font-size: 100%; 
line-height: normal;
padding: 0 0 5px 14px;
background: url(images/bulb.gif) no-repeat left top;
border-bottom: 1px dotted black;
}
p.tip {
font-size: 80%; 
line-height: normal; 
font-style:italic;
}


/*				 */
/*  DEFINED IDs	 */
/*				 */


/* the top of the page - contains the DMT name and purple background */
#header {
padding:8px 0;
min-width: 490px;
background: #639 url(images/top_left_rnd.gif) no-repeat top left;
color: white;
}


/* the main text area for each page */
#content {
padding: 2%;
float: left;
width: 69%;
min-width: 345px;
}
#content ul, ol {
padding: 0% 0% 0% 20%;
}
#content ul ul, ol ul, ol ol, ul ol {
padding: 0% 0% 0% 15%;
}


/* The tabby navigation menu that sits under the header 
credit: http://alistapart.com/articles/slidingdoors/
*/
#menu {
float: left;
width: 100%;
min-width: 490px;
background: url(images/bg.gif) repeat-x bottom;
font-size:93%;
line-height:normal;
}
#menu ul {
margin:0;
padding: 38px 2% 0;
list-style:none;
}
#menu li {
float: left;
background:url(images/norm_right.gif) no-repeat right top;
margin:0;
padding:0;
}
#menu a {
float: left;   /* IE5-Mac hack */
display:block;
background:url(images/norm_left.gif)
no-repeat left top;
padding:5px 15px 4px;
}
/* Commented Backslash Hack
     hides rule from IE5-Mac \*/
  #header a {float:none;}
  /* End IE5-Mac hack */
#menu a:hover {
color: #C9C;
border: none;
}
/* The current id is important to colour the active current tab differently */
#menu #current {
background-image:url(images/norm_right_on.gif);
font-weight: bold;
}
#menu #current a {
background-image:url(images/norm_left_on.gif);
padding-bottom: 5px;
}


/* The sidebar is non critical links, tips and future considerations (blog, pics, rss?) */
#sidebar {
position: absolute;
top: 146px;
right: 0px;
padding: 2%;

/*Was 22%, this is going to mess up other parts of the page, but keep Google Maps happy */

width: 210px;  
min-width: 130px;
min-height: 90px;
border-style: solid;
border-width: 1px 1px 8px;
background: #FFC url(images/DMT_web_notext.gif) no-repeat 50% 1em;
}
#sidebar h1 {
text-align: center;
font-size: 110%;
font-style: normal;
margin: 100px 0 0 0;
}
#sidebar ul {
list-style: url(images/left_bull.gif);
line-height: 1.5em;
padding: 0 5px 0 10px;
}
#sidebar a {
font-size: 70%;
}


/* the Footer repeats the nav menus, copyright and contact info */
#footer {
clear: both;
margin-right: 27%;
background: #fff;
text-align: center;
min-width: 450px;
}
#footer p {
font-style: italic;
font-size: 70%;
padding: 0 20px
}
#footer ul {
border: 1px solid black;
font-size: 80%;
padding: 0;
}
#footer li {
display: inline;
list-style: none;
background: url(images/ftr_bullet.gif) no-repeat right center;
padding: 0 3% 0 2%;
}
#footer li a {
color: #528;
}