/* Advertisements are shown in a bar of 200 pixels width */

.col-advertisement {
  position: relative;
  width:200px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 0px;
  padding-left: 0px;
}

.bannerfooter {
	font-size: 10px;
	color: #666666;
	font-style: italic;
	text-align: center;
}

}
/* For Vegatopia, we use a 2-column layout. However, for monitors with a resolution lower than 1200 pixels, we want
to show only 1 column. In order to ensure that each article starts below the previous one (and not next to the picture of the
previous article, in case of very short introductions), this extra rule is needed */

@media(max-width: 1199px) {
	.col-md-8 .cols-2 .column-1, .col-md-8 .cols-2 .column-2 {
		width: 98%;
		float: left;
	}
}

/* For screens wider than 992 pixels, the content area (col-md-8) should take up 75% instead of 66%.
   Consequently, the sidebar takes up 25% instead of 33%. The advertisement area is fixed: 200px */

@media(min-width: 768px) {

.col-md-8 {
	float: left;
	width: 66%;
}

.col-md-4 {
	float: left;
	width: 33%;
}
}

@media (min-width: 992px) {

.col-advertisement {

    float: left;
}

  .col-md-8 {
    width: 75%
  }
  .col-md-4 {
    width: 25%;
  }
}



/* Not in the original template: For screens of 1200 pixels and wider, the container is 95% wide, with (for now) a maximum of 1825 pixels */

@media (min-width: 1200px) {
  .container {
    width: 95%;
  }
}


@media (min-width: 1920px) {
  .container {
    width: 1825px;
  }
}

/* Define the body area: light gray background, vegatopia header (picture should be available) */

body {
	background-color: #f8f8f8;
	color: #222222;
	font-size: 12pt;
}

/* Silly solution to remove the horizontal line on top and below the container (which contains main content and sidebar */
body hr {
	border: 0px;
}

/* The header contains a logo that is defined as a custom html module with the position 'header'.
   The logo should be 90px high and will be centered with 10 pixels on top. */
.header {
   padding-top: 30px;
   background-color: #FFF;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
}

footer {
	text-align:center;
}
/* The content areas have a white background, a decent border with rounded corners and a drop shadow.
I increased the z-index to prevent the advertisement bar from blocking links */

.col-md-8 {
	z-index: 1;
}
.col-md-4 .moduletable, .col-lg-4, .col-md-12 {
/*background-color: #fefefe;
  border: 1px solid #cccccc;
  border-radius: 4px; */
  margin-bottom: 15px;
  z-index: 1;

}

/* The main content area has a padding of 40px, padding-top=0px */

.col-md-8 {
  padding-top: 0px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 40px
}

.col-md-8 p {
  text-align: justify;
}


/* All modules have a padding of 10px left and right */

.moduletable {
  padding-left: 10px;
  padding-right: 10px;
}



/* Bottom three boxes have a width of 30% */

@media (min-width: 992px) {
	.col-lg-4 {
		float: left;
		width: 45%;
		margin-right: 4%;
	}
}

@media (min-width: 1200px) {
	.col-lg-4 {
		width: 30%;
		margin-right: 3.33%;
	}
}

/* Distance between advertisements */
.bannergroup {
  margin-bottom: 15px;
}

.col-md-8,.col-md-12 .column-1,.column-2,.column-3,.column4 {
		word-wrap: break-word;
	}


/* The sidebar (col-md-4) and banners are centered (we might want to change this for the sidebar) */

.bannergroup {
text-align: center;
}

/* Top module has a negative top margin, to ensure that the distance between menu and main content is not too large */

.top-modules {
margin-top: -20px;
margin-right: auto;
margin-left: auto;
}

/* Adapt colors of MobileMenu CK  (Note of the author: please: never add level 3..)*/
div.mobilemenuck-bar-title, div.mobilemenuck-title, .mobilemenuck-item > .level1 {
    background: rgb(60, 124, 150) !important;
}

.level2 + .mobilemenuck-submenu .mobilemenuck-item > div{
    background: #cf6000 !important;
}


/* Space between the main content and the bottom three boxes */
.container {
	margin-bottom: 20px;
}



