/* travelwatchlist.ca */
/* colors
The fingerprint blue: #123d7a

base: #EB7663
lighter: #FFCCC0
darker: #8C221C
dark blue: #005C7A
green: #2EAD6E
faded red: #B75755
very faded red: #F9C1BD
*/

#container { width: 940px; height: 100%;
             background-color: #fff;
             margin-right: auto;
             margin-left: auto;     }

#top {width: 950px; clear: both; height: 139px; background: url(../../../../en/happycog/subsites/travelwatchlist/flagbg.jpg) no-repeat 50% 0 }
#top h1 { padding: 10px 0 0 0; margin: 0;
          background: url(../../../../en/happycog/subsites/travelwatchlist/SiteTitleFra.png) no-repeat 70% 100%; 
          height: 87px; 
          text-indent: -9999px;}
#top h1 a {color: #fff;  text-decoration: none; border: none}
#lang {float: right; clear: none; padding-right:10px}

#top a, #top a:visited {color:#ffff; border: none}

#topmenu {float: right; width: 600px; background-color: #c1122c; padding: 10px 0px; margin-top: 5px}
#topmenu ul, #topmenu li {display: inline; font-size: 14px; margin:0}
#topmenu li {border-left: 1px solid #fff; margin: 0; padding: 0px 3px 0px 5px; font-family: "Arial Narrow"; text-transform: uppercase; letter-spacing: 1px}
#topmenu ul li.first {border-left: none}
#topmenu ul { padding-right: 5px}
#topmenu a {color: #fff; text-decoration: none; padding: 1px}
#left {width: 130px; margin-left: 10px; margin-top: 10px; float: left}

/* the following are rules that define how the middle area, aka the main
   content area  behaves */

#middle, #unicol, #centreandright, #centreandleft {padding: 0px; margin: 10px;font-size: 13px; line-height: 20px; background: #fff; color: #000;border: 0px; } 
#middle {width: 410px; float: left}
#unicol { width: 920px}
#middleright, #centreandright  {float: right; width: 550px;}
#middleleft, #centreandleft  {float: left; width: 620px;margin: 30px 0px 30px 30px; padding: 10px 20px 0px 20px ; border-right: 1px solid #ccc}
#centreandleft h1 {margin-top: 0; margin-bottom: 10px}

#right {width: 200px; float: right; margin-top: 10px; margin-right: 30px; padding-top: 20px}
#right h3 {color: #fff; background-color: #c1122c; padding: 5px}
#right li {line-height: 1.2em; margin-bottom: 12px; font-size: 12px;}
#right p {line-height: 1.1em}
/* The breadcrumb is the strip across the top of the content area that shows
   a visitor their current location in the site and the path back home.
   */

div#footer {width: 100%; height: 80px; clear: both; overflow: hidden; background: url(../../../../en/happycog/subsites/travelwatchlist/body-bottombg.jpg) repeat-x 0 0;}
div#footer p {text-align: center; font-size: 10px; margin: 10px 0 0 0 ; line-height: 10px;}
div#logoflotilla {margin: 10px auto; width: 690px; height: 80px; overflow: hidden}
div#logoflotilla img {float: left; padding: 0px 5px}

div#sitemenu ul, div#sitemenu li  {display: inline; margin: 0; }
div#sitemenu ul {border-right: 1px solid #000; padding-right: 3px}
div#sitemenu li  { border-left: 1px solid #000; padding-left: 3px; font-size: 9px} 
/* here endeth the structural declarations */

/* General formatting declarations */

body {font-family: verdana, "Lucida Grande", arial; background-color: #aaa ; margin: 0;
text-align: left; background: url(../../../../en/happycog/subsites/travelwatchlist/bodybg.jpg) repeat-x 0 0 }

/* these three define how links, active visited and moused-over links appear unless there
is a more specfic rule that says otherwise */

