/* Pneumatic aka Pneumatique
   This style is nice in that it's got rounded corners. But the rounded corners
   make it hard to customize. Basically anything that's not blue on a white
   background is going to look funny.
*/

/* General formatting declarations */

/* if no other rule applies to your document, the rule below will apply 
   because all of your page is in the body of the document */
body {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   font-family: arial, geneva, helvetica, sans-serif;
   color: #000;
   background-color: #fff;
   }
   
/* these three define how links, active visited and moused-over links appear unless there
   is a more specfic rule that says otherwise */
      
a {   color:  #444;
   outline: none; }
a:visited {
   color:  #333;
   }
a:active {
   color:  #444;
   }
a:hover {
   color: #444;
   text-decoration: underline;
   }
   
/* This is an example of a more specific link. It says that links within headline tags 
   shouldn't appear underlined. This is an aesthetics vs usability question. Underlines
   are ugly but they're useful */
   
h1 a, h2 a, h3 a, h4 a {text-decoration: none}   

/* handle the bold tag the same as the strong tag, by making whatever font is marked up
   with it... er... bold */

strong, b {
   font-weight: bold;
   }
   
/* handle text marked up with the p tag the same as something assigned the class "blurb" like
   <div class="blurb"> */   
p, .blurb {
   font-size: 12px;
   line-height: 22px;
   margin: 0px 0px 10px 0px; 
   }


/* how much indent to give unordered and ordered lists. the default is too much */
ul, ol { margin-left: 0; padding-left: 12px}

/* these two rules handle headlines. The first gives all headline <h*> tags some common
   characteristics. The next ones give each <h*> tag its own font size */

h1, h2, h3, h4, h5, h6 {font-family: "Trebuchet MS", verdana, sans-serif; margin-top: 2%; margin-bottom: 0;}
h1 {font-size: 24px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
h4 {font-size: 14px;}
h5 {font-size: 12px;}
h6 {font-size: 10px;}

pre {font-size: 12px;
   line-height: 22px;
   margin-top: 20px;
   margin-bottom: 10px; }

/* this collection of rules handles specific situations that vary from the general rules */

/* what to do when you encounter an <h3> tag within the left bar, right bar or spotlight box */
#spotlight h3 { background-color: #780034; color: #fff; margin: 0; padding: 5px}

/* how to handle unordered lists when they're in the right or left bars */
#left ul, #left li, #right ul, #right li {font-size: 11px;}

/*how to handle section headings */
#section-heading, #middle .box1 h3 {background-color: silver; color: #596C9E; 
padding: 3px; font-size: 12px; text-transform: lowercase; font-weight: bold} 

.subSection0 h1, .subSection1 h1, .subSection2 h1 {font-size: 18px}

#section-heading {clear: both}

img {border: 0;}


/* how to handle the headline in the top bit */

#top h4 {margin-top: 75px}
html>/**/body #top h4 {margin-top: 60px;}
#top h4 a {color: #fff}
/* section list in top block */
#topmenu {float: right}
#topmenu ul, #topmenu li {display: inline;
               font: 10px bold; margin-left: 2px; padding-left: 1px;
               border: 1px solid red}

/* The following rules define the site's structure:

*/

/* this rule describes a swath across the top of the screen with enough height 
   to accomodate the local's logo. 
*/

#top {
   margin: 0px;
   padding: 10px;
   border: 0px;
   background: #596C9E url(../../../../../styles/whiteCUPElogo.jpg) no-repeat 10px 20px;
   height:80px; 
   }
#top img {display: none}  

/* this rule positions the left column: */   
   
#left, #leftcol {
   position: absolute;
   top: 100px;
   left: 0px;
   margin: 0px;
   padding: 10px;
   border: 0px;
   width: 200px; 
   }

   
/* this rule describes the middle chunk of the page. It's here where we start
   to place the background images to give it that pneumatic look. This one gets
*/   

#middle, #centreandleft, #centreandright {background: url(../../../../../styles/midboxright.jpg) no-repeat bottom right;padding: 0px;
	color: #000;height: 1%;}

#middle { margin: 0px 210px;}
#centreandleft {margin: 0px 210px 0px 0px}
#centreandright {margin: 0px 0px 0px 210px}


/* this rule makes a box whose real role in live is to surround all junk in the middle bloc
   so that it gets bordered properly; displays the left side of the box*/
      
#middlecontent { margin-left: 0px; padding: 10px 30px 10px 30px;
                 background: url(../../../../../styles/middleboxleft.jpg) no-repeat bottom left;
   }

#unicol {background: url(../../../../../styles/midboxright.jpg) no-repeat bottom right;}
  
/* This rule is the mirror of the left block
    down enough from the top to accomodate the logo, flush right,
*/   
   
#right {
   position: absolute;
   top: 100px;
   right: 0px; 
   margin: 0px;
   padding: 10px;
   border: 0px;
   width: 200px;
   }

/* the breadcrumb is a strip across the top of the content section that
   shows the visitor where she or he is.
   
   in this style it's also used to display the top right corner of the middle
   content box background
   */


