/** Main Style sheet for bluetoes.nl **/

/* Gebruikte kleuren */
/*********************/
/* Text color   : red - Donker grijs  */ 
/* Kleur titels : #0070C0 - Licht blauw   */
/* Nav bar, Quicklinks, navbar links : #17365D - Donker blauw  */
/* Nav bar text : pink   - Wit           */
/* Nav Bar border:#5c7395 - grijs/blauwe  */
/* Nav Bar Hover: #0072c6 - Blue Toes Blauw - big header background */
/* Copyright    : #999999 - light gray */
/* Agenda Hover : #5c7395 - ??? */
/* Popup background : #eee8aa - light yellow */
/* Background  : #ffbbff - Heel licht blauw, is ook content background */

/* font-family: "Lucida Grande",Geneva,Verdana,Arial,Helvetica,sans-serif;*/




/* Select all elements*/
* { 
    /* Disable all margin and padding */
    margin: 0px;
    padding: 0px;
    
    /* overall font definition */
    font-family: "Lucida",Geneva,Verdana,Arial,Helvetica,sans-serif;
    line-height: 1.4; /* vergroot de leesbaarheid */
}

/* images never a border */
img { border: 0px ;}

/* 100% height http://www.xs4all.nl/~peterned/examples/csslayout1.html */
html,body { 
    text-align: center; /* align center for IE */
    background: pink;
    color: #8b2252;
    height: 100%;
}

body {
    font-size: 76%;
}

/* Wrapper is main site holder - contains: header, navigation and content*/
#wrapper { 
    position: relative; /* Needed for footer positioning */
    width: 773px;
    margin: 0px auto;   /* center, fails in IE5 */
    text-align: left;
    
    height:auto !important; /* real browsers */
    height:100%;            /* IE6: treaded as min-height*/
    min-height:100%;        /* real browsers */
}

/**********/
/* HEADER */
/**********/         
#header { 
    width: 100%; /*772px*/
    padding: 0;
    height: 150px;
    background: url('../img/Pink_bigHeader.png');
}

/**************/
/* NAVIGATION */
/**************/
/* Uses: Sons of Suckerfish (http://www.htmldog.com/articles/suckerfish/dropdowns/) */
 

#nav, #nav ul { /* all lists */
	  padding: 0;
	  margin: 0;
	  list-style: none;
	  line-height: 1;
    background-color: #8b008b; 
    color: pink;
    height: 2.1em;
    z-index: 100; /* Nav bar boven alles */
}

#nav a {
	  display: block;
	  height: 1.7em;
    border-right: 1px solid red;
    padding: 0.3em 0.3em 0.1em 0.5em;
    text-decoration: none;
    background-color:#8b008b;
    color: pink;
}

#nav a:hover,
#nav li:hover,
#nav li.sfhover {
    background-color: magenta;
    color: black;
}

#nav li { /* all list items */
	  float: left;
	  width: 8em; /* width needed or else Opera goes nuts */
	  border-right: 1px solid red;
    background-color: #8b008b;
    color: silver;
}

#nav li ul { /* second-level lists */
	  position: absolute;
	  width: 12em;
	  left: -999em; 
	  /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul li a {
    width: 12em;
}

#nav li ul ul { /* third-and-above-level lists */
	  margin: -2.1em 0 0 12.5em;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	  left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	  left: auto;
}



/***********************************************/
/* CONTENT - contains 'articles' and 'sidebar' */
/***********************************************/
#content { 
    clear: both; /* zet niks naast het menu */
}

/*********************************************************************/
/* ARTICLES - contains multiple 'article' class divs or 'quicklinks' */
/*********************************************************************/
/* div containing all articles */
#articles {
    float: left; 
    width: 522px;
    padding-top: 5px;
    padding-bottom: 2em;
}

/* One article (or item) */
.article { 
    background: #ffbbff;
    color: red;
    clear: both;  /* Clear both, insure this float won't get next to quicklinks (or previous article) */
    margin: 0px 10px 0px 10px; 
    padding: 5px 7px 4px 7px;
}

/* Headers of articles*/
.article h1,
.article h2, 
.article h3 {
    width: 100%;
    border-bottom: 1px solid #8b008b;
    color: #8b008b;
    background: #ffbbff;
    margin-bottom: 8px;
}

