/*
Probably need to get the original css snippits from style.css and put them in here to make sure we have all the elements covered e.g. button:hover, body a.btn:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover instead of just button:hover.

CONTENTS

Content Styles - needs to be moved to a more logical place when finished
Basic HTML
Tables
Lists
Form Elements
Header
Small Screen Alterations @media
Contact Us Page
Menu
  Special Menu Styling (nolink)
Responsive Grid
News Boxes
News View Styling
News homepage box
Teaser
Nivo Slider
Nivo Slider - IOM
Top Area Columns (6 homepage boxes)
Footer
User Account Page
Gallery
IOM
Image Captions
Breadcrumb
Learn (Textbook)
Go Observing
Tooltip
Tags
Contact Form
h5p
Google Map - Counting Stars Activity
*/

.forum-node-create-links .forum-add-node {
    margin-bottom: 2px;
/*same as original */
    float: left;
    margin-right: 10px;
}
#advanced-forum-forum-topic-list-sort-form input{
	padding: 13px 24px 13px 24px !important;
}
.fa-small {
  font-size: 10px !important;
}
.fa-medium {
  font-size: 18px !important;
}
.fa-1-5x {
  font-size: 2.2em;
}
.asteroid-watch td, .asteroid-watch tr, .asteroid-watch tr{
	border: 0px solid red !important;
}
.lunarmonthheader{
	width:110px; 
	height:25px; 
	float:left;
	border:1px solid lightyellow;
}
.lunarmonth{
	width:110px; 
	height:80px; 
	float:left;
	border:1px solid green;
}
.resource-link{
	width:222px; 
	height:40px; 
	float:left;
}
.project-resource-link{
	width:200px; 
	height:40px; 
	float:left;
}
.ltimage-examples{
	width:100px; 
	height:160px; 
	text-align: center;
	padding:5px;
	float:left;
	background:#f0f0f0;
}
.weight-planet-container{
	margin:auto;
	max-width:90%; 
	height:350px;
}
.weight-planet{
	width:80px; 
	height:90px; 
	float:left;
}
.weight-planet-results{
	clear:both;
	height:341px;
}

.field-name-field-tags a {
 text-shadow: none;
 /* direct copy */
  display: inline-block;
  background: url(../images/tag.png) no-repeat;
  padding: 0px 8px 0 16px;
  height: 22px;
  border-radius: 2px;
  font-size: 12px;
}
/******************/
/* Content Styles */
/******************/
#container{
	overflow:unset;
}
.container-wrap {
	overflow:unset;
}
.content-sidebar-wrap{
	width:100%;
	height:100%;
	background: white;
	padding:30px;  /*this made a box appear on the front page even with No Front Pge module enabled.*/ 
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
	/*
	-moz-box-shadow: 0 0 5px #999;
	-webkit-box-shadow: 0 0 5px #999;
	box-shadow: 0 0 5px #999;
	*/
     
	 /*box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
	
   box-shadow: 0 2px 5px 0 rgba(16,16,16,0.2),0 2px 10px 0 rgba(16,16,16,0.2);
	box-shadow: 3px 3px 0px rgba(16,16,16,0.2);
	box-shadow: 0 2px 5px 0 rgba(16,16,16,0.2),0 2px 10px 0 rgba(16,16,16,0.2);*/
}

.front .content-sidebar-wrap{
	padding:0;
}
.page-title{
  font-size: 22px;
}

/**************/
/* Basic HTML */
/**************/
/* font size article concluding that px is currently the best method */
body{
background: url("../images/pagebg-e9ebee.jpg") repeat;
/*
background: url("../images/pagebg-#e9ebee.jpg") repeat;
background: url("../images/pagebg-f6f3ee.jpg") repeat;
background: url("../images/pagebg-ececea.jpg") repeat; 
background: #FFF7EF;
#fff7f0; #FFFBF8; #FFFFE5;
	color:rgb(60,60,60);*/
font-weight:300;
  font-size: 16px;
/* below is untouched from style.css */
  color: #333;
  font-family: 'Open Sans', sans-serif;
  line-height: 160%;
}

