/*
	CLIG SITE STYLES
	
*/



/*
	BASICS
*/

body 	{
	background-color:#eeeeee;
	font-family: Cabin, Verdana, sans-serif;
	color:#222A2C;
	line-height:1.4;
	font-size: 16px;
	}



img	{border:0px; }
p,pre,form	{margin:0px;padding:0px;}
optgroup	{padding-top:3px;padding-bottom:3px;font-style:normal;}
a	{text-decoration:none;color:#0099ff;}
a:hover	{text-decoration:underline;}
hr {color:#eee; width:80%; margin:auto; margin-bottom:1em}

.tl_confirm {font-weight: bold; color: green;}
.centered, .centred, .center, .centre {text-align:center}
ul {list-style-type: disc; padding-left: 20px;}
li { margin-bottom: 0.4em;}
p.error {color:red; font-weight:bold}

input.error {border:1px solid red}
.btn {font-size: unset;}

.ce_text img{
	border:1px solid #cecece;
	padding:2px;
	background-color:#fff}

.noimageborder img , img.noimageborder{
	border:0;
	padding:0px;
	background-color:transparent
}

.image_container.float_right {margin-left: 20px;}



/*
	BUGFIX
*/
.inside {position:static !important}
.block {overflow: visible;}
#main {
		position:static !important;
		max-width: 45em; /* make pages more readable by limiting column width*/
}

/* FORM FIXES */
.newsletter legend {display: none;}


/* CAPTIONS */

	
h1,h2,h3,h4,h5,h6 {
	/* color:#374548; */
	font-weight: bold;
	line-height: 1.2;
}

h1 {
	font-size: 200%;
	margin-top:0;
	margin-bottom: 0.5em;
}
	

	



/* 
	PAGE LAYOUT
*/

div.caption {
padding-left:3px; 
font-weight:bold; 
}


#wrapper {
	max-width: 1400px;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	/* background: url('bg.png') repeat-y center top; */
	background-color: #f9f9f9;
	background: linear-gradient(90deg, rgb(208, 224, 227) 0px, rgb(233, 247, 250) 250px, rgb(249, 249, 249) 250px, rgb(249, 249, 249) 100%);
	box-sizing: border-box;
	box-shadow: 0px -5px 15px 5px #bbb;
	min-height: 1000px;
}


.membersarea #wrapper {
	background: linear-gradient(90deg, rgb(208, 227, 221) 0px, rgb(250, 247, 233) 250px, rgb(249, 249, 249) 250px, rgb(249, 249, 249) 100%);
}

#wrapper #container, #wrapper_inner { /* contains the CLIG lettering background*/
	background: url('/files/basic/clig%20bg%20lettering.svg') 0px 20px no-repeat;
	background-size: contain;
}

#footer {
	text-align: center;
	/* width: 380px; */
	margin: auto;
	margin-top: 30px;
	/* margin-left: 342px; */
	/* border-top: 3px dotted #D8D4D3; */
	padding-top: 10px;
	padding-left: 20px;
}

#credits {
   margin-top:50px;
	padding-right:18px; 
	text-align:right;
	font-size: 75%;

}

#main .inside {
	padding: 15px 15px 15px 25px;
}


#right {
	width: unset;
}

#right .inside {
	padding-right: 15px;
	width:100%;
} 

#left {
	padding: 20px 10px 0 10px;
	box-sizing: border-box;
}

#Leader {
	padding:0px 20px 20px 20px;
	}


#logoheader {
	margin-top:7px; 
	margin-left:29px;
	height:230px}
	
/*div.mod_navigation {
	
	position:static;
	margin-left:35px;
	margin-bottom:50px;
	width:170px;
	
}*/
	
	

#main .mod_navigation {display: none;} /* Hide mobile-only stuff on destop*/
#main #logoheader {display: none;} /* Hide mobile-only stuff on destop*/
	
	
div.layout_latest {
	margin-bottom:8px
}