.article h1 { font-size: 150%; }
.article h2 { font-size: 120%; }
.article h3 { font-size: 110%; }

/* in text links */
.article a {
    color : #8b008b; 
    background: #ffbbff;}
.article a:hover { 
    color: red;
    background: #ffbbff;
}

/* items in een article (paragraven, lijsten en tabelen) */
.article ul,
.article table,
.article p { 
    margin: 0em 0em 0.5em 0em;
}

/* lijsten iets inspringen */
.article ul { margin-left: 2em; }

/* Tabelen een grijs randje */
.article table { 
    border: 1px solid gray;
    border-collapse: collapse;
}

.article th { padding: 2px; border-bottom: 1px solid gray;}
.article td { padding: 2px; }


.article div.float {
    margin-left: 0.5em;
}

.article div.float ul {
    margin: 0.2em;
    list-style-type: square;
    list-style-position: inside;
}

.article div.float p {
    margin: 0.2em;
}

.article div.photo { 
    padding: 0.5em;
    text-align: center;
    font-style: italic;
    background-color: #ffbbff;
    color: red;
}

/* little icon in the text */
.article img.icon { 
    border: 0px;
    vertical-align: text-bottom;
}


/* In text foto */
.article div.photo img { 
    margin: 0 auto 0 auto;
    padding: 3px;
    border: 1px solid red;
}

/* SMALL CALENDAR */
.article table.agendaSmallCalendar {
                         text-align: center;
                         margin: 0 auto 0 auto;
}

.article table.agendaSmallCalendar th.agendaTitle { font-size: 110%;}
.article table.agendaSmallCalendar th.agendaTitle a img{
                         vertical-align: bottom;
}

.article table.agendaSmallCalendar th { font-size: 75%; }

.article table.agendaSmallCalendar td { 
  width: 2em; 
  font-size: 80%;
}
.article table.agendaSmallCalendar .unselected_month {
  font-style: italic;
  background: #f1f2f6;
  color: silver;
}
.article table.agendaSmallCalendar .hasEvent { font-weight: bold; }
.article table.agendaSmallCalendar .hasEvent a { display:block; background: silver; color: #8b008b; }
.article table.agendaSmallCalendar .hasEvent a:hover {background: #5c7395; color: red; }

.article table.agendaSmallCalendar .today { border: 2px solid black; }


/* BIG CALENDAR - DETAILED */
.article table.agendaMonth th.agendaTitle { font-size: 110% ; }
.article table.agendaMonth td.evenementTitle { font-weight: bold; border-top: 1px solid gray; }
.article table.agendaMonth td.googleCalendar { border-top: 1px solid gray; }
.article table.agendaMonth td.agendaDay { font-size: 80%; }
.article table.agendaMonth td.agendaDescription span.evenementPrijs { font-style: italic; font-size: 80%;}


/*******************************/
/* Quick Links                 */
/*******************************/
.quicklinks {
    margin: 0px 10px 5px 0px; 
    padding: 5px 7px 4px 7px;
}

.quicklinks ul { 
    list-style-type: none;
    margin-left: 0px; 
    padding-left: 10px;
    vertical-align: middle;
}

.quicklinks li { 
    float: left;
    margin: 0 0.75em 0 0;
    padding: 0;
}

.quicklinks a {
    display: block;
    padding-left: 10px;
    background: 0px 50% no-repeat url('../img/right_triangle.gif') #ffbbff;
    color : #17365D;
    text-decoration: none;
}   

.quicklinks a:hover {
    text-decoration: underline;
    color: red;
    background: 0px 50% no-repeat url('../img/right_triangle.gif') #ffbbff;
}

/***************/
/* PopUps      */
/***************/

.popup{
    position: relative;
    z-index: 0;
}

.popup:hover{
    background: transparent;
    z-index: 50;
}

.popup span {
    position: absolute;
    padding: 3px;
    border: solid 1px silver;
    background: #eee8aa;
    text-decoration: none;
    color: black;
    display: none;
    width: 15em;
}

.popup:hover span{
    display: block;
    top: 1.7em;
    left: 0em;
}

/*********************************************************/
/* SIDEBAR  - has foto, reclame, mededelingen and agenda */
/*********************************************************/

/* The sidebar global div */
#sidebar { 
    float: right;
    width: 240px;
}

/* Each sidebar item */
#sidebar .sidebar_item {
    background: #ffbbff;
    color: red;
    margin: 5px 10px 5px 10px;
    padding: 5px;
    text-align:left;
}

/* The title of the sidebar items (possible links) */
#sidebar .sidebar_item h1 a,
#sidebar .sidebar_item h1 {
    background: #ffbbff;
    color:#8b008b;
    width: 100%;
    margin-bottom: 0.2em;
    text-align: left;
    text-decoration:none;
}          
#sidebar .sidebar_item h1 {
    font-size: 120%; 
    border-bottom: 1px solid #8b008b;
}