a:link { color:  #123d7a; outline: none; }
a:visited { color:  #B75755; }
a:active { background-color:  #FFCCC0; }
a:hover { background-color: #FFCCC0; }
a.here {background-color: #2e5490}
h1 a, h2 a, h3 a, h4 a {text-decoration: none; border-bottom: 1px dotted} 

strong, b {font-weight: bold;}

p, .blurb {
font-size: 12px;
line-height: 22px;
margin: 0px 0px 10px 0px; 
}

ul, ol { margin-left: 0; padding-left: 12px}

h1, h2, h3, h4, h5, h6 {font-family: "Trebuchet MS", verdana, sans-serif; margin-top: 2%; margin-bottom: 0;}
h1 {font-size: 20px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
h4 {font-size: 14px;}
h5 {font-size: 12px;}
h6 {font-size: 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 */
#left h3,  #spotlight h3 { margin: 0; padding: 5px}

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

/*how to handle section headings */
#section-heading, #middlecontent .box1 h3, #middlecontent .box2 h3, #titlebar {background-color: #8C221C; color: #fff; padding: 3px; font-size: 12px; font-weight: bold;
 margin-top: 12px} 
#titlebar h2 {margin-top: 0; font-size: 16px}
.subSection0 h1, .subSection1 h1, .subSection2 h1, .subSectionHide h1 {font-size: 18px}

#section-heading {clear: both; margin-top: 5px}

img {border: 0;}

div.formrow, .listrow, .listrow1, .listrow0, div.formrow-odd, .dlrow, .dlrow1, .dlrow0, .row1, .row2, .row {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 .label {font-size: 10px}            

.formrow .input h4, .formrow-odd .input h4 {margin: 0; font-size: 12px} 
.box1 .formrow, .box2 .formrow {font-size: 11px} 
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}

/* end of ALAP form CSS stuff */ 


/* 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, .rowheader {  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 { padding-bottom: 3px; margin: 0px 0px 6px 0px;  }

/* Common characteristics of headings within sidebar boxes, both
headings that are links and headings that aren't */ 
.box1 h3 a, .box2 h3 a, .box2 h3, .box1 h3  { font-size: 12px; line-height: 13px; padding: 3px; margin: 0;}

/* 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; color: #000; padding: 2px 2px 2px 0.2em; text-decoration: none; }  

.box2 li.row0, .box1 li.row0, .box1 li.row1, .box2 li.row1, .box1 li.row2, .box2 li.row2  { background-color: #FFCCC0; color: #000; border-bottom: 1px dotted #fff}  

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

#middlecontent .box1 li, #middlecontent .box2 li  {background-color: #fff; }
#middlecontent .box1 li.row0 a, #middlecontent .box1 li.row1 a{border-bottom: 1px dotted silver}
#unicol #middlecontent .box2 ul, #unicol #middlecontent .box2 li, #unicol #middlecontent .box2 li a {display: inline} 
#middlecontent .box2 li.row0 a, #middlecontent .box2 li.row1 a{border-left: 1px solid silver; }
#middlecontent ul a, #spotlight a  {color: #744E83;}
#middlecontent ul a:visited, #spotlight a  {color: #91454D;}

/* 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-left: 10px; }
#spotlight h1 {font-size: 14px}
#spotlight h3 { background-color: #8C221C; color: #fff; 
padding: 5px; font-size: 12px; line-height: 13px;
text-transform: uppercase; padding: 3px;}         
#spotlight p, #spotlight .blurb {line-height: 14px}

#centreandright div.box2 h3 {display: none}
#centreandright div.box2 ul, #centreandright div.box2 li, #centreandright div.box2 li a
  {display: inline; background-color: #fff; padding: 1px; margin: 1px}

#centreandright div.box2 li {border-left: 1px solid silver}
#centreandright div.box2 ul {border-right: 1px solid silver}

.commentbody, .comment_header, #commentfooter {font-size: 12px}
.commentbody {margin-top: 5px; border-bottom: 1px solid silver}

#article, #privdb {width: 98%; padding: 1%}

/* 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}

/* for making charts/tables */

.rowheader {background-color:#cbeca3; color: #000; font-weight: 600; padding-bottom: 16px }
div.row1 {border-top: 1px solid silver}
div.row2 {border-top: 1px solid silver}
.float {float: left; font-size: 9px; line-height: 10px; width: 31%}
.float2 {float: left; width: 2%;}
.float3 {float: left; width: 3%;}
.float6 {float: left; width: 6%;}
.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%;}
.float55 {float: left; width: 55%;}
.float60 {float: left; width: 60%;}
.spacer {clear: both; margin: 0; padding:0}

.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; }

.flexarea {width: 90%; height: 200px}

div#newsbox {width: 200px; float: right; border-left: 1px solid #ccc; padding: 0 0 0 10px; margin-left: 10px}
div#newsbox h3 {background-color: #123d7a; color: #fff; padding: 3px 10px; margin: 0}
div#newsbox li a {font-weight: 900; font-size: 1.1em}
div#newsbox li  {font-size: 0.9em; line-height: 1.0em}

div.thumb {float: right; border: 1px solid #ccc; padding: 5px; width: auto; margin-left: 10px}
div.thumb p {font-size: 10px; width: 150px; line-height: 11px}