/* ********************************************************************************
 * Building blocks
 * h2, h3, p, etc        Standard html tags
 * div.gbBlock           Sidebar or content section with style for contained lists
 * ul.gbBreadCrumb       List of links/path elements
 * table.gbDataTable     Table for data/form elements with styles for shading rows
 */

/* ALGEMENE OPMERKING: Alle Paths van de foto's en de navigation moeten aangepast worden met extra ../ ervoor aangezien de Local
   files 1 niveau lager staan doordat deze file in de subdirectory local staat !!! */

/* Custom voor P tag in de Sidebar met de link naar de Kwadro Website */

.sidebarlink   {
    font-size: 11px;  /* Custom size op 12px of 1.2em gezet */
	font-weight: Bold;
	font-family: Comic Sans MS, Trebuchet MS;
}

#gallery h2, #gallery h3, #gallery h4, #gallery form {
    margin: 0;
    padding: 0;
}

#gallery p {
    margin: 0.6em 0;
    padding: 0;
}

.gbBlock {
    padding: 0.7em;
    border-width: 0 0 1px 0;
    border-style: inherit;
    border-color: inherit;
    /* IE can't inherit these */
    border-style: expression(parentElement.currentStyle.borderStyle);
    border-color: expression(parentElement.currentStyle.borderColor);
}

.gbBlock ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.gbBlock ul ul {
    margin: 0 0 0.5em 1.0em;
}

.gbBlock li {
    padding: 6px 0 0 0;
}

#gallery .gbBlock h3 {
    margin-bottom: 0.5em;
}

#gallery .gbBlock h4 {
    margin-top: 0.5em;
}


#gsNavBar div.gbBreadCrumb {
    margin: 0;
    padding: 4px 8px;
}

table.gbDataTable {
    padding-bottom: 4px;
}

table.gbDataTable th, table.gbDataTable td {
    padding: 4px;
}


.giBlockToggle {
    padding: 0 0.4em 0.1em;
}
.giBlockToggle:hover {
    cursor: pointer;
}


.gbMarkupBar {
    margin: 4px 0;
}

#gallery .gbMarkupBar input {
    margin: 0;
    padding: 0;
}


/* ********************************************************************************
 * Sections
 * body.gallery     Page body in G2 standalone (doesn't apply to embedded)
 * #gallery         Page container
 * #gsNavBar   Top bar with breadcrumb and other links
 * #gsSidebar       Sidebar
 * #gsContent       Main content
 */

body.gallery {
    margin: 0;
    padding: 0;
}

#gallery.rtl {
    direction: rtl;
}

/* ZELF BIJGEWERKT BORDERS ROND DE TOP NAVBAR  zoals op de homepage van de Kwadro Website */
/* Ook de grootte van de fonts is hier gewijzigd: De navbar fonts groter, de system links ( zie verder) kleiner */

#gsNavBar {
    border-top: 2px solid #009933;
    border-bottom: 2px solid #009933;
	border-left: 2px solid #009933;
	border-right:  2px solid #009933;
	background-color: #99CC66;
/*	font-size: 1em; */
	font-size: 1.1em;  /* Custom size op 12px of 1.2em gezet */
	font-weight: Normal;
	font-family: Comic Sans MS, Trebuchet MS;
}


#gsNavBar div.gbSystemLinks {
    padding: 4px 6px;
}

#gsNavBar div.gbSystemLinks span {
    padding: 0 4px;
}

/* ZELF BIJGEVOEGDE Custom HEADER MET LOGO VAN KWADRO + Slogan en de Foto langs de rechterkant */
/* Dit is de hoofd Div tag, de sub Divs met logo, tekst en foto komen binnen de DIV gsHeader */

#gsHeader {
	background-color: #CCCCCC;
	border-bottom: none;
	border-top: none;
    border-left: none;
    border-right: none;
    height: 110px;

}
/* Extra bijgevoegd: dit zijn de Div's voor de Custom header zoals op de Kwadro Website*/

#gsheaderlogo {
	position: absolute;
	width: 160px;
	height: 110px; 
	left: 0px;
	top: 0px;
}

#gsheaderfoto {
	position: absolute;
	width: 160px;
	height: 110px;
	right: 0px;
	top: 0px;
}
#gsheadertitle {
	position: absolute;
	font-family: Comic Sans MS, Trebuchet MS;
	font-size: 17px;
	height: 110px;
	top: 0px;
	width: 100%;
}