hr {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
a{
	/*color:rgb(60,60,60);*/
	color:#4E719B; 			/* same colour as one of the 6 homepage boxes - num 2 */
	font-weight:bold;
}
/*
a:hover{
	color:black;
}
*/
pre{
    text-shadow:none;
}

h1 {
  font-size: 20px;
   text-transform:unset;
}

h2 {
  font-size: 18px;
  text-transform:unset;
}

h3 {
  font-size: 16px;
  text-transform:unset;
}

h4 {
  font-size: 14px;
  text-transform:unset;
}

h5 {
  font-size: 12px;
  text-transform:unset;
}

h6 {
  font-size: 10px;
  text-transform:unset;
}
small{
	font-size: 11px;
}
ul {
  list-style-type: square;
  margin-left: 25px;
  margin-bottom: 12px;
}

ul ul {
  list-style-type: disc;
  margin-bottom: 0;
}

ul ul ul {
  list-style-type: circle;
}

/**********/
/* Tables */
/**********/
/* the 6 boxes on the homepahe may cause problems as their bg is dark whereas the rest of the site has light bg's. The theme tabloe bg is light, but so are our links, so i have taken off the table bg's. */

table, tr.even, tr.odd, td{
background:none;
padding:5px;
}
th{
	background:#4E719B; /*one of the six - num 2*/
}
th a{
	color:white;
}

table.dataTable thead th, table.dataTable thead td{
    border-bottom: 1px solid #3C5777 !important; /*one of the six - num 6*/
}
/* DataTables column colours e.g. News Archive)*/
tr.even td.sorting_1 {
    background-color: #F0F0F0;
}
tr.odd td.sorting_1 {
    background-color: #E0E0E0;
}
.cell-align-center{
	text-align: center;
}
td{
	color: #333;
}
/*************/
/* Footables */
/*************/
table.footable>thead>tr.footable-filtering>th{
	background-color:white;
	border:1px solid white; /* I can't believe this is the only way to remove the border */
}
.front-table{
	color:white;
}
/*********/
/* Lists */
/*********/
/* to remove the stupid right arrow at the beginning of lists e.g. Log in or register to post comments */
.region ul.menu li, .region ul.links li, .region .item-list ul li {
    background: none;
	padding: 0 0 0 4px;
	/* below is untouched from style.css */
    list-style: none outside none;
    margin: 0 0 2px;
    text-align: left;
}

/*****************/
/* Form Elements */
/****************/
fieldset{
	background-color:transparent;
	border: 1px solid black;
	padding:10px;
}
fieldset legend{
	text-shadow: none;
	border:none;
	background:none;
	top:0;
	font-weight:bold;
}

input.form-text,
textarea.form-textarea,
select.form-select {
	border: 1px solid #505050; /* medium grey colour - only time this colour is used */
	background-color:transparent;
	font-size: 16px;
	font-weight:100;
/* below is untouched from style.css */   
  padding: 7px;
  border-radius: 2px;
  max-width: 100%;
}
 .region-search input.form-text {
    padding: 2px;
/* below is untouched from style.css */
	width: 100%;
    background: #fff;
    border-radius: 0;
} 
13pxinput{
	font-family:unset;
	font-size:unset;
	font-weight:200;
}  
textarea {
	font-family:unset;
	font-size:unset;
	font-weight:200;
	padding:10px;
} 
select{
	font-family:unset;
	font-size:unset;
	font-weight:200;
}

button,
body a.btn,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  font-size: 16px;
/* below is untouched from style.css */ 
  margin: 0 5px 5px 0;
  line-height: 13px;
  padding: 8px 15px;
  border: 1px solid #DDD;
  display: inline-block;
  background-image: linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
  background-image: -o-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
  background-image: -moz-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
  background-image: -webkit-linear-gradient(bottom, #F7F7F7 0%, #FFF 100%);
  background-image: -ms-linear-gradient(bottom, #F7F7F7 0%, #FFFFFF 100%);
  background-color: #F9F9F9;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.2);
  -moz-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.2);
  box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.2);
}

button:hover,
body a.btn:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  background: #4E719B; 			/* same colour as one of the 6 homepage boxes - num 2 */
  color: #fff;
  border: 1px solid #3C5777; 	/* same colour as one of the 6 homepage boxes - num 6 */
  font-size: 16px;
  }

.form-required{
	/* tone down the red a little */
	color:#e26161; /* red colour - only time this colour is used */
}

/***********/
/* Header  */
/***********/
#header_wrapper {
	 background: url("../images/header-bgStaceyBlue.jpg") repeat-x center center;
}
#header{
	padding-bottom:0px;
}
#header .region {
	margin-top:0;
	margin-bottom: 0;
}
#site-title a{
/*	color:#222;*/
color:white;
}
#site-title{
width:200px;
text-transform:uppercase;
}

/* need to make this wider than the theme to accommodate the ljmu logo text*/
.region-search {
    width: 225px;
}
.region-search .form-submit{
  background-color: black;
}
.region-search .form-submit:hover{
  background-color: #808080;   /* medium grey colour - only time this colour is used */
}
/* fix - adding the LJMU logo to the search region made the search sumbit box increase in heoght when not logged in */
.region-search .form-submit{
	height:27px;
}
/* right align the following content on devices bigger than a mobile */
.region-search img {
	float:right;

}
.ljmu a{
		display: none;
	}
	