div#archives-sidebar {
	margin-top:50px;
	border-left: 3px dotted #D8D4D3
}


div#left .mod_article {text-align:center}
div#left .mod_article img {border:1px solid #aaa; padding:4px; background:#fff}
/*
	RSS LINKS
*/
.rsslink {margin-left:3px}
.rsslink img {float:left; margin-right:7px}

/*
	NAVIGATION MENU
*/


.mod_navigation ul {
	border:0;
	list-style-type: none;
}

.mod_navigation ul.level_1{
	/* border-bottom:4px solid #F4F9FA;
	border-top:4px solid #F4F9FA;
	white bordering round nav
	
	*/
   
   margin-right: 8px;
	}
.mod_navigation ul, .mod_navigation li, .mod_navigation li.submenu, .mod_navigation .level_2 ul, .mod_navigation .level_2 li, .mod_navigation .level_2 {padding:0; margin:0}	


.mod_navigation li {
	text-align:right;
	border:0;
	}
	
.mod_navigation .submenu {
	margin:0px;}
	
.mod_navigation .level_2{border-bottom:0px; margin-right:0.5em}

.mod_navigation li.active a.active, .mod_navigation li.trail a.trail{
	padding-top:5px;
	padding-bottom:5px;
	color:#025994;
	font-weight:bold}

.mod_navigation a, .mod_navigation li.submenu a{
	display:block;
	width:95%;
	padding-top: 5px;
	padding-bottom:5px;
	padding-right:5px;
}
	
	
	.mod_navigation .level_2 a {
		font-weight: normal;}
.mod_navigation a:link, .mod_navigation a:visited {text-decoration:none;
	background-color:transparent;}

.mod_navigation a:hover, .mod_navigation a:active{
	text-decoration:none;
	background-color:#fff;
}
	
.mod_navigation a,.mod_navigation li,.mod_navigation p{color:#374548; font-weight: bold;}

.mod_navigation ul.level_1 > li > a:after {
	content: ' ■';
}

.mod_navigation ul.level_1 > li.membersarea > a {
	color: #0099ff;
	margin-top: 1.5em;
}

body.membersarea .mod_navigation ul.level_1 > li.membersarea > a {
	margin-top: unset;
} /* ... but not when you're on a members area page*/

/* SEARCH */

.mod_search input.submit {margin-top: 1em;}
.relevance {font-size: 12px;color: #888; font-weight: normal;}
p.url {text-decoration: underline }

/*
	
	PAGINATION NAVIGATION

*/

.pagination li{display:inline;margin:0px;padding:0px;list-style-type:none;}

.pagination{margin-top:22px;padding-top:4px;border-top:1px dotted #cecece;}

.pagination p{width:160px;float:left;padding-right:3px;padding-left:3px;text-align:left;}

.pagination ul{width:240px;float:right;margin:0px;padding:0px 3px;text-align:right;}


/*
	FOOTER LINKS

*/

#footer a {
	margin-left:10px;
	margin-right:10px;
	font-size: 70%;
}


/*
	IMAGE CAPTION STYLES
*/

img.imageheader {
	padding-bottom:10px;
	position:relative;
	background:transparent;
	border:0;
	left:-3px;
	
}

/*
	TEXT STYLES
*/

.ce_text {
	line-height:1.4;
}

p {
	margin-bottom:1em;
}

.captcha_text  {
	display: block;
	font-size: 100% !important;
	color: #d10000;
}

.agreement_text {
	font-size: smaller;
}


/* VIDEO STYLES */

/* Make videos responsive size */
.video_container video {
	width: 100%;
	height: auto;
}

/*
	MODULE STYLES
*/

/*
	LEADER WELCOME BOX
	(depreciated)
*/

#Leader p {
	font-size:110%;
	line-height:1.8
}

div#Leader img.imageheader {
	padding-bottom:15px;}

div#Leader .mod_article .ce_text img {
	
}

