/* Use this file to overwrite the basic 'cern' theme
	Stuff included here is for illustrative purposes -
	feel free to delete it.
*/

/*generic banner for all pages not specified*/
#header {
	/* For the background image to show you must have a file
	named ‘banner_expo_globe.jpg’ in themes/cern_overwrite/img */
	/*background-image: url('../img/banner_expo_globe.jpg'); */

	background-image: url('../img/MAX_2113_banner_1.jpg');

	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
	background-color: #333;
	/* Let's get rid of the stripe that the theme usually puts at the top: */
	border-top: none;

	border-bottom-color: #fff;
}

/*banners created for specific pages - per node id*/
/*.page-node-6 #header, .page-node-9 #header {
	/* For the background image to show you must have a file
	named ‘banner_expo_globe.jpg’ in themes/cern_overwrite/img */
/*	background-image: url('../img/bigbang_banner.jpg');


}*/

/*Banners for specific content types - allways call them with period between the words in the name of content type, not underscore, like machine name would suggest!*/
/*
.node-type-basic-page-education #header {

background-image: url('../img/banner_expo_globe.jpg');
}


.node-type-education #header {

background-image: url('../img/banner_expo_globe.jpg');
}


.node-type-page #header {

background-image: url('../img/bigbang_banner.jpg');
}

.node-type-article #header {

background-image: url('../img/banner_expo_globe.jpg');
}
*/


/*END OF BANNERS*/

/* Set a custom size on the logo */
#header h1#logo a img {
	width: 80px;
}

/* Set size and bottom margin of the site title */
#header h2 {
	font-size: 45px;
	font-size: 5rem;
	margin-bottom: 0.3em;
	text-shadow: 0 0 5px #222;
}

/* Set the color for links in the header, including site title */
#header a, #header #site-slogan {
	color: #fff;
}

/* This sets the banner height - increase margin for deeper banner - make sure bg img is deep enough */
#header #site-slogan {
	margin-bottom: 100px;
	text-shadow: 0 0 5px #222;
	font-size:30px;

}


/* Note that you're overriding the color module settings here - might be a way to choose separate nav colors at different size breakpoints? */
#main-navigation {
	overflow: visible;
}

#main-navigation a {
	background-color: #4d94cd;
	border-color: #333;

}


#main-navigation .sf-menu li.active-trail a.active {
	color: #333;
	background: #fff;
	border-color: #fff;
}

#main-navigation .sf-menu li.active-trail a.menuparent {
	color: #333;
	background: #fff;
	border-color: #fff;
}


/* Let's have a dark footer */
html, #footer {
	background: #333;
	color: #999;


	}


#footer a:link  {
     color: #4d94cd;

}

#footer .cern-logo img {
	display: none;
}

/* Let's swap out the CERN logo to look good on a dark background */
#footer .cern-logo a {
	display: block;
	width: 80px;
	height: 80px;
	background-image: url('../img/cern_logo/outline_80_white.png');
	background-position: top-left;
	background-repeat: no-repeat;

}



/* Responsive styles below - these apply only at certain screen sizes */


/*
// -----------------------------------------------------------------
// Large screens
// -----------------------------------------------------------------
*/
@media screen and (min-width: 1300px) {



}




/*
// -----------------------------------------------------------------
// Tablet - portrait
// -----------------------------------------------------------------
*/
@media only screen and (min-width: 768px) {


}



/*
// -----------------------------------------------------------------
// Desktop and Tablet Landscape
// -----------------------------------------------------------------
*/

@media only screen and (min-width: 1024px) {


}



/*
// -----------------------------------------------------------------
// Mobile
// -----------------------------------------------------------------
*/

@media only screen and (max-width: 768px) {


}