/*****************************/
/* Small Screen Alterations */
/*****************************/
@media screen and (max-width: 965px) {
	.mobile965{ 
		float:none;
		width:100% !important;
	}

	/* keeps the slide caption visible on smaller screen */
	.nivo-caption {	
		display: unset !important;
	}
	/* ljmu logo */
	.region-search img{
		/*width:85px;*/
		display:none;
	}
	.ljmu a{
		display: unset;
		color:white;
		font-size:11px;
	}
	/* removed the 15px padding so the IOM goes full box width - should match the settings in Top Area Columns */
	#top-area .column.two, 
	#top-area .column.four, 
	#top-area .column.five, 
	#top-area .column.six {
      padding: 0 !important;
    }
	
	/* can't remember what this is for */
	#edit-keys{
		width: 120px;
	}
	
	/* contact us page*/
	#contact-site-form textarea, .grippie{
		width:100%;
	}
	
	/* centre the content */
	.nso-news-block-title {
		margin: 0 auto;
	}
	.nso-news-block-img {
		margin: 0 auto;
	}
	.nso-news-block-more {
		margin: 0 auto;
	}
	.nolink {
		text-align:center;
	}
}

@media screen and (max-width: 640px) {
	/* need to make this wider than the theme to accommodate the ljmu logo text*/
	body{
		background:none;
	}
	.content-sidebar-wrap{
		box-shadow:none;
	}
	#header .region-search {
		width: 225px;
	}	
	#header {
		margin-top: 0;
		/* below is direct copy from media.css */
		padding: 35px 10px 10px 5px;
	}
	/* reduce the size of the nso logo OR just not display it, we do have the site title! */
	#logo {
		/*width:40px;*/
		display:none;
	}
	#site-title{
		width:290px;
	}
	#site-title a{
		font-size: 16px;
		font-weight: bold;
	}
	/* finally remove the slide caption on only the smallest screens */
	.nivo-caption {
		/*display: none !important;*/
	}
	
	/* remove the left hand column on the activity page */
	.mobile_left{
		float:none;
		width:100% !important;
	}
	.mobile_right{
		float:none;
		width:100% !important;
	}
	.mobile{ /* because i'm an idiot and the two above are identical */
		float:none;
		width:100% !important;
	}
}
.mobile img{
	padding:10px;
	background-color: #f0f0f0;
}
.field-name-field-photo-1-credit{
	padding:0 0 10px 10px;
}
.group-right{
background-color: #f0f0f0;
padding:5px;
}
/***********/
/* Menu  */
/***********/
.menu a, .menu-wrap a, .nivo-caption  a{
	font-weight:normal;
}
.region-user-menu ul.menu li a:hover{
	color:red; /*where is this used ??*/
}
.menu-wrap {
	background:black;
}
#main-menu a {
	color:#e6e6e6; /* light grey colour - used twice main menu a and main menu ul li nolink  */
	border-right:1px solid #3C5777; /* one of the siz - num 6 */
	padding: 12px 18px;
	/* below is a direct copy from style.css */ 	
	display: block;
	text-decoration: none;
	line-height: 100%;
	white-space: nowrap;
	text-transform: uppercase;
}
#main-menu li:hover >a  {
	background: #4E719B; /* same as one of the 6 homepage boxes - num 2 */
}
#main-menu li ul {
  top: 40px; /* if the font size and/or padding changes in the menu this number needs adjusting */
  background: #4E719B; /* same as one of the 6 homepage boxes - num 2 */
 /*direct copy from style.css */ 
  display: none; 
  position: absolute;
  z-index: 9999;
  padding: 0;
  margin: 0;
  overflow: visible !important;
}
#main-menu li li a {
	border-bottom: 1px solid #3C5777; /* same as one of the 6 homepage boxes - num 6 */
/*direct copy from style.css */ 
  min-width: 150px; /* ??? what does this do ???*/
  margin: 0;
  text-align: left;
  overflow: hidden;
  /*padding: 15px 45px 15px 15px;  t r b l */
  /*color:#121821;  same as one of the 6homepage boxes - num1 */ 
  /*color: #DEDEDE;  light grey colour - used twice main menu li li a and */
  font-size: 11px;
  border-right: 0;	
}
#main-menu ul.menu li li:hover >a, #main-menu li li:hover {
	background: #3C5777; /* looking the same as the border bottom colour - one of the siz - num 6 */
}
.region-user-menu a{
	color:white;
}
.region-user-menu ul.menu li a:hover{
	color:#CCC; /* My Account and Login/out links - light grey colour - only time this colour is used*/
}
.region-user-menu li a.active{
	color:white !important; /* My Account and Login/out links */
}



/************************/
/* Special Menu Styling */
/************************/
#main-menu ul li .nolink{
	/*Main menu top level styles*/
    padding: 12px 18px; /* needs to match the above #main-menu a padding */
    display: block;
    text-decoration: none;
    color: #e6e6e6; /* light grey colour - used twice main menu a and main menu ul li nolink */
	font-weight:normal;
    line-height: 100%;
    white-space: nowrap;
    text-transform: uppercase;
    border-right: 1px solid #3C5777; /* one of the siz - num 6 */
}
#main-menu ul li .nolink:hover{
	background: #4E719B; /* same as one of the 6 homepage boxes - num 2 */
}

#main-menu ul li ul li .nolink{
    /*color:#121821;  same as one of the 6homepage boxes - num1 */ 
	/*color: #DEDEDE;  light grey colour - used twice main menu li li a and main menu ul li ul li nolink */

	/*styles below copied directly from style.css .menu snd .menu a .expanded classes */