#gsheadertitle h1 {
	font-size:1.3em;
	text-align:center;
	font-weight: normal;
	font-family: Comic Sans MS, Trebuchet MS;
	color: #FFFFFF;
	padding-top: 0.3em;
	padding-right: 6em;
	padding-bottom: 0.3em;
	padding-left: 6em;
}


/* Hier staan de instellingen voor de Sidebar aan de linkerzijde. We houden de achtergrond op wit omdat de images die
gebruikt worden in deze balk een witte achtergroun hebben. Voorlopig hier enkel height 100% bijgeplaatst */

#gsSidebar {
	border-right-width: 1px;
	width: 175px;
	overflow: hidden;
	height: 100%; /* height bijgeplaatst: dit geeft in Firefox mooie border to aan de bodem, helaas niet in IE */
	background-color: #CCCCCC;	/* Custom, grijze sidebar zelfde kleur als de header */
	font-weight: normal;  /* Custom */
	font-family: Comic Sans MS, Trebuchet MS; /* Custom */
	font-size: 1em; /* Custom */
}


#gsSidebarCol {
    width: 1%; /* Expand to fit content ("0" bad4 firefox, "1px" bad4 opera) */
}

/* Hier zet de instellingen voor het thumbnail view van alle foto's in een Album + achtergrond van de Albums 
   maar niet voor een individuele foto ! 
   We kiezen hier voor de bruin-beige achtergond die we ook gebruiken als achtergrond voor individuele 
   foto's met een groen border rond het Album 
*/

td.giAlbumCell, td.giItemCell {
    padding: 1em;
    text-align: center;
	background-color: #ECE9D8; /* ofwel dit is een subtiel iets donkerdere tint bruin #E8E3CE; */
	border: 2px solid #009933;
}

#gallery td.giAlbumCell select, #gallery td.giItemCell select {
    margin-top: 0.8em;
}

/* So imageframed thumbs can be centered */
td.giAlbumCell table, td.giItemCell table {
    margin: auto;
}

#gsPages span {
    padding: 0 0.3em;
}

#gallery #gsSidebar ul {
    font-size: 1em; 
}

/* ********************************************************************************
 * Matrix Theme for Gallery 2
 * by Ross A. Reyman, Jon Huang, and Chad Kieffer
 * updated by Alan Harder
 */

/* ********************************************************************************
 * Building blocks
 * #gallery              Default font/color settings
 * .gcBackground1,2..    Palette of backgrounds
 * .gcBorder1,2..        Palette of borders
 * a, h2, h3, etc        Standard html tags
 * .giTitle, .giSubtitle, .giDescription, .giInfo, .giSuccess, .giWarning, .giError
 *                       Palette of text styles
 * div.gbBreadCrumb      List of links/path elements
 * table.gbDataTable     Table for data/form elements with styles for shading rows
 * div.gbTabBar          UI component for selectable tabs
 * .autoComplete*        Styles for autoComplete popup lists
 */

/* Hier plaats je de gegevens voor gans de galery algemeen zoals de achtergrond, font, ... */
/* Hier wijzigen we de global fonts voor gans de Gallery naar Comic Sans MS */

#gallery {
	font-family: Comic Sans MS, Trebuchet MS;
    /* font-family: Verdana, Arial, Helvetica, sans-serif; */
    font-size: 65%;
    color: #333;
	background-color: #CCCCCC; /* achtergrond van de gallery in het grijs */
}

/* Customised: hier plaatsen we de global Fonts en de size in pixels voor alle DIV's aangezien deze allemaal van body afhangen */

body.gallery {
    background-color: #fff;
	font-family: Comic Sans MS, Trebuchet MS;
}

.gcBackground1 {
    background-color: #eee;
}

.gcBackground2 {
    background-color: #e7e7e7;
}

.gcBorder1 {
    border: 0 solid #ccc;
}

.gcBorder2 {
    border: 0 solid #888;
}

#gallery a {
    font-weight: bold;
    text-decoration: none;
    color: #000000; /* Wijzigen van de kleur van de links van rood naar zwart */
}
#gallery a:hover {
    text-decoration: underline;
    color: #000000; /* Wijzigen van de kleur van de links van rood naar zwart */
}
#gallery a:active {
    text-decoration: none;
    color: #006B52; /* Wijzigen van de kleur van de actieve links naar groen */
}

