/* 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-md-8 {
    width: 75%;
  }

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



/* Not in the original template: For screens of 1600 pixels and wider, the container is 1480 pixels wide */

@media (min-width: 1600px) {
  .container {
    width: 1480px;
  }
}

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

body {
	background-color: #c1c1c1;
	color: #222222;
	font-family: arial, sans-serif;
}

/* 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 {
   height: 180px;
   padding-top: 10px;
   text-align: center;
   background-color: #ffffff;
   background-image: url("../images/umap2016-banner-2.jpg");
   background-position: left top;
   background-repeat: none;
}
	
/* 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, .col-md-4 .moduletable, .col-lg-4, .col-md-12 {
background-color: #fefefe;
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  margin-bottom: 15px;
  z-index: 1;
}
.col-md-8 p {
      text-align: justify;
}

.col-md-4 .moduletable, .col-lg-4, .col-md-12 {
  font-size: 85%;
}

/* The main content area has a padding of 40px */

.col-md-8 {
  padding: 40px;
}

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

/* 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 5px;
 max-width: 100%;
}

/* 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: 24px;
}

h2,
.h2 {
  font-size: 22px;
}

h3,
.h3 {
  font-size: 20px;
}

h4,
.h4 {
  font-size: 18px;
}

h5,
.h5 {
  font-size: 15px;
}

h6,
.h6 {
  font-size: 13px;
}

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

a {
color: #026893;
}

a:hover {
color: #026893;
}


.contact-form {
text-align: left
}

footer {
text-align: center;
}