/*the only differentce is there is no on hover, but this will help differentiate between links with content and those with none*/
    min-width: 150px;
    margin: 0;
    border-bottom: 1px solid #3C5777; /* one of the siz - num 6 */
    text-align: left;
    overflow: hidden;
    padding: 15px 15px;
    font-size: 12px;
    border-right: 0;
	background: url(../images/arrow.png) center right no-repeat;
}

.breadcrumb .nolink{
	color:#4E719B;		/* one of the six - num 2 */
	font-weight: bold;
	border:unset;
	background:unset;
	text-transform:unset;
	font-size: 14px;
	padding:0;
}
/**************/
/* Menu Block */
/**************/
.region-sidebar-first ul{ 
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.region-sidebar-first  ul.menu li{ 
  background:none;
  font-weight: 900; 
}
.region-sidebar-first  ul.menu li a { /* level 1 */
  text-decoration: none;
  color:#4E719B;
  font-weight: 700; 
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
  display: block;
  width: 200px;
}
.region-sidebar-first  ul.menu li ul li a { /* level 2 */
  color:#4E719B;
  margin-left:10px;  
  font-weight: 600;   
}
.region-sidebar-first  ul.menu li ul li ul li a { /* level 3 */
  margin-left:20px;
}
.region-sidebar-first  ul.menu li ul li ul li ul li a { /* level 4 */
  margin-left:20px;
  color:#4E719B;
  font-weight: 300;   
}
.region-sidebar-first  ul.menu li ul li ul li ul li ul li a { /* level 5 */
  margin-left:30px;
  color:#4E719B;
  font-weight: 300;   
}
.region-sidebar-first  ul.menu li a:hover {
  background: url("../images/pagebg-e9ebee.jpg") repeat;
}
.region-sidebar-first .active{
  background: url("../images/pagebg-e9ebee.jpg") repeat;
}
/*******************/
/* Responsive Grid */
/*******************/
.views-column{
	float:left;
	padding:5px 20px 5px 20px;	/* t r b l */
}
/*******/
/* IOM */
/*******/
.nso-iom-block-more{ /* IOM 12/04/2017 */
	width:230px;
	margin-top:-32px;
	height:25px;
}
.nso-iom-block-more a{ /* IOM 12/04/2017 */
	font-size: 14px;
	color:white;
	background: url("../images/news-more-bg.png") repeat top left;
	text-align:left;
	padding:3px 5px 3px 5px;
	font-weight:normal;	
}
.nso-iom-block-img img:hover /* IOM 12/04/2017 */
{
  opacity: .6;
}
.view-iom-2016 .views-column{ /* IOM 12/04/2017 */
    float: left;
    padding: 1px 1px 1px 1px;
}
/**************/
/* News Boxes */
/**************/
/* using thses for the news pages now, not the homepage */
.nso-news-block-title {
	/* top-left, top-right, bottom-right, bottom-left corners
	border-radius: 0px 100px 0px 0px; 
	background-color:black;*/
	background: url("../images/news-title-bg.png") repeat top left;
	width:230px;
	height:70px;
	padding:5px 5px 5px 5px;	/* t r b l */
	box-shadow: 3px 3px 0px rgba(16,16,16,0.2);
}
.nso-news-block-title a{
	color:white;
	font-size: 15px;
	margin-top:180px;
	font-weight:normal;

}
.nso-news-block-img{
	width:230px;
	height:173px;
	box-shadow: 3px 3px 0px rgba(16,16,16,0.2);
}
.nso-news-block-more{
	width:230px;
	/*padding-top:15px;*/
	padding-bottom:20px;
	margin-top:-10px;
	height:50px;
}
.nso-news-block-more a{
	font-size: 14px;
	color:white;
	background: url("../images/news-more-bg.png") repeat top left;
	/*text-transform: uppercase;*/
	text-align:left;
	padding:3px 5px 3px 5px;	/* t r b l */
	font-weight:normal;	
}
.News-left{
	width:670px !important;
}
.News-right{
	width:440px !important;
	text-align: right;
}
/* for archive stories - if we use lists we wont need some/all of this*/
.nso-news-archive-block-img{
	display:none;
}
.nso-news-archive-block-more{
	width:230px;
	/*padding-top:15px;*/
	padding-bottom:20px;
	margin-top:0;
	height:50px;
}
.nso-news-archive-block-more a{
	/*color:white;
	background: url("../images/news-more-bg.png") repeat top left;*/
	/*text-transform: uppercase;*/
	text-align:left;
	padding:3px 8px 3px 3px;	/* t r b l */
	font-weight:normal;	
}
/* !!! would need to rename these to the final view names !!!
.view-news-rotating-block  
.view-news-block-2  
.view-news-block-3  
.view-events-rotating-block
.view-news-rotating-block{
width:230px;
box-shadow: 1px 1px 1px 1px rgba(16,16,16,0.15);
}
 */

/************************/
/* News View Styling    */
/************************/
.news-by-year table{
	border:0px;
	background:none;
}
.news-by-year td{
	width: 25%;
	background:none; 
	border:0px;
}
/*********************/
/* News homepage box */
/*********************/
.nso-news-block-box-title{
	top:70%;
}

/* TEASER -  using the styles from DisplaySuite module isnt working, they are being overwritten by the ones named below */
.ds-2col-fluid > .group-left {width:30%; padding-right:10px;}
.ds-2col-fluid > .group-right{width:70%;}




/***************/
/* Nivo Slider */
/***************/

#block-nivo-slider-nivo-slider .nivo-caption, #views-nivo-slider-nivo-slider-block .nivo-caption {
	top:10px; 
	bottom:auto;
	left:auto; 				/* left side of the background is fixed */
	right:25px; 				/* right side of the background is automatically adjusted to the text */
	max-width:70%; 			/* choosing a high value allows the text to stay on one line */
	width:auto;
	text-align:center;
	overflow:hidden;
	background:none; 			/* for a fade in & out effect */

	
}
#block-nivo-slider-nivo-slider  .nivo-caption p {
/* for some reason the .theme-default .nivo-caption * in style.css is overiding the color and font styles here, need to use a link if we cant to color the text */
	padding: 10px 15px; 			/* text distance to the edge */
	background:black; 			/* background color */
	font-size: 17px;
	line-height: 20px;
	text-transform: uppercase; 		/* converts text to UPPERCASE */