#gallery img {
    border-width: 0;
}

/* Ook voor de Headers wijzigen we de default Font-Family naar Comic Sans MS */

#gallery h2, #gallery h3, #gallery h4 {
	font-family: Comic Sans MS, Trebuchet MS;
    /* font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif; */
}

#gallery input:focus, #gallery textarea:focus {
    background-color: #ffc;
    color: #000;
}

#gallery input.inputTypeSubmit, #gallery input.inputTypeButton {  /* No input[type=submit] in IE */
    color: #333;
    background-color: #eee;
    border-width: 2px;
    border-style: solid;
    border-color: #e7e7e7 #666 #666 #e7e7e7;
}

#gallery select {
    font-size: 1em;
}

.giTitle, #gallery h2, #gallery h3, #gallery h4 {
    font-size: 1.3em;
    font-weight: bold;
}

#gallery pre, #gallery tt {
    font-family: Courier New;
    font-size: 1.2em;
}

.giSubtitle {
    font-size: 0.9em;
    font-weight: normal;
    vertical-align: text-bottom;
}

.giDescription {
    font-size: 1.1em;
    line-height: 1.4em;
}

.gbEmptyAlbum {
    height: 400px;
}

.giDescription h3.emptyAlbum {
    line-height: 4.0em;
    text-align: center;
}

.giInfo {
    font-size: 0.9em;
    color: #888;
}

.giInfo span.summary {
    display: block;
}

.giSuccess, .giWarning, .giError  {
    font-weight: bold;
}

.giSuccess { color: #5c0; }
.giWarning { color: #c50; }
.giError { color: #a44; }

.giNew, .giUpdated {
    border-width: 2px;
    border-style: ridge;
    padding: 0 6px;
    line-height: 1.9em;
}

/* Hier zet je de kleur van de tekst in de Navbar van de getoonde foto die niet meer aanklikbaar is */

#gsNavBar div.gbBreadCrumb {
    font-size: 1.1em;
    font-weight: Normal;
	color: #F0F0F0;
}

#gsNavBar div.gbBreadCrumb a, #gsNavBar div.gbBreadCrumb span {
    padding: 0 0 0 14px;
    background: url('../images/icon_path_separator.gif') no-repeat left;
}

#gsNavBar div.gbBreadCrumb a.BreadCrumb-1 {   /* no :first-child in IE */
    padding-left: 0;
    background-image: none;
    white-space: nowrap;
}

#gsThumbMatrix {
    width: 100%;
}

#gallery.IE div.gbBreadCrumb span {
    display: inline-block;   /* IE loses padding-left on wrapped inline nowrap element */
    padding-right: 4px;      /* IE has less space at right of each span */
}

#gsNavBar div.gbBreadCrumb span.BreadCrumb-1 {   /* no :first-child in IE */
    padding-left: 0;
    background-image: none;
}

/* Custom: wijzigen van de systemlinks van wit naar zwart */
/* Customising van de Systemlinks die aan de rechterzijde in de Navbar staan. Deze moeten kleiner zijn van tekstgrootte dan de Navbar zelf */

#gsNavBar div.gbSystemLinks {
  float: right;
  color: #000000; 
  font-weight: Normal; 
  font-size: 0.8em;

}

table.gbDataTable th {
    text-align: left;
    background-color: #e7e7e7;
}

.gbEven {
    background-color: #fff;
}

.gbOdd {
    background-color: #eee;
}


div.gbTabBar {
    font-size: 0.9em;
    font-weight: bold;
    margin: 0.8em 0 0;
    padding: 6px;
    background: url('../../matrix/images/tab_bg.gif') repeat-x bottom;
    white-space: nowrap;
}

div.gbTabBar span.o {
    padding: 6px 0 5px 8px;
    background: url('../../matrix/images/tab_left.jpg') no-repeat left top;
}
#gallery.IE div.gbTabBar span.o {
    display: inline-block;   /* IE loses padding-left on wrapped inline nowrap element */
    margin-bottom: 1px;      /* ..and then adds padding differently with inline-block.. */
}
/* IE may clip off the right end of a long set of tabs, so allow IE to wrap them */
#gallery.IE div.gbTabBar { padding-bottom: 0; white-space: normal; }
#gallery.IE div.gbTabBar span.giSelected { margin-bottom: 0; }