#sidebar .sidebar_item h1 a:hover,
#sidebar .sidebar_item a:hover { 
    text-decoration: underline;
    color:red;
    background: #ffbbff;
}

/* subtitles, month names in agenda and days in jarigen */
#sidebar .sidebar_item h2 {
    font-size: 100%;
    margin-bottom: 2px;
    text-align: left;
    clear : both;
}

/* (regular) Content of a sidebar item */
#sidebar .sidebar_item p {
    margin-bottom: 0.5em;
    text-align:left;
}
/* lists in the sidebar items (mededelingen and recent foto categories */
#sidebar .sidebar_item ul{
    list-style-type: square;
    padding-left: 1.4em;
}
/* links in de listst ...*/
#sidebar .sidebar_item ul li a {
    text-align:left;
    background: #ffbbff;
    color: #17365D;
    text-decoration: none;
}

/* knopjes 'meer albums...' en 'meer opmerkingen...' */
#sidebar .sidebar_item .more {
    float: right;
    font-size: 80%;
    font-style: italic;
    vertical-align: bottom;
    margin-bottom: -0.2em;
    text-decoration: none;
}

#sidebar .sidebar_item .more a { 
    text-decoration: none;
}

#sidebar .sidebar_item .more a:hover {
    text-decoration: underline;
    color:red;
    background: #ffbbff;
}

/* Extra settings for reclame en photo */

/* Photo or 'reclame' img in a sidebar item */
#sidebar .center {
    text-align: center;
}

#sidebar .sidebar_item img.photo { 
    margin: 0.3em auto -0.2em auto;
    padding: 3px;
    border: 1px solid red;
}

#sidebar .sidebar_item img.loading {
    margin: 0.5em auto 0.0em auto;
    padding: 3px;
    border: 0px;
}

/* The refresh button for the random foto*/
#photo_refresh {
    float: right;
    border: 0;
    vertical-align: bottom;
}
#photo_refresh img { border: 0;}


/* Text (description) below a photo */
#sidebar .sidebar_item .photo {
    font-style: italic;
    text-align: center;
}

/* Extra settings for agenda sidebar item */

/* Month titles */


/* Table cell in short agenda */
#sidebar .sidebar_item .agendaShort td {
    vertical-align: top;
    text-align: left;
    padding: 0px 1px 1px 1px; 
}

/* table cell items in short agenda */
#sidebar .sidebar_item td a { 
    color: #17365D;
    background: #ffbbff;
    text-decoration: none;
    display: block;
}
#sidebar .sidebar_item td a:hover { text-decoration: underline; }


        
/********************************/
/* FOOTER has 1 p with copyright*/
/********************************/
#sidebar .sidebar_item #footer {
    margin-top: 2em;
}

#sidebar .sidebar_item #footer p { 
    text-align: center;
    font-size: 80%;
    background: #ffbbff;
    color: #999999;
}
           
#sidebar .sidebar_item #footer p a { 
    color: #17365D;
    background:  #ffbbff;
    text-decoration: none;
    font-family: tahoma, verdana, helvetica, arial, sans-serif; 
}            

#sidebar .sidebar_item #footer p a:hover { text-decoration: underline; }

/***************************/
/*  ERROR & WARNING STYLE  */
/***************************/

.error {
    color: #666666;
    background-color: #ffdddd;
    font-size: 80%;
    border: 1px solid #cc3333;
    padding: 1px;
}