/*	font-weight: bold;*/
/*font-family: Arial, Arial, Sans-Serif; */
}
.nivo-caption a:link{
	border-bottom:none;
}
.views-nivo-slider { /* in chrome the images are displaying as fixed width and height this fix it so they are now responsive*/
  width: auto !important;
  height: auto !important;
}
#views-nivo-slider-nivo-slider-block {
margin-bottom:0;
-webkit-box-shadow:none;
box-shadow:none;
}
#views-nivo-slider-nivo-slider-block .nivo-caption{ /*for some reason the original slider module uses a P for the title, the views version does not */
	padding: 10px 15px; 			/* text distance to the edge */
	background:black; 			/* background color */
	font-size: 17px;
	line-height: 20px;
	text-transform: uppercase; 		/* converts text to UPPERCASE */
}


/* add some space between content and not logged in message for commenting */
.comment_forbidden{
	margin-bottom:20px;
}

.service-links  .item-list ul li{
	background:none;
}

/***********/
/* Gallery */
/***********/
#block-views-gallery-block img{ /* so we don't have the border or padding in the gallery block - DO WE STILL NEED THIS? */
	border:none;
	padding:0;
}
/* taken from the theme package stylesheet installed locally on alisons pc */
/* we need a style for every named gallery view in the site */
.view-gallery-events .view-content,
.view-gallery-galaxies .view-content,
.view-gallery-lt .view-content,
.view-gallery-solar-system .view-content,
.view-gallery-stars .view-content,
.view-Gallery .view-content
{
  overflow: hidden;
}

.view-gallery-events .views-row,
.view-gallery-galaxies .views-row,
.view-gallery-lt .views-row,
.view-gallery-solar-system .views-row,
.view-gallery-stars .views-row,
.view-Gallery .views-row
{
  float: left;
  width: 33%;
  padding: 1px;
}
/* didn't add the hypen in the page solar system for soome strange reason */
.page-gallery-events .region-content .view-gallery-events .views-row,
.page-gallery-galaxies .region-content .view-gallery-galaxies .views-row,
.page-gallery-lt .region-content .view-gallery-lt .views-row,
.page-gallery-solarsystem .region-content .view-gallery-solar-system .views-row,
.page-gallery-stars .region-content .view-gallery-stars .views-row,
.page-gallery-all .region-content .view-Gallery .views-row
{
  width: 25%;
}

.view-gallery-events .views-row img,
.view-gallery-galaxies .views-row img,
.view-gallery-lt .views-row img,
.view-gallery-solar-system .views-row img,
.view-gallery-stars .views-row img,
.view-Gallery .views-row img
{
  display: block;
}

.view-gallery-events .views-row img:hover,
.view-gallery-galaxies .views-row img:hover,
.view-gallery-lt .views-row img:hover,
.view-gallery-solar-system .views-row img:hover,
.view-gallery-stars .views-row img:hover,
.view-Gallery .views-row img:hover
{
  opacity: .6;
}
@media screen and (max-width: 640px) {
  .page-gallery-events .region-content .view-gallery-events .views-row,
  .page-gallery-galaxies .region-content .view-gallery-galaxies .views-row,
  .page-gallery-lt .region-content .view-gallery-lt .views-row,
  .page-gallery-solarsystem .region-content .view-gallery-solar-system .views-row,
  .page-gallery-stars .region-content .view-gallery-stars .views-row,
  .page-gallery-all .region-content .view-Gallery .views-row
  {
    width: 50%;
  }
}  
  
/*********************/
/* Nivo Slider - IOM */
/*********************/
#views-nivo-slider-iom-current-slider-block-1 .nivo-caption{
    text-align: center;
	top: 5%;
	text-transform: uppercase;
	font-size: 17px;
	font-weight:bold;
	height:100px;
}