#gallery div.gbTabBar span span {
    padding: 6px 12px 5px 4px;
    background: url('../../matrix/images/tab_right.jpg') no-repeat right top;
}

#gallery div.gbTabBar a {
    color: #777;
    text-decoration: none;
}

#gallery div.gbTabBar a:hover {
    color: #333;
}

#gallery div.gbTabBar span.giSelected {
    padding-bottom: 6px;
    background-image: url('../../matrix/images/tab_left_on.jpg');
}

#gallery div.gbTabBar span.giSelected span {
    color: #333;
    padding-bottom: 6px;
    background-image: url('../../matrix/images/tab_right_on.jpg');
}

.autoCompleteBackground {
    border: 1px solid #ccc;
    border-top-style: none;
    margin: 0;
}

.autoCompleteHighlight {
    text-decoration: underline;
}

.autoCompleteNotSelected {
    background-color: #eee;
    padding: 3px 4px 3px 17px;
}

.autoCompleteSelected {
    background-color: #ffc;
    padding: 3px 4px 3px 17px;
}


#gallery .gbMarkupBar input {
    font-size: 1.1em;
}


#ProgressBar #progressDone {
    background-color: #fd6704;
    border: thin solid #ddd;
}

#ProgressBar #progressToGo {
    background-color: #eee;
    border: thin solid #ddd;
}

.giSearchHighlight {
    font-weight: bold;
    background-color: #ff6;
}


/* ********************************************************************************
 * Sections
 * #gallery         Page container
 * #gsNavBar   Top bar with breadcrumb and other links
 * #gsSidebar       Sidebar
 * #gsContent       Main content
 * #giFormUsername  Form field for entering a username
 * #giFormGroupname Form field for entering a group name
 */


/* Hier zet je de instellingen als de achtergrond voor het globaal middenstuk waarin de foto komt ofwel je thumbnail overview
van een album */
/* gsContent is Custom bijgevoegd aan de Template */

#gsContent {
	background-color: #ECE9D8;
}

#gsNavBar div {
    margin-top: 0.1em;  /* Align system links with breadcrumb */
    font-weight: Bold;
}

#gsSidebar div ul {   /* no > in IE */
    font-size: 1.1em; 
    font-weight: Bold;
}

#gsSidebar div ul ul { font-size: 1.0em; }

#gsSidebar ul span {
    color: #999;
}

#giFormUsername, .giFormUsername {
    background: url('../../matrix/images/userinfo.png') no-repeat 0 1px;
    padding-left: 17px;
}

#giFormGroupname {
    background: url('../../matrix/images/groupinfo.png') no-repeat 0 1px;
    padding-left: 17px;
}

#giFormPassword {
    background: url('../../matrix/images/key7-16-bw.gif') no-repeat 0 1px;
    padding-left: 17px;
}

/* Opera ignores padding in form inputs; put icons on right side instead */
#gallery.opera #giFormUsername, #gallery.opera .giFormUsername,
#gallery.opera #giFormGroupname, #gallery.opera #giFormPassword {
    background-position: right center;
}

/* Zelf bijgevoegd om de Navbar  volgend/vorig/begin/einde ) aan te passen */

div.gbNavigator {
  /* background-color:#CCCCCC; */ 
  background-color: #A8A8A8; /* We gebruiken een donkerdere grijstint hier om de navigatie tussen de foto's beter te laten opvallen */
}


div.gbNavigator div.next-and-last {
  float: right;
}
div.gbNavigator div.next-and-last.no-previous {
  float: none;
  text-align: right;
}

div.gbNavigator a.first {
  padding-left: 27px;
  background: url("../images/nav_first.gif") left no-repeat;
}

div.gbNavigator a.previous {
  padding-left: 27px;
  background: url("../images/nav_prev.gif") left no-repeat;
}

div.gbNavigator a.next {
  padding-right: 27px;
  background: url("../images/nav_next.gif") right no-repeat;
}

div.gbNavigator a.last {
  padding-right: 27px;
  background: url("../images/nav_last.gif") right no-repeat;
}

div.gbNavigator div.first-and-previous img {
  vertical-align: middle;
  padding-right: 0.5em;
}
div.gbNavigator div.next-and-last img {
  vertical-align: middle;
  padding-left: 0.5em;
}