/* Breadcrumbs have transparent background */
.breadcrumb {
background-color: transparent;
color: #333333;
}

.breadcrumb .active {
color: #333333;
}

/* Search */
.search {
padding-top: 5px;
padding-bottom: 5px;
max-width: 100%;
}

  /* joomla article pagenav */
  ul.pagenav, ul.pagenav li {
    list-style: none; list-style-type:none; list-style-image: none;
    margin:0; padding:0; border: 0;
    overflow: hidden;
    width: 100%;
  }
  ul.pagenav {
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
  }
  ul.pagenav li.pagenav-prev { float: left; width:auto; }
  ul.pagenav li.pagenav-next { float: right; width:auto; }
  /* joomla pagination */
  .pagination ul, .pagination ul li {
    list-style: none; list-style-type:none; list-style-image: none;
    margin:0; padding:0; border: 0;
    overflow: hidden;
    width: 100%;
  }
  .pagination ul { }
  .pagination ul li {
    float: left;
    width: auto;
    margin:0 5px 5px 0;
  }
  .pagination ul li.pagination-end { margin-right:0; }
  .pagination ul li.active-page { font-weight: bold; }
  .pagination ul li a,
  .pagination ul li span {
    display: block;
    width: auto;
    padding:.2em .5em;
    border:1px solid #ccc;
  }
  .pagination ul li a:hover,
  .pagination ul li a:focus,
  .pagination ul li a:active {
    background: #eee;
  }

/* A bit more space for images - top margin remains 0 to allow for aligning with top of text.
   Another interesting adaptation: with max-width: 100% images will scale for smaller displays
   and/or lower resolutions */
img {
 margin: 0px 5px 5px 10px;
 max-width: 100%;
 height: auto;
}

/* TEXT DISPLAY ALTERATIONS TO BOOTSTRAP.CC */

/* Margins for page headers a bit smaller */
.page-header {
  padding-bottom: 9px;
  margin: 15px 0 10px;
  border-bottom: 0px;
}

/* Headings can also be a bit smaller */

h1,
.h1 {
  font-size: 250%;
}

h2,
.h2 {
  font-size: 225%;
}

/* Article Heading */
h2[itemprop="name"] {
	font-size: 225%;
}

h3,
.h3 {
  font-size: 200%;
}

h4,
.h4 {
  font-size: 175%;
}

h5,
.h5 {
  font-size: 150%;
}

h6,
.h6 {
  font-size: 125%;
}

h1,h2,h3,h4,h5,h6 {
font-family: 'Fjalla One', Helvetica, Arial, sans-serif;
color: #cf6000;
font-weight: 590;
}

/*h2 > a {
font-family: 'Fjalla One', Helvetica, Arial, sans-serif;
color: #cf6000;
font-weight: 590;
}
*/
a {
color: #3c7c96;
}

a:hover {
color: #3c7c96;
}

/* The buttons for the publication options were 0px wide. I don't know where this has (or has not) been defined, but the following line repairs that.
Still to do: the list of tags (which we do not use at the moment) */
.chzn-container-single .chzn-single, .chzn-container-single .chzn-drop
{ width: 200px; }

/* Labels in the contact form (Restaurantgids) were aligned right in the bootstrap template. Should be left, of course. */
.form-horizontal .control-label
{ text-align: left; }

/* Unpublished items are defined very ugly in the Joomla Core template. We simply undo this */
.system-unpublished .system-unpublished
{margin: 0px;
padding: 0px;
border: 0px solid #aaaaaa;
position: relative;}

.system-unpublished .system-unpublished::before, .system-unpublished .system-unpublished::after
{
	display: none;
}

/* Hide the annoying clock and pen symbols */

.createdby::before
{display:none; }

.create:before
{display:none; }

/* Margin below the search box */

.finder {
	margin-bottom: 10px;
}

/* After the update to Joomla 3.5, the invisible label 'Zoeken' was not invisible. This repairs it. */

.finder.element-invisible 
{
  display:none;
}

/* Very custom stuff for Modules used on the Sigweb homepage */