/*********************/
/* Top Area Columns  */
/*********************/
.home-moon-container{
	width:350px;
	height:100px;
	margin: auto;
}
.home-moon-current{
	float:left;
	width:100px;
	height:100px;
	margin: auto;
	padding-top:20px;
	background: url("../images/home-moon-current.png") no-repeat;
}
.home-moon-text{
	float:left;
	width:250px;
	height:70px;
	padding-top:20px;
}
.home-tel-container{
	width:350px;
	margin: auto;
	padding-top:3px;
}
.home-tel-current{
	float:left;
	width:170px;
	height:123px;
	margin: auto;
	padding-top:20px;
	background: url("/tmp/webcam/ltenc_t.jpg") no-repeat;
	background-position:center;
}
.home-tel-text{
	float:left;
	width:180px;
	height:123px;
}

@media screen and (max-width: 1169px) {
	.home-moon-container, .home-tel-container{
		width:250px;
	}
	.home-moon-current{
		float:none;
		width:99px;
		padding-top:0;
	}
	.home-tel-current{
		float:none;
		width:170px;
		height:100px;
		padding-top:0;
	}
	.home-moon-text, .home-tel-text{
		float:none;
		width:250px;
		padding-top:0;		
	}	
}
#top-area a {
	border:none;
	padding:0;
}
#top-area .column h1, #top-area .column h2, #top-area .column h3{
	color:white;
	font-weight:bold;
}
#top-area .column{
	width:33.33%;
	height:200px;
    background: #121821;
	text-align:left;	
}
#top-area .column.two{
    background: #4E719B;
	padding:0; /* only for full image boxes, e.g. IOM */
}
#top-area .column.three {
    background: #1A2633;
}
#top-area .column.four {
    background:#4E719B; /*#45668A;*/
    padding: 0;	
}
#top-area .column.five {
	background: #223544;    
	padding:1%; /* only for full image boxes, e.g. IOM */
}
#top-area .column.six {
    background: #3C5777;
	padding: 1%;
}



/*
originals saturated to 50%				#121821	#4E719B	#1A2633	#45668A	#223544	#3C5777
lighter sceme (alternative colours) 	#4D617F	#9CA4B0	#243750	#727F91	#3C4C64	#5E6875
up until 21/11/2016 					#1B1E23 #697F9C #262C34 #5D718A #313A45 #526379
numbers 2 and 6 used elsewhere as 

#2D3C4D #364E66 #3F6080 #487399 #5185B3 #5A98CD

#1B1E23 #262C34 #313A45 #3C4857 #475568 #526379 #5D718A #697F9C


*/

/***********/
/* Footer  */
/***********/
footer{
	margin-bottom:30px;
}
#footer-area{
	margin:50px auto 50px auto;
}
#footer{
    /*margin-top: 20px; This made a box appear even with the No Front Page module enabled */
	color:white;
	background:black;
	/*is #222 seems nicer than black?*/
}
#footer .form-text{
	color:white;
}
#footer .content a{
	color:white;
	font-weight:normal;
}
#footer  h1, #footer h2, #footer h3{
	color:white;
	font-weight:bold;
}
.footer_credit{
	border:none;
}
.credits{
	display:none;
}
#copyright{
	padding-bottom:30px;
	font-size:14px;
}
.footeremail label{
	display: none;
}


/*if we don't want any front page content*/
#footer_wrapper{
margin:0;
}
#container{
padding:0px;
}
.content-sidebar-wrap #content {
    margin-bottom: 0;
}

/*********************/
/* User Account Page */
/*********************/
/* Hide the Contact Settings > Personal Contact Form option box */
#edit-contact{
	display:none;
}


/***********/
/* Gallery */
/***********/
.more-link{
	text-transform:uppercase;
	margin-right:3px;
}

#cboxTitle{
	font-weight:bold;
	top:-30px;
}



/*******/
/* IOM */
/*******/
.iomtable td{
	vertical-align: top;
}
.iomtable img{
	width:300px;
	height:300px;
}

.front-box-img {
/* solution found at http://stackoverflow.com/questions/19673895/center-a-large-image-of-unknown-size-inside-a-smaller-div-with-overflow-hidden */
	display: flex;
    justify-content: center;
	align-items: center;
    height: 300px;
    overflow: hidden;
}
.front-box-img img{
	flex: none; /* keep aspect ratio */
}

.front-box-title{
	margin-top:-280px;
	text-transform: uppercase;
	text-align: center;
}
.front-box-title  a, .front-box-date{
	text-transform: uppercase;
	font-size: 17px;
	font-weight:400;
	text-shadow:
       1px 1px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;	
}
.front-box-date{
	text-align: center;
}

/******************/
/* Image */
/******************/
 img { /* needed to reset the IOM image issue where the image was tiny MAKES THE GALLERY FAIL */
 max-width: 100%;
  height: auto;
}