#gallery.rtl div.gbNavigator div.next-and-last {
  float: left;
}
#gallery.rtl div.gbNavigator div.next-and-last.no-previous {
  float: none;
  text-align: left;
}
#gallery.rtl div.gbNavigator div.first-and-previous {
  text-align: right;
}
/* Both IE and Gecko have bugs with omitting padding on rtl inline content */
#gallery.IE.rtl div.gbNavigator a {
  display: inline-block;
}
#gallery.gecko.rtl div.gbNavigator a {
  display: -moz-inline-box;
}

#gallery.rtl div.gbNavigator a.first {
  padding: 0 27px 0 0;
  background: url("../images/nav_last.gif") right no-repeat;
}
#gallery.rtl div.gbNavigator a.previous {
  padding: 0 27px 0 0;
  background: url("../images/nav_next.gif") right no-repeat;
}
#gallery.rtl div.gbNavigator a.next {
  padding: 0 0 0 27px;
  background: url("../images/nav_prev.gif") left no-repeat;
}
#gallery.rtl div.gbNavigator a.last {
  padding: 0 0 0 27px;
  background: url("../images/nav_first.gif") left no-repeat;
}
#gallery.rtl div.gbNavigator div.first-and-previous img {
  padding: 0 0 0 0.5em;
}
#gallery.rtl div.gbNavigator div.next-and-last img {
  padding: 0 0.5em 0 0;
}

div.block-search-SearchBlock a.advanced {
  display: block;
  padding: 3px;
}

div.block-core-ItemLinks {
  margin: 3px 0;
}
div.block-core-ItemLinks a {
  padding: 3px;
}
div#gsSidebar div.block-core-ItemLinks a {
  display: block;
}

div#gsSidebar div.block-core-PeerList a {
  display: block;
  padding: 3px;
}

div#gsSidebar div.block-core-PeerList span {
  font-weight: Bold;
  display: block;
  padding: 3px;
}

/* Hier veranderen we de tekst van een actief item in de Sidebar ( concreet naam van de actueel getoonde foto ) */
/* Deze optie wordt voorlopig niet gebruikt in de huidige versie van de gallery, deze lijst is de Sidebar is enkel te zien */
/* Als je de link list aanzet in de opties voor de Sidebar */

div#gsSidebar div.block-core-PeerList span.current {
  color: #006B52;
}


/* ***************************************************** */
/*                   Dynamic blocks                      */
/* ***************************************************** */

div.block-comment-ViewComments {
  margin: 5px;
}

div.block-comment-ViewComments div.one-comment {
  border: 1px solid #e7e7e7;
  padding: 5px;
  margin-bottom: 5px;
}

div.block-comment-ViewComments h3 {
}

div.block-comment-ViewComments span {
  padding-right: 5px;
}

div.block-comment-ViewComments p.info {
  font-style: italic;
  text-align: right;
  font-size: 0.95em;
}

div.block-core-GuestPreview {
  float: right;
}
#gallery.rtl div.block-core-GuestPreview {
  float: left;
}

span.block-core-SystemLink {
}

div.block-exif-ExifInfo {
  margin: 5px;
}

span.bsw_ButtonDisabled {
  color: #999;
}

span.bsw_ButtonEnabled {
  color: #000;
  cursor: pointer;
}

table.bsw_ParamTable {
  width: 100%;
  border: 1px solid #999;
  border-collapse: collapse;
}

tr.bsw_ParamHeaderRow {
  background-color: #EEE;
}

tr.bsw_ParamHeaderRow td {
  font-weight: bold;
  text-align: center;
  border: 1px solid #999;
}

td.bsw_BlockCommands {
  white-space: nowrap;
  text-align: center;
}

#gsFooter {
  padding-top: 4px;
}

/* ********************************************************************************
 * Rating module style fix for Matrix
 */
.giRatingUI {
    margin: 10px auto; /* Required to center default rating module star images */
}
#gsThumbMatrix .giRatingAverageContainer {
    margin: auto;
}

/* Zelf bijgevoegd: dit is onze Custom Footer met het copyright */

#gsFooter {
  padding-top: 4px;
  padding-left: 10px;
  border-top: 2px solid #009933;
  border-bottom: 2px solid #009933;
  border-left: 2px solid #009933;
  border-right: 2px solid #009933;
  background-color: #99CC66;
  font-size: 1.1em;
  font-family: Comic Sans MS, Trebuchet MS;
  
}