#breadcrumb { 
    background: url(../../../../../styles/midboxtopright.jpg) no-repeat top right;
    margin: 0px;
    padding: 0px;
    color: #eee; 
    font-size: 11px;
    text-transform: lowercase;}
   

/* links within the site's breadcrumb need to behave differently 
   and this one displays differently indeed. It uses the unique context of a 
   paragraph within the breadcrumb to display the top left corner of the rounded
   box that earns this style its name 'pneumatic'  
   */
   
#breadcrumb p {  background: url(../../../../../styles/midboxtopleft.jpg) no-repeat top left; 
                 margin: 0 ; padding:20px 10px 5px 25px; font-size: 11px; line-height: 10px}
                 
#breadcrumb a:link  {color: #fff; font-weight: 800}
#breadcrumb a:visited  {color: #fff; font-weight: 800}


/* ALAP form CSS stuff 
   needed to lay out admin interface 
   Best left alone unless you know what you're doing
   For how this works, see:
   http://www.alistapart.com/stories/practicalcss/
   */            
   
div.formrow, .listrow, .listrow1, .listrow0, div.formrow-odd, .dlrow, .dlrow1, .dlrow0 {clear: both;  padding-top: 5px; }
div.formrow-odd { background-color: #ccc;}
div.formrow span.label, div.formrow-odd span.label{ float: left; width: 15%; text-align: right; font-size: 11px; }
div.formrow span.input, div.formrow-odd span.input { float: right; width: 83%; text-align: left; font-size: 11px;} 
.box1 .formrow .input {width: 50%;}      
.box1 .formrow { color: #000}
.formrow .input h4, .formrow-odd .input h4 {margin: 0; font-size: 12px} 
/*.formrow .input select, .formrow-odd .input select {width: 30%; font-size: 12px} 
  commented out for compatibility with htmlarea3 */
.box1 .formrow, box2 .formrow {font-size: 9px; padding: 0px 5px 0px 10px}
textarea {font-family: arial, sans-serif}            
.listitemshort, .listitemlong, .listitemmid {font-size: 11px}

.listitemlong, .listitemshort, .listitemmid, .listitemmidleft, .listitemtiny, .listitem100 {border-left: 1px solid black; padding-left: 5px; height: 40px;}
.listitemlong, .listheadinglong { width: 40%; float: left;}
.listitemtherest, .listheadingtherest {width: 80%; float: left}
.listitemshort, .listheadingshort  {  width: 10%; float: left;}
.listitem100, .listheading100  {  width: 110px; float: left;}
.listitemtiny, .listheadingtiny  {  width: 5%; float: left;}
.listitemmid, .listheadingmid {  width: 20%; float: right;}
.listitemmidleft, .listheadingmidleft { width: 20%; float: left}
.listheadinglong, .listheadingshort, .listheadingmid, .listheadingmidleft, .listheadingtherest, .listheadingtiny, .listheading100 { padding-left: 5px; border-left: 1px solid #fff;}
.listrow { padding: 3px; font-size: 12px; height: 16px; font-weight: bold; background-color:#000; color: #fff; margin-top: 10px}

.listrow0, .listrow1, .listrow {font-size: 11px}
.box1 form div.formrow  {margin-top: 35px; padding-top: 10px; color: #000}
.box1 form div.formrow a {color: #596C9E;}

/* end of ALAP form CSS stuff */   

/* stripey sidebar stuff

   The blocks that you see on the left and right of your site are <div> tags.
   They've all been given either class=box1 or class=box2.
   
   Within that you have unordered lists of menu choices to let you do alternating
   colours, the CMS generates these lists as class=row0 and class=row1   

   This style also uses these rules to render the rounded edged background 
   images. We hope you like it cause it's a pain to get it right.

 */
 
/* the normal link hover colour won't work in the sidebars because the
   darker background wants more contrast
.box1 a:hover, .box2 a:hover {color:#000; background-color: #ffc} */ 

/* this layout treats box1 and box2, row1 and row2 classes equally, so you'll see a lot
   of rules applied to both at the same time. */
   
/* text sizing for list rows */      
.row0, .row1, .row2 {  font-size: 11px; line-height: 13px; padding: 6px 6px 6px 0px; }

/* the shape of the side bar blocks: 100% of their surrounding element
   in this case, it's either #left or #right */
   
.box1, .box2 { width: 100%; background: url(../../../../../styles/sb2bottom.gif) no-repeat bottom right;
padding-bottom: 3px; margin: 0;	}

/* Common characteristics of headings within sidebar boxes, both
   headings that are links and headings that aren't */ 
 .box2 h3, .box1 h3, .box1 form, .box2 form
 { font-size: 12px; line-height: 13px; color: #fff;
   margin: 0;text-decoration: none; padding: 12px 20px 5px;
   background: url(../../../../../styles/sb2top.jpg) no-repeat top left}
#middlecontent .box2 h3, #middlecontent .box1 h3 {background: #ccc url(none.html)}
.box1 h3 a, .box2 h3 a {color: #000}
.noformheader form {background:url(../../../../../styles/sb2bottom.gif) no-repeat bottom right;}

/* how to handle link text in lists in the side bar boxes */

.box1 li.row0 a, .box2 li.row0 a,   .box2 li.row1 a, .box1 li.row1 a, .box1 li.row2 a, .box2 li.row2 a { display: block; padding: 2px 2px 2px 0.2em; text-decoration: none; color:#003891  }  
.box2 li.row0, .box1 li.row0, .box1 li.row1, .box2 li.row1, .box1 li.row2, .box2 li.row2  {  color: #000; }      

/*  Handling indents in sidebar box unordered lists */         
.box1 ul, .box2 ul { margin-left: 9px; margin-top: 0;
                margin-bottom: 0; list-style: none;
                padding: 5px 5px 6px;
                 }            


/*  Blocks that are placed in the middle use the same markup but we want them
    to appear differently. We want them to look like they belong in the centre.
    So we make contextual selectors that start with the #middle id.
    
    This says: if you find something that's class=box1 inside the div id=middle do
    the stuff in the  squiggly brackets.
    
    Any other time, the browser follows the rules above. But in the midddle it goes 
    as follows:         */

#middlecontent .box1 ul, #middlecontent .box2 ul, #middlecontent .box1 li, #middlecontent .box2 li {background-color: #fff; border-bottom: 1px dotted silver; margin-left: 0; padding-left: 5px}
#middlecontent ul a, #spotlight a  { color: #596C9E;}
#middlecontent ul a:visited, #spotlight a  { color: #999;}
#unicol #middlecontent .box2 ul, #unicol #middlecontent .box2 li, #unicol #middlecontent .box2 li a {display: inline} 
#unicol #middlecontent form, #unicol #middlecontent div.box1 {background-image: none}
/* And of course, because we want the spotlight to look different from the rest 
   of the page, we come up with a different set of rules specific to the #spotlight 
   division and things found within it. */

#spotlight { width: 33%; float: right; margin: 10px 0px 10px 10px; border-left: 1px solid black; padding: 0px 0px 5px 10px; }
#spotlight h1 {font-size: 14px}
#spotlight h3 { background-color: #596C9E; color: #fff; 
                padding: 5px; font-size: 12px; line-height: 13px;
             text-transform: uppercase; padding: 3px;}         
#spotlight p, #spotlight .blurb {line-height: 14px}

/* these format the sectionlist */

#sectionlist {font-size: 11px}
#sectionlist ul {display: inline; float: right; margin: 0}
#sectionlist ul li {display: inline; list-style-type: none; float: right; margin: 0px 0px 0px 3px; padding: 0px 0px 0px 6px; border-left: 1px solid #fff}

/* these format the comments. you could just add these declarations to the p and .blurb,
   but I think the text should look different for comments. Can't ever be too obvious on the web */
   
.commentbody, .comment_header, #commentfooter {font-size: 12px}
.commentbody {margin-top: 5px; border-bottom: 1px solid silver}

/* these are required for the calendar */
td.calendar {border-right: 1px solid silver}
tr.calendarheader {background-color: silver; color: #000}
td.calendar ul, td.calendar li {font-size: 11px;margin-left: 1px; padding-left: 2px}
table.calendar {background-color: #fefefe; border-left: 1px solid silver}

/* generic float classes for replacing tables */
.float5 {float: left; width: 5%;}
.float10 {float: left; width: 10%}
.float15 {float: left; width: 15%}
.float20 {float: left; width: 20%}
.float25 {float: left; width: 25%}
.float30 {float: left; width: 30%}
.float35 {float: left; width: 35%}
.float40 {float: left; width: 40%}
.float45 {float: left; width: 45%}
.float50 {float: left; width: 50%}
.float55 {float: left; width: 55%}
.float60 {float: left; width: 60%}
.float65 {float: left; width: 65%}
.float70 {float: left; width: 70%}
.float75 {float: left; width: 75%}
.float80 {float: left; width: 80%}
.float85 {float: left; width: 85%}
.float90 {float: left; width: 90%}
.float95 {float: left; width: 95%}

/* Makes hidden sections appear differently so that you can tell they're 
   hidden */
.subSectionHide {background: #eff url(../../../../../images/hidden.gif) no-repeat top right}

/* admin icon classes */

div.articleadmin,
div.sectionadmin,
div.blockadmin,  
div.eventadmin,  
div.linkadmin {overflow: hidden;
clear: both; 
padding:10px 2px 0px 2px; width: 100px }


div.articleadmin img,
div.sectionadmin img,
div.blockadmin img,  
div.eventadmin img,  
div.linkadmin img{padding: 0; margin: 0}



div.articleadmin {background: url(../../../../../i/adm/articleadminbg.gif) no-repeat top left; }
div.sectionadmin {background: url(../../../../../i/adm/sectionadminbg.gif) no-repeat top left; }
div.blockadmin   {background: url(../../../../../i/adm/blockadminbg.gif) no-repeat top left; }
div.eventadmin   {background: url(../../../../../i/adm/eventadminbg.gif) no-repeat top left; } 
div.linkadmin    {background: url(../../../../../i/adm/linkadminbg.gif) no-repeat top left; }