/* legacy image styling */
.imcnt {
	float:center;
	text-align: center;
}
.imlft{
	float:left;
	margin-right:20px;
	text-align: center;
}
.imrgt{
	float:right;
	margin-left:20px;
	text-align: center;
}
.credit{
	/* how do we want the old credit styled?
	color:red;*/
	
}



.field-items img{ /*all images within the content not the header - we don;t want to style all images, just selectively*/
/*	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	margin:10px;
	border:1px solid #4E719B; 			 same colour as one of the 6 homepage boxes - num 2 
	*/
}
.imgborder{
	padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; margin:10px; border:1px solid #4E719B; /* same colour as one of the 6 homepage boxes - num 2 */
}
.noborder{
	padding:0 !important;  /* t r b l */
	margin:0 !important;
	border:0 !important;
}
figure.image{
	/*border:1px solid #4E719B; 	 same colour as one of the 6 homepage boxes - num 2 */
	padding:10px;
	text-align:center;

}
figure.image img{ /* so we don't have two sets of borders 
	border:none;
	padding:0;*/
}
figcaption{
	padding:5px;
	margin-top:-5px;
	font-size: 14px;
	line-height:18px;
	text-align: center;
}
figure{
	background-color:#f0f0f0;
	padding:5px;
	margin:5px;
}
img.file-icon{
	border:none;
	padding:0;
	margin:0;
}
/**************/
/* Breadcrumb */
/**************/
.breadcrumb {
	font-size: 14px;
/* below is untouched from style.css */
  margin-bottom: 10px;
  border-bottom: #eee 1px solid;
}
/*********/
/* Learn */
/* need to change the small screen versions too */
/*********/
.learn-credit{
	font-size: 12px;
	color: white;
	text-shadow:
       1px 1px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
.learn{
   margin: 10px;
   padding: 10px;
   position:relative;
   background-position:right center;   
   background-repeat: no-repeat;   
}

.register-user{
	width: 290px;
	height: 180px;
}

/* the h2 style is within goobs section*/
.learn-sq-big{
   width: 400px;
   height: 340px; 
}
.learn-sq-medium{
   width: 380px;
   height: 260px; 
}
.learn-sq-small {
   width: 180px;
   height: 160px;
}
.learn-rec-half {
	width: 385px;
	height: 120px;
}
.learn-rec-full {
	width: 790px;
	height: 120px;
}
.learn-rec-fullest {
	width: 1074px;
	height: 120px;
}
.gallery-rec-half{
	width: 535px;
	height: 120px;
}
@media screen and (max-width: 1186px) {
	.learn-sq-big, .learn-sq-medium, .learn-sq-small, .learn-rec-half, .learn-rec-full, .learn-rec-fullest , .gallery-rec-half{
		margin: 3px;
		width: 100%;
		height: 50px;
		background-color:black; 
		background-image:none;
	}
	.taller{
		height:100px;
	}
	.goobs h2{
		font-size:18px; 
	}
	.goobs-legend{
		display:none;
	}
}
/****************/
/* Go Observing */
/****************/
.goobs{
   margin: 10px;
   padding: 10px;
   position:relative;
   background-position:right center;   
   background-repeat: no-repeat;   
}
.goobs-icon{
	position:absolute;
	bottom:5px;
	right:10px;
}
/* observing conditions page */
.oc{
	width:100%; 
	margin:0 auto; 
	text-align:center; 
}
.oc-top-left{
	display: inline-block; 
	vertical-align: top; 
	max-width:500px; 
	padding-right:10px;
}
.oc-top-right{
	display: inline-block; 
	vertical-align: top; 
	max-width:500px; 
}
.oc-mid-left{
	display: inline-block; 
	vertical-align: top; 
	max-width:500px;  
	padding-right:10px;
}
.oc-mid-right{
	display: inline-block; 
	vertical-align: top; 
	max-width:500px;  
}
.oc-bottom-left{
	display: inline-block; 
	vertical-align: top; 
	max-width:500px;  
	padding-right:10px;
}
.oc-bottom-right{
	display: inline-block; 
	vertical-align: top; 
	max-width:500px;  
}
.observingconditions{
	max-width:100%;	
	/*padding:10px 10px 0 10px;  t r b l */
}
.oc-desc{
	font-size:12px; 
	line-height:1.4em;
	font-weight:400; /*400 is the same as normal, and 700 is the same as bold*/
	width:100%;
	padding:0;
}

.a-left {float: left;}
.a-right {float: right;}
.space-top {margin-top:10px;}
.space-left {margin-left:10px;}
.space-right {margin-right:10px;}
.text-smaller{font-size:smaller;}

.test-blue{
width:635px; height:421px;float:right;/*background-color: blue;*/
}
.test-yellow{
width:472px; height:422px; float:left;/*background-color: yellow;*/
}

.sq-big{
   width: 601px;
   height: 401px; 
}
.sq-big-right{
   float: right;
   width: 601px;
   height: 401px;
}
.sq-medium{
   width: 401px;
   height: 401px;
}
.sq-small {
   width: 216px;
   height: 191px;
}
.rec-x2{
   width: 451px;
   height: 191px;
}
.rec-x3 {
   width: 650px;
   height: 120px;
   background-color: black;
}
.rec-fullwidth {
   width: 1072px;
   height: 120px;
   background-color: black;
}
.rec-advanced {
   width: 526px;
   height: 120px;
   background-color: black;
}
.goobs h2, .goobs2 h2, .learn h2{
   font-size:24px; 
   font-weight:600; /*400 is the same as normal, and 700 is the same as bold*/
   line-height:28px;
   color:white;
   text-transform: none;
   	text-shadow:
       1px 1px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
.goobs-left-narrow{
	float:left; 
	margin:-10px;
	width:170px; 
	height:170px;	
}
.goobs-left-wide{
	float:left; 
	padding:10px; 
	width:750px; 
	height:400px; 
}
.goobs-desc{
display: inline-block; padding:10px; max-width:680px;
}
.goobs-other{
	float:right;
	text-align:center;
	text-transform: uppercase;
	font-weight:400;
	line-height:1.9em;
	padding:10px;
	/*padding:5px 5px 5px 10px;  t r b l */
	width:80px;
	height:55px;
	margin-right:29px;
	margin-top:10px;
	/*background: url("../images/pagebg-e9ebee.jpg") repeat;*/
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
}
.goobs-other-big{
	float:right;
	text-align:left;
	text-transform: uppercase;
	font-weight:400;
	line-height:1.9em;
	padding:10px;
	/*padding:5px 5px 5px 10px;  t r b l */
	width:200px;
	height:90px;
	margin-right:29px;
	margin-top:50px;
	/*background: url("../images/pagebg-e9ebee.jpg") repeat;*/
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
}
.goobs-legend{
	float:right;
	line-height:1.9em;
	padding:5px 5px 5px 10px; /* t r b l */
	width:450px;
	height:40px;
	margin-right:27px;
	margin-top:40px;
	background: url("../images/pagebg-e9ebee.jpg") repeat;
}
.goobs-legend-wide{
	float:right;
	line-height:1.9em;
	padding:5px 5px 5px 10px; /* t r b l */
	width:320px;
	height:170px;
	margin-right:27px;
	background: url("../images/pagebg-e9ebee.jpg") repeat;
}
.goobs-legend-extrawide{
	float:right;
	line-height:1.9em;
	padding:20px 5px 5px 10px; /* t r b l */
	width:900px;
	height:170px;
	margin-right:27px;
	background: url("../images/pagebg-e9ebee.jpg") repeat;
}


@media screen and (max-width: 1169px) {
.sq-big, .sq-medium, .sq-small, .rec-short, .rec-long, .rec-x2, .rec-x3, .gcse, .advanced, .data, .weather, .rec-advanced, .rec-fullwidth{
   margin: 3px;
   width: 100%;
   height: 50px;
   background-color:black; 
   background-image:none;
}
.taller{
	height:100px;
}
.goobs h2, .learn h2{
   font-size:16px; 
 }
.goobs-legend{
	display:none;
}
}
.pullout{
	float:left;
	/* copied from .nso-news-block-title and .nso-news-block-title a to keep the same feel */
   	background: url("../images/news-title-bg.png") repeat top left;
	width:250px;
	height:100%;
	padding:20px 20px 20px 20px;	/* t r b l */
	box-shadow: 3px 3px 0px rgba(16,16,16,0.2);
	color:white;
	font-size: 16px;
	font-weight:normal;
}
.observelist{
	float: right;
	width:70%;
	overflow-x:auto;
}
.observelist img{
	border:0;
	padding:0;
	margin:0;
}
.myobservations{
	width:100%;
	overflow-x:auto;
}
.clearboth{
	clear: both;
}
.hiddenmessage{
	display:none;
}
@media screen and (max-width: 1169px) {
	.observelist{
		float: right;
		width:100%;
		overflow-x:auto;
	}
	.hiddenmessage{
		display:unset !important;
	}
}
/***********/
/* Tooltop */
/***********/
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #3C5777; /* one of the siz - num 6 */
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
	margin-left:2px;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #3C5777 transparent transparent; /* one of the siz - num 6 */
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
/************/
/* Activity */
/************/
@media screen and (max-width: 960px) {
	.Activity-left{
		width:100% !important;
	}
	.Activity-right{
		width:100% !important;
	}
}

/********/
/* Tags */
/********/
.field-name-field-tags {
    margin: 20px 0 10px 0;
}

/*******/
/* h5p */
/*******/
.h5p-question-content{
	margin-left:unset !important;
}
/***************/
/* Contact Form*/
/***************/
#edit-message{
	max-width:530px;
}
.contact-form .grippie{
	max-width:530px;
}

.green-text{
	color:green;
	font-weight:bold;
}
.centerit {
    display: block;
    margin: 0 auto;
}

/****************************************/
/* Google Map - Counting Stars Activity */
/****************************************/
.map-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } 
.map-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; }