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


#header {
	/* For the background image to show you must have a file
	named ‘bg_moss.jpg’ in themes/cern_overwrite/img */
	background-image: url('../img/bg_digital.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: #333;
}

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

/* Set size and bottom margin of the site title */
#header h2 {
	font-size: 38px;
	margin-bottom: 0.3em;
	text-shadow: 0 0 10px #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: 22px;
}


/* 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 a {
	background-color: #333;
	border-color: #333;
	color: #ddd;
}

#main-navigation a.active-trail {
	border-color: #060502;
}

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

#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;
}

body {
	font-family: "PT Sans",Verdana,Tahoma,"DejaVu Sans",sans-serif;
}


/* make nice buttons out for links so labelled */
.button {
	background-color: #0086cf;
	border: medium none;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset;
	color: #fff;
	cursor: pointer;
	display: block;
	float: left;
	height: 30px;
	width: 100px;
	vertical-align: middle;
  line-height: normal;
	position: relative;
	text-align: center;
	font: 2.0rem/30px "PT Sans",Verdana,Tahoma,"DejaVu Sans",sans-serif;
}

/* button link styling */
a.button {
	text-decoration: none;
	color: white;
}

/*Step 5: Hover Styles*/
a.button:hover {
 background: #4d94ce;
}

.organization {
	font: 1.0em "PT Sans",Verdana,Tahoma,"DejaVu Sans",sans-serif;
}

h1.organization {
	vertical-align: middle;
	font: bold 2.0em/40px "PT Sans",Verdana,Tahoma,"DejaVu Sans",sans-serif;
}

/* 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) {


}