#frontpage-welcome h1 {
	margin-top: 0;
}

.frontpage #right {margin-top: 60px;}

/*
	FRONT PAGE NEWS BOX
*/


.mod_newslist .layout_latest {
	margin-bottom:15px;
	border: 1px solid #cecece;
	border-radius: 0 20px 0 20px;
	padding:0;
	/* width:337px */
	
}

.mod_newslist .layout_latest .news_header {
	margin:2px;
	/* background: linear-gradient(180deg, rgba(223,243,248,1) 0%, rgba(243,251,252,1) 100%);*/
	background: url('/files/basic/img/newsgradient1.svg') top left ;
	padding-left:58px;
	padding-top: 2px;
	padding-right:7px;
	margin-bottom:1px;
	border-radius: 0 18px 0 0;
	min-height: 45px;
}

.news_header h3 {
	font-size: 120%; 
	font-weight: normal; 
	margin-bottom: 3px;
}

.mod_newslist .layout_latest .news_body {	
	background-color: #fff;
	border-radius: 0 20px 0 20px;
}
.mod_newslist .layout_latest .news_body_inside{
	margin:0px 2px 0px 2px;
	padding:3px 10px;
	border-top:1px solid #cecece;
	min-height: 22px;
}

/*
	MAIN PAGE NEWS - WIDER BOXES

#clig-news .mod_newslist .layout_latest {
	background: url(../img/newsframe-wide.png) repeat-y 0px 0px;
	width:390px
	
}

#clig-news .mod_newslist .layout_latest .news_header {
	background: transparent url(../img/newsheader-wide.png) repeat-y top left;
}


#clig-news .mod_newslist .layout_latest .news_body {
	background: transparent url(../img/newsframe-wide.png) repeat-y bottom left;
	
}

*/


/* REGISTRATION PAGE 
 
 Form spacing adjustments
 
 */

#tl_registration .formbody label {
	width: 10em;
}

.mod_registration #ctrl_newsletter label {
	width: auto;
}


.tableform td {
	padding: 5px 0;
	vertical-align: top;	
}

.tableform td.col_0 {
	width: 10em;
}

div.mod_login {
	margin-bottom: 1em;
}

.tableform table {
	width: 100%;
}

form {max-width: 30em;}

span.mandatory {
	color: #6c757d;
}


/*
	OTHER NEWS STYLES
*/

.info {
	color:#666;
	padding:0;
	margin:0;
	padding-bottom:2px;
	font-family: Georgia, serif;
	font-size: 75%;
	margin-left: 1px;
	padding-bottom: 7px;
}



.mod_newslist h4, .mod_newsreader h4{
	font-size: 100%;
	/*font-weight:normal; */
	padding:0;
	margin:0;
	margin-bottom: 3px;
}

.mod_newsreader h4 {
   margin-top: 0.5em;
}

/* 
	NEWS LISTING PAGE
*/

.mod_newslist .layout_short {
	margin-bottom:15px
}

.mod_newslist p.teaser {
	}
	
.mod_newslist h3 {
	margin:0; 
	margin-bottom: 3px;
	margin-top: 5px;
}


.mod_newslist h2 {
	margin:0;
	font-size:140%
}


.mod_newslist p.teaser {
	margin-top:5px;
	margin-bottom:3px
}
.mod_newslist p.more {
	text-align:right;
	margin:0;
	margin-top:7px
}
.mod_newslist p.more a {
	border-top: 1px dotted #cecece;
	padding-left:1em;
	padding-top:2px;}
	
/*
	NEWS STORY PAGE
*/
.mod_newsreader .layout_full h2, .mod_newsreader .layout_full h1 {
	/*font-size:220%; */
	line-height: 1.2;
	margin-top: 0;
}
.mod_newsreader .layout_full h3 {
	margin:0;
	margin-bottom: 0.3em;
}
.mod_newsreader .layout_full p.info {
	font-size:120%;
	margin-bottom:15px;
	margin-top:4px
}


