/* ================================================================================ 
   =====                            CSS STYLES FOR                            ===== 
   =====                        SCHOOLWEBSITE.NU SKIN                         ===== 
   ================================================================================ */


/* ================================================================================ 
                                  GENERAL SETTINGS
   ================================================================================ */

html {
    height: 100%;               /* om hoogte op 100% te zetten in geval van te weinig content */
    margin:0px; 
    padding:0px; 
    overflow-y: scroll;         /* Altijd een scrollbalk afdwingen i.v.m. verspringingen */
}

body {
	text-align: left;
	font-family: Verdana, Arial, Sans-Serif;
	font-size:12px;
	line-height: 150%;
}

#Body { text-align:center; height: 100%;  }   /* Achtergrondkleuren + afbeeldingen hier */

#Form { height: 100%; min-height:100%; }      /* om hoogte op minimaal 100% te zetten, mag wel groter */


/* HEADINGS */
H1, H2, H3, H4, H5 {
    font-family: Verdana, Arial, Sans-Serif;
    color: #0000FF;
    font-weight: bold;
}

H1 {font-size:20px; }
H2 {font-size:18px; }
H3 {font-size:16px; }
H4 {font-size:14px; }
H5 {font-size:13px; }

/* LINKS */ 
A:link      {color: #0000FF; text-decoration: none; }
A:visited   {color: #0000FF; }
A:hover     {color: #FF0000; text-decoration: underline; }
A:active    {color: #0000FF; }

/* TABLES */
table {font-size: 12px; }               /* om de lettergrootte in de editor gelijk te zetten */
table tr {}
table tr th {}
table tr td { vertical-align:top;}

/* DNN SPECIFIC */
.Head, .SubHead, .SubSubHead, 
.Normal, .NormalTextBox, .NormalRed, .NormalBold, 
.CommandButton { font-family: Verdana, Arial, Sans-Serif; }

.Head { font-size: 16px; }          /* style for module titles */
.SubHead {font-size: 14px; }        /* style of item titles on edit and admin pages */
.SubSubHead { font-size: 13px; }    /* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.Normal { font-size: 12px; }        /* text style used for most text rendered by modules */
.NormalTextBox { font-size: 12px; } /* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalRed { font-size: 12px; }
.NormalBold { font-size: 12px; font-weight:bold; }

.CommandButton { }                  /* text style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link { }            /* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:visited  { }
A.CommandButton:hover    { }    
A.CommandButton:active   { }

.StandardButton { }                 /* button style for standard HTML buttons */

/* COMMON  ISSUES */
img {border: 0px;}                  /* geen standaard rand bij afbeeldingen wanneer er gelinkt wordt */

input[type=submit], input[type=button] {}
input[type=submit]:hover, input[type=button]:hover {}

/* ================================================================================ 
                                     MAIN LAYOUT
   ================================================================================ */
.ControlPanel { }

#Wrapper { /*height: 100% auto;*/ min-height:100%; background-color: #fff; text-align: left;  background-image: url(images/archipel_background.png); }
#InnerWrapper { /*position: relative;*/ margin: 0px auto; /*min-height:100%;*/ width: 960px; background-color: #fff; background-color: rgba(255,255,255,0.8); text-align: left; 
    background: -moz-linear-gradient(45deg,  rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-linear-gradient(45deg,  rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(45deg,  rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(45deg,  rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
    background: linear-gradient(45deg,  rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
}

/* HEADER SECTION  */
#Header { height: 180px; background-color: #fff; background-repeat: no-repeat; background-position: 80px 0px; }
#Logo { height: 180px; width: 300px; overflow: hidden; float:right; /* background-color: red; */ }

/* LOGIN */    
#Login { text-align:right; }
.LoginKey, .LoginKey:visited, .LoginKey:active { width: 18px; height: 18px; font-size: 18px; display: inline-block; background-image: url(images/login.png); background-repeat: no-repeat; }
.LoginKey:hover { width: 18px; height: 18px; font-size: 18px; background-position: 0px -19px; background-repeat: no-repeat; text-decoration: none !important;  }
              
/* MENU & SEARCH */    
#Menu { min-height: 46px; }
.MenuImage {margin: 5px 0px 0px 20px; float: left;}
#Search {
    height: 26px; width: 180px; margin: 10px 20px 0px 0px; float: right; background-color:#fff; 
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: inset 0 4px 48px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0 4px 8px rgba(0,0,0,0.4);
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.4);
}
#Search #dnn_dnnSEARCH_ClassicSearch { display: block; overflow: hidden; height: 26px; line-height: 26px;}

#dnn_dnnSEARCH_ClassicSearch  {position: relative;}


#Search .NormalTextBox { display: block; width:130px;  border:0px; padding:0px; position: absolute; top: 0px; left: 10px; font-size:12px; height: 26px; line-height: 26px; background-color:transparent;}   
#Search .SkinObject { display: block;  width:18px; height:18px; position: absolute; top: 6px; right: 10px; background-image:url(images/zoeken.png);  }

/* BREADCRUMB SECTION */
#Breadcrumb { clear: both; padding: 10px 18px; }
#Breadcrumb .SkinObject {  }

/* PANES SECTION */
#Panes { padding: 10px 0px; /*padding-bottom: 200px;*/ }
.TopPane {  }
.ContentPane { vertical-align:top; width: 662px; padding-right: 18px;}
.RightPane { vertical-align:top; }
.BottomPane {  }
.FooterPane {}

/* FOOTER SECTION */
#Footer { /*position: absolute; width: 960px;*/ min-height: 200px; padding: 10px 0px; bottom: 0px; background-color: #d4e4f0; color: #ffffff; }
#Footer A:link      { color: #ffffff; }
#Footer A:visited   { }
#Footer A:hover     { }
#Footer A:active    { }

/* =================== 
        RADMENU 
   =================== */
/* === Root Items === */  
.RadMenu_MainMenu { z-index: 910 !important; width: 700px; margin-left: 10px; }
.RadMenu_MainMenu .rmRootGroup .rmItem { margin: 0px; padding: 0px; }
.RadMenu_MainMenu .rmRootGroup .rmItem .rmLink { margin: 0px; padding: 0px; cursor:pointer; text-decoration: none;}
.RadMenu_MainMenu .rmRootGroup .rmItem .rmLink .rmText { margin: 0px; padding: 0px 10px; display: block; white-space: normal; line-height: 46px; text-transform: uppercase; color: #fff;  }
/* Hover State */
.RadMenu_MainMenu .rmRootGroup .rmItem .rmLink .rmText:hover { } 
/* Selected State  */
.RadMenu_MainMenu .rmRootGroup .rmItem .rmSelected .rmText { } 

/* === Sub Items === */   
.RadMenu_MainMenu .rmGroup .rmItem { margin: 0px; padding: 0px; }
.RadMenu_MainMenu .rmGroup .rmItem .rmLink { margin: 0px; padding: 0px; cursor:pointer; text-decoration: none}
.RadMenu_MainMenu .rmGroup .rmItem .rmLink .rmText { margin: 0px; padding: 0px 10px; line-height: 26px; display: block; white-space: nowrap; }
/* Hover State */
.RadMenu_MainMenu .rmGroup .rmItem .rmLink .rmText:hover { }
/* Selected State  */
.RadMenu_MainMenu .rmGroup .rmItem .rmSelected .rmText { } 



/* Twitter */
.twitterbox { max-width: 245px; }
.twitterbox .twittercontent { 
	-webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
	margin: 5px 0px 0px 0px;
	padding: 10px;
	background-color: #d7e7a3;
}

.twitterbox .twittercontent .twtr-hd,
.twitterbox .twittercontent .twtr-ft{ display:none !important;}
.twitterbox .twittercontent .twtr-doc { width: auto !important;}
.twitterbox .twittercontent .twtr-timeline { z-index: 0 !important;}

.twitterbox .twitterfooter { height: 81px; background-image: url(images/twitter_footer.png); 
background-color: #d7e7a3;
}

/* DNN SPOT ROTATOR */
.slides, .slides .slide { background-color:transparent !important; width: 100%;height: 350px;}
.SliderTemplateHome { position: relative; width: 100%; height: 350px;}
.SliderTemplateSlidesBox{height: 350px; margin-right: 10px; overflow: hidden;}
.SliderTemplatePager { position: absolute; right: 0px; bottom: 0px; z-index: 30; margin:0px; padding:0px; width: 150px; height: 82px; background-image: url(images/home_slider_poppetje.png); background-repeat: no-repeat; background-position: right top; overflow: hidden;}

.SliderTemplatePager ul{ position: absolute; right: 50px; bottom: 0px; margin:0; padding:4px 6px 2px 6px; background-color: #fff; 
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px; 
}

.SliderTemplatePager li{ float:left; margin: 0 3px 0 0; width:10px; line-height: 10px; list-style:none; 
	position:relative; z-index:10; display:block; text-indent:-9999px; cursor:pointer; 
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background:#028423;}
.SliderTemplatePager .activeSlide { background-color:#f18a00 !important; }

.SliderTemplateHome .slides .slide  table{ position: absolute; bottom: 0px; left: 0px; width:100%; 
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
	background-color: #eee;
	background-color: rgba(255,255,255,0.7); 
	
}

.SliderTemplateHome .slides .slide  table td { padding: 10px 130px 10px 10px;}
.SliderTemplateHome .slides .slide  table td h1 {margin: 0px 0px 10px 0px;}
.SliderTemplateHome .slides .slide  img {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; 
}

/* PUBMOD algemeen */
.pubRssFeed{ float: right;}
.pubPrintButton {float: right;}
.pubReturnLink {float: right; margin-right: 10px;}
.pubControls { padding: 10px 0px;}

.pubItem {width: 100%;}
.pubItem td {padding-bottom: 24px;}
.pubItem .pubThumbnail { padding-right: 16px;}
.pubItem .pubThumbnail .pubThumbnailImage { width: 150px;}
.pubItem .pubContent {}
.pubItem .pubContent h1,
.pubItem .pubContent h2 {margin: 0px 0px 5px 0px; padding: 0px;}
.pubItem .pubContent .pubMetaData {font-size: 10px; margin: 0px 0px 5px 0px; padding: 0px;}
.pubItem .pubContent .pubMetaData span { color: #028423;} 

.FileBoxWrap { margin:15px 0px;}
.FileBoxUnsortedList {margin:0px; padding:0px;}
.FileBoxUnsortedList > li.ImageList { display:inline-block; zoom:1; *display:inline !important; height:75px;  }
.FileBoxUnsortedList > li.ImageList > a > img  { height:75px;}

/*   margin-left: 25px; staat nu inline, die moet uit de module !!!important kan daarna weg */
.FileBoxUnsortedList li.DocumentList {list-style-position:inside; margin:0px 0px 5px 0px !important; }


.pp_social {display: none;} /* Hides the facebook and twitter buttons in the pubmod image lightbox */


/* PUBMOD viewer voorpagina */
.pubViewerVoorpagina { overflow: hidden;}
.pubViewerVoorpagina .pubItem { width: 200px; float: left; margin-right: 6px;  }
.pubViewerVoorpagina .pubThumbnail{ position: relative; height: 182px; width: 200px; overflow: hidden;}
.pubViewerVoorpagina .pubThumbnail .pubMask { position: absolute; top: 0px; left: 0px; height: 182px; width: 200px; background-image: url(images/viewer_voorpagina_item1.png); background-repeat: no-repeat; z-index: 2; }
.pubViewerVoorpagina .pubThumbnail .pubMaskContainer { position: absolute; top: 44px; left: 8px; height: 120px; width: 180px; overflow: hidden; z-index: 1; text-align:center;}
.pubViewerVoorpagina .pubThumbnail .pubMaskContainer img { height: 100%; margin: 0px -50%;}
.pubViewerVoorpagina .pubThumbnail .pubMaskBg { margin: 50% 8px 0px 8px; height: 50%; z-index: 0; background-color: #ccc;  /* IE7 Hack */ *display: none;}
.pubViewerVoorpagina .pubTitle{ clear: both; min-height: 40px; margin: 0px 4px; padding: 8px; color: #ffffff; background-color: #666666;}
.pubViewerVoorpagina .pubContent{ min-height: 140px; margin: 0px 8px; padding: 8px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
	background-color: #ccc;
 }
 .pubViewerVoorpagina .pubContent .pubMeta  { font-size: 10px; margin-bottom: 8px; } 
 .pubViewerVoorpagina .pubContent .pubMeta  span { color: #028423;} 
 .pubViewerVoorpagina .pubItem1 .pubThumbnail .pubMask {}
 .pubViewerVoorpagina .pubItem2 .pubThumbnail .pubMask {background-image: url(images/viewer_voorpagina_item2.png);}
 .pubViewerVoorpagina .pubItem3 .pubThumbnail .pubMask {background-image: url(images/viewer_voorpagina_item3.png);}
 
 
  /* PUBMOD Sidebar */
 .OuterNavBlock {}
 .OuterNavBlock .NavBlockTitle { display: none;}
 .OuterNavBlock a.navBlockItemLink {}
 .OuterNavBlock span.navBlockItemLink {}
 .OuterNavBlock .TagcloudOuterList {}
 .OuterNavBlock .TagcloudOuterList .TagCloudItem{}
 
 .OuterNavBlock  input[type=text],
 .OuterNavBlock  input[type=submit] {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; 
	padding: 4px 8px;
	margin: 16px 0px 0px 0px;
	border: 1px solid #622181;
 }
 .OuterNavBlock  input[type=submit] {
 font-weight: bold;
 color: #f18a00;
 background-color: #622181;
 }
 
 
 /* Kalender voorpagina */
 .KalenderHeader {background-image: url(images/kalender_icon.png); background-repeat: no-repeat; background-position: top left; margin: 0px; padding: 0px 0px 0px 40px; line-height: 30px;
 *background-position-y: 2px;
 }
 

/* ================================================================================ 
                                CONTAINER LAYOUT'S
   ================================================================================ */

.Container 
{
    margin-bottom: 18px;
    background-color: #fff;  
    -webkit-border-top-left-radius: 16px;
    -webkit-border-top-right-radius: 16px;
    -moz-border-radius-topleft: 16px;
    -moz-border-radius-topright: 16px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;  
    
}

.Container .ContainerHeader {
    height: 38px;
    background: rgb(241,135,0);
    background: -moz-linear-gradient(top,  rgba(241,135,0,1) 0%, rgba(219,121,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,135,0,1)), color-stop(100%,rgba(219,121,0,1)));
    background: -webkit-linear-gradient(top,  rgba(241,135,0,1) 0%,rgba(219,121,0,1) 100%);
    background: -o-linear-gradient(top,  rgba(241,135,0,1) 0%,rgba(219,121,0,1) 100%);
    background: -ms-linear-gradient(top,  rgba(241,135,0,1) 0%,rgba(219,121,0,1) 100%);
    background: linear-gradient(top,  rgba(241,135,0,1) 0%,rgba(219,121,0,1) 100%);

    -webkit-border-top-left-radius: 16px;
    -webkit-border-top-right-radius: 16px;
    -moz-border-radius-topleft: 16px;
    -moz-border-radius-topright: 16px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
       
    -webkit-box-shadow: 2px 3px 4px rgba(163,92,0,0.51);
    -moz-box-shadow: 2px 3px 4px rgba(163,92,0,0.51);
    box-shadow: 2px 3px 4px rgba(163,92,0,0.51);
}

.Container .ContainerHeader > span { margin: 5px 0px 0px 5px; float:left; }
.Container .ContainerHeader h2 {line-height: 38px; margin: 0px 18px; }
.Container .ContainerHeader h2 span {color: #fff;}
.Container .ContainerContent { padding: 12px 18px 18px 18px; }
.Container .ContainerFooter { }

/* Blank container*/
.ContainerBlank {background-color: Transparent;}
.ContainerBlank .ContainerHeader { height: auto; background-color: Transparent; background-image: none;
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
                                   
                                   }
.ContainerBlank .ContainerContent { background-color: Transparent; padding: 0px 18px 18px 18px; }
.ContainerBlank .ContainerFooter { background-color: Transparent; }