p.back {
	margin-top:10px
}
	
/*
	NEWS ARCHIVES PAGES
*/
.mod_newsmenu ul.level_1 {
	padding-left:10px;
	margin-left:0;
	list-style-type: none
}	
.mod_newsmenu ul.level_2 {
	padding-left:8px;
	font-weight:normal;
	list-style:none;
	margin-left:0;
}	
.mod_newsmenu li {
	margin-bottom:5px;
	margin-top:5px
}

.mod_newsmenu ul.level_1 li.year {
	padding-bottom:10px;
	font-weight:bold
}

.mod_newsarchive .layout_simple {
	padding: 3px 0 3px 10px;
	font-weight:bold;
	clear: left;
}

.mod_newsarchive .layout_simple span.info{
	font-size:100%;
	display:inline-block;
	width:5em;
	float:left;
	font-weight: normal;
}
.mod_newsarchive .layout_simple a {
	padding-left:0px;
}


/*
	COMMITTEE LISTINGS AND PROFILES

*/


.mod_memberlist table td, .mod_memberlist table th{ padding:5px;padding-right:25px}
.mod_memberlist table {margin-left:20px}
.mod_memberlist table td.cligrole {font-weight:bold}


.mod_memberpage table {	margin-left:20px
}
.mod_memberpage table td {padding-bottom:10px}

.mod_memberpage img.mugshot {
	float:right; 
	border:1px solid #cecece;
	padding:2px;
	background-color:#fff;
	max-width: 250px;
	height: auto;
}

.mod_memberpage table .left {
	vertical-align:top; 
	font-weight:bold;
	padding-right:20px}
	
.mod_memberpage .biography {
	clear:both;
	padding-top:20px;
}
.mod_memberpage h2 {
	padding:0;
	margin-bottom:0px;
	font-size:200%;}
	
.mod_memberpage h3 {
	margin-top:5px;
	padding-bottom:20px;
	font-size:130%
	}
	
.mod_personalData td {
	padding:5px;
	padding-left:0
}

.mod_personalData textarea {
	min-height: 5em !important;
	width: 100% !important;
}

.formbody td label {
	padding-right: 1em;
}

.form-text {font-size: smaller;}

/*
.mod_login td {
	padding:5px;
	padding-left:0;
	padding-right: 1em;
}

.mod_lostPassword td {
	padding:5px;
	padding-left:0
}
*/



/*
	DOWNLOAD RESOURCES PAGES

*/

.ce_download ul, .ce_downloads ul {
    list-style-type: none;
    padding-left: 0;
}

.downloadarchivList {
	margin-top:10px
}
.downloadarchivItem .description {
	color:#666;
	padding:0;
	margin:0;
	padding-bottom:3px;
	font-family: Times New Roman, Times, serif;
	font-style:italic;
	font-size:120%;
	padding-left:22px;
	padding-top:3px;
}

.ce_downloads li a {
   font-weight: bold;
}


.ce_downloads li a .size {
   font-weight: normal;
   font-size: smaller;
   display: inline-block;
   float: right;
   
}

.ce_downloads li img {
   margin-right: 0.3em;
}

/*
	ARTICLES PAGES

*/

/* .mod_article h1, .mod_article h2 {margin-bottom:3px} */



/*
	EVENT LISTINGS
*/

.event .header {
	/* font-weight:bold; */
   
}

.event h2 {
	font-size:200%;
	margin:0;
}
.event h3 {
	margin:0;
}
.event p.info {
	font-size:120%; 
	margin-bottom:15px;
	/* color:#222A2C; */
	
	margin-top:4px
}

.event .time {
	font-weight:normal
}


/*.mod_upcoming_events .event .header {
	background-color:#E9F7FA;
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
	padding:1px
}*/

		
.mod_eventlist .ce_text {
	}

.mod_eventlist .event {
   margin-bottom:1em
   
}

.mod_eventlist h4 {display: none;} /* Hide the useless year display at top of list */

.event .yearlist div.date {
	width:150px;
	line-height: 1.2;
   font-size: 110%;
	display:block;
	/* padding-left:20px;*/
   font-weight: 400;
	float:left; 
	clear:left;
}
.event .yearlist div.date .time {
	font-size:75%;
}
.event .yearlist {
	padding-bottom:6px; 
	font-size:110%;
	color:#222A2C;}
	
.event .yearlist .eventlink  {display:block; margin-left:170px; width:400px; margin-bottom:5px}

.yearnav	{
	margin-bottom:15px; 
	text-align:center}

.yearnav .current_year {
	font-size:200%;
	margin: 0 30px 0 30px;
	font-weight:bold
	}

.newmonth h3 {
	font-size:140%;
	border-top:1px dotted #cecece;
	margin-top:20px;
	margin-bottom:5px;
   padding-top: 10px;
}

/*
	CALENDAR STYLES
	Largely taken from the Typolight demo site
*/


table.calendar{width:100%;border-top:1px solid #cecece;border-left:1px solid #cecece;}
table.calendar .head{padding-top:4px;padding-bottom:5px;text-align:center;background-color:#f6f6f6;border-right:1px solid #cecece;border-bottom:1px solid #cecece;}
table.calendar .current{background-color:#ffffcc;}
table.calendar .label{padding-top:3px;padding-bottom:4px;text-align:center;background-color:#bbbbbb;border-right:1px solid #cecece;border-bottom:1px solid #cecece;font-weight:bold;font-size:10px;color:#ffffff;}
table.calendar td{width:14%;height:72px;padding:1px;vertical-align:top;background-color:#ffffff;border-right:1px solid #cecece;border-bottom:1px solid #cecece;}
table.calendar .weekend{background-color:#f6f6f6;}
table.calendar .today{background-color:#ffffcc;}
table.calendar .empty,table.calendar .empty .header{background-color:#f6f6f6;}
table.calendar td .header{padding-bottom:2px;background-color:#e0e0e0;font-size:10px;}
table.calendar td .event a{font-size:10px;}


table.minicalendar	{
	width:100%;
	border-top:1px solid #cecece;
	border-left:1px solid #cecece;
	margin-bottom:5px}
table.minicalendar td{width:14%;padding-top:2px;padding-bottom:3px;text-align:center;background-color:#ffffff;border-right:1px solid #cecece;border-bottom:1px solid #cecece;}
table.minicalendar td,table.minicalendar .active a{font-size:10px;}
table.minicalendar .weekend{background-color:#f6f6f6;}
table.minicalendar .today{background-color:#E9F7FA;}
table.minicalendar .label{padding-top:2px;padding-bottom:3px;text-align:center;background-color:#c3c3c3;border-right:1px solid #cecece;border-bottom:1px solid #cecece;font-size:10px;color:#ffffff;}
table.minicalendar .head{padding-top:3px;padding-bottom:4px;text-align:center;background-color:#f9f9f9;border-right:1px solid #cecece;border-bottom:1px solid #cecece;}
table.minicalendar .current{background-color:#E9F7FA;}
table.minicalendar .previous a , table.minicalendar .next a{
	width:100%; 
	display:block;
	height:100%
	}
table.minicalendar .previous a:hover , table.minicalendar .next a:hover{
	background-color:#DFECEF;
	text-decoration:none
	}

/* 
 * FIXES FOR LAYOUT 
 * CHANGED ORDER OF LEFT, RIGHT, MAIN
 * JULY 2019
 */
/*
#main, #left, #right {
	 position: unset;
}

/* or minus the width of the left column, as specified in the Contao layout *//*
#left {
	margin-left: -250px; 
    position: static;
}
*/
	
	
/*
 * E-COMMERCE STYLES
 * 
 */






.mod_eventlistmembersarea, .mod_myevents {
	display: grid;
	grid-row-gap: 20px;
	grid-column-gap: 20px;
	grid-template-columns: auto 3fr 1fr 160px;
	grid-auto-rows: auto;
	font-size: 100%;
	margin-bottom: 2em;
}
.mod_eventlistmembersarea *, .mod_myevents *  {
	vertical-align: top;
}

.mod_myevents {
	grid-template-columns: auto 1fr 160px;
 }



.mod_eventlistmembersarea .date_column, .mod_myevents .date_column {
	min-width: 3.5em;
}

	
/* 
 * ADDITIONAL RESPONSIVE STYLES 
 * ADDED JULY 2019
 */


@media (max-width:800px) {
	body {
		background-image: none;
	}
	
	.mobile-only { display: block}
	
	#wrapper, .membersarea #wrapper {
		background: #f6f6f6;
	}
	
	#left, #right, #main, #footer {
		width: 100%;
		float: none;
		padding:0;
		margin: 0;
	}
	
	#container {
		padding: 0px 10px;
	}
	
	#main .inside {
		padding: 0;
		
	}
	
	#logoheader {
		margin-left: 0;
		text-align: center;
	}
	
	#footer {
		margin-top: 100px;
	}
	

	#credits {
		display: none;
	}
	
	#left .mod_navigation {display: none;} /* Show only mobile versions of logo and navigation */
	#left #logoheader {display: none;}
	#main .mod_navigation {display: block;}
	#main #logoheader {display: block;}
	#right #article-65 .ce_image {display: none;} /* front page griffin only */
	
	.mod_navigation {
		margin-bottom: 2em;
	}
	
	
	.mod_navigation ul.level_1 > li > a:after {
		content: unset;
	}
	
	.mod_navigation ul.level_1 > li > a:before {
		content: '■ ';
	}
	
	.mod_navigation li {
		text-align: left;
		width: 9em;
		display: inline-block;
	}
	
	body.membersarea .mod_navigation li {
		width: 14.5em;
	}
	
	.mod_navigation ul.level_1 > li.membersarea > a {
	 margin-top: 0; 
}
	
	#wrapper #container, #wrapper_inner { /* contains the CLIG lettering background*/
		background-image: url('/files/basic/clig%20bg%20lettering%20mobile.svg');
	}
	
	.frontpage #right-column .ce_image {display: none;} /* hide griffin */
	
	h1 {
		font-size: 200%;
	}
	
	
	.mod_eventlistmembersarea, .mod_myevents {
			grid-template-columns: 3em auto auto;
			grid-column-gap: 10px;
			grid-row-gap: 5px;
	}
	
	.mod_eventlistmembersarea .buy_column {
			grid-column: 2/4;
			text-align: left;
			padding-bottom: 20px;
	}
	
	.mod_myevents {
		grid-row-gap: 5px;
		grid-template-columns: auto auto;
	}
	
	.mod_myevents .organiser_column{
		grid-column: 2/4;
		padding-bottom: 20px;
	}
	
	.mod_eventlistmembersarea .empty {
			min-width: 15em;
	}
	
}


/*@media (max-width: 900px){
	.mod_memberpage img.mugshot {
		float: none; // toggle floating mugshot on narrow browsers
	}
}*/

@media (min-width:1200px) {
	body {
		font-size: 18px;
	}
}

/* Right bar sizes depending on width 
	This is a manual scaling fix for a pre-responsive era layout, keeping modules in correct order for one-col stacking.
 */

@media (min-width: 780px) {
	#container {
		padding-right: 220px;
	}
	#right {
		width: 220px;
	}
}

@media (min-width: 900px) {
	#container {
		padding-right: 250px;
	}
	#right {
		width: 250px;
	}
}

@media (min-width: 1150px) {
	#container {
		padding-right: 300px;
	}
	#right {
		width: 300px;
	}
}

@media (min-width: 1370px) {
	#container {
		padding-right: 350px;
	}
	#right {
		width: 350px;
	}
}