/*

This is the template CSS for the Circle of Friends Newsletter Issues. Due to the wide variation of colours, I have included a colour guide below to help easily identify the HEX value
with the associated CSS class. If you use a new colour, please add it to the list below in the same format.

Author: M. Alex Montgomery, 01/2015

COLOUR GUIDE:

CSS CLASS				HEX VALUE

brown					#4c361d
sky-blue				#1968b3
grey					#e7e7e8
orange					#f15e22
pumpkin					#d0981b
rose					#b81137
gun-grey				#231f20
pink					#e60376
red						#b91f33
moss-green				#436026
purple					#5b3957
turquoise				#4e9fba
honey					#d2c100
river-blue				#0063a5
green					#54b247
mud						#705b45
emerald					#75a184
blood					#da5620
baby-blue				#0090b4
deep-red				#840a2d
sunset-red				#bb2034
sapphire				#0077b3
army-green				#00673f
royal-blue				#002f5f

*********************************************************/

/* STANDARD CSS */

#javax_faces_developmentstage_messages { /* Hides the really annoying unhandled messages that faces spits out. */
	display:none !important;
}
body {
	margin:0px;
	padding:0px;
	border:0px;
	overflow-x:hidden;
}
.main-container {
	width:100%;
	border:0px;
	padding:0px;
	margin:0px;
}
h3 {
	margin:0px;
}
.xlg-spacer {
	width:100%;
	height:100px;
}
.lg-spacer {
	width:100%;
	height:60px;
}
.md-spacer {
	width:100%;
	height:40px;
}
.sm-spacer {
	width:100%;
	height:20px;
}
.xsm-spacer {
	width:100%;
	height:10px;
}

/* HEADER AND ISSUE BAR */

.header {
	width:100%;
	background-color:#fff;
	margin:auto;
	padding-top:25px;
	padding-right:0px;
	position:relative;
	z-index:50;
}
.header img {
	width:70%;
	margin:auto;
	display:block;
}
.header h3 {
	display:none;
	font-family:'Calibri', Arial, sans-serif;
	font-size:2.0em;
	letter-spacing:0.5em;
	padding-top:7px;
	padding-bottom:15px;
}
.issue-bar {
	width:100%;
	background-color:#4c361d;
	padding-top:14px;
	padding-bottom:14px;
	padding-right:0px;
	height:40px;
	position:relative;
	z-index:50;
}
.issue-bar.holiday {
	background-color: #00673f !important;
}
.issue-number {
	float:left;
	width:15%;
	font-family:'Calibri', Arial, sans-serif;
	text-transform:uppercase;
	color:#fff;
	font-size:1.5em;
	font-weight:bold;
	margin-left:3%;
}
.issue-spacer {
	float:left;
	width:43%;
	display:block;
}
.issue-title {
	float:left;
	width:30%;
	font-family:'Calibri', Arial, sans-serif;
	color:#fff;
	letter-spacing:60px;
	font-size:1.5em;
}

/* Holiday Header - This header might be what end up being on every page, if so take out the holiday reference and implement it into the main header */

.holiday-header {
	width:100%;
	background-color:#fff;
	margin:auto;
	padding-right:0px;
	overflow:hidden;
}
.holiday-header img {
	width:56%;
	margin:auto;
	display:block;
}
.holiday-header h3 {
	display:none;
	font-family:'Calibri', Arial, sans-serif;
	font-size:2.0em;
	letter-spacing:0.5em;
	padding-top:7px;
	padding-bottom:15px;
}
.holiday-header .head-image {
	width:35%;
	float:left;
	margin-bottom:-4px;
}
.holiday-header .head-image img {
	width:100%;
	height:auto;
}
.holiday-header .logo {
	padding-top:2%;
	padding-bottom:2%;
}
.holiday-header .resp-featured {
	display:none;
	background-color:rgba(255,255,255,0.7);
	width:70%;
	margin-top:2%;
	margin-bottom:2%;
	margin-left:auto;
	margin-right:auto;
	padding:5%;	
}
/* Responsive Sidebar */
.resp-sidebar {
	display:none;
	background-color:#e7e7e8;
	width:100%;
	/* padding:8%; */
}
.resp-sidebar h1 {
	font-family:'Calibri', Arial, sans-serif;
	font-size:2.0em;
	letter-spacing:1px;
	margin-top:0px;
	margin-left:8%; 
	padding-bottom:8px;
	margin-bottom:10px;
	text-transform:uppercase;
	border-bottom:#b3b3b3 solid 1px;
	width:83%;
	padding-top:8%; 
}
.resp-sidebar h3 {
	float:left;
	font-size:0.9em;
	font-family:'Calibri', Arial, sans-serif;
	padding-top:12px;
	padding-right:20%;
	letter-spacing:1px;
}
.resp-sidebar p {
	font-size:1.3em;
	font-family:'Calibri', Arial, sans-serif;
}
.resp-sidebar a {
	text-decoration:none;
	cursor:pointer;
}
.issue-links {
	width:83%;
	margin:auto;
	padding-bottom:24%;
}

/* MAIN CONTENT BLOCK */

.main-content p {
	color:#231f20;
	font-family:'Calibri', Arial, sans-serif;
	font-size:1.6em;
	width:92%;
}
.main-content {
	width:64%;
	float:left;
	margin-left:3%;
}
.main-content h1 {
	font-family:'Impact', Arial Bold, sans-serif;
	font-size:3.5em;
	letter-spacing:1px;
	margin-bottom:10px;
	font-weight:normal;
}
.main-content h2 {
	font-family:'Impact', Arial Bold, sans-serif;
	font-size:2.2em;
	letter-spacing:1px;
	margin-bottom:10px;
	font-weight:normal;
}
.main-subtitle {
	font-family:'Calibri', Arial, sans-serif !important;
	font-weight:lighter;
	font-size:1.8em !important;
	margin-top:5px;
}
.main-author {
	margin-top:5%;
	margin-bottom:2%;
	font-family:'Calibri', Arial, sans-serif;
}
.main-author h3 {
	font-style:italic;
	font-weight:lighter;
	text-transform:uppercase;
	font-size:1.2em;
}
.main-author h2 {
	text-transform:uppercase;
	font-weight:bold;
	margin-top:-4px;
	font-family:'Calibri', Arial, sans-serif !important;
	font-size:1.6em !important;
}
.resp-block {
	display:none;
	background-color:#e7e7e8;
	width:95%;
}
.resp-block p {
	width:80% !important;
	margin:auto;
}
.resp-block h1 {
	font-family:'Calibri', Arial, sans-serif;
	font-size:1.7em;
	width:80%;
	margin:auto;
	padding-top:10%;
	padding-bottom:10%;
}
.resp-block h3 {
	font-family:'Calibri', Arial, sans-serif;
	margin:auto;
	width:80%;
	padding-top:10%;
	padding-bottom:10%;
}
.resp-block h5 {
	font-family:'Calibri', Arial, sans-serif;
	font-weight:normal;
	width:80%;
	margin:auto;
	padding-bottom:10%;
	padding-top:7%;
	font-size:1.2em;
	line-height:30px;
}
.indent {
	margin-left:35px;
}
.image-left {
	float:left;
	width:35%;	
	padding-top:10px;
	padding-right:50px;
	padding-bottom:30px;
}
.image-right {
	float:right;
	width:35%;
	padding-top:10px;
	padding-left:50px;
	padding-bottom:30px;
}
.image-center {
	float:none;
	margin:auto;
	text-align:center;
	width:100%;
	padding-top:20px;
	padding-bottom:20px;
}
.main-content ul li {
	font-family:'Calibri', Arial, sans-serif;
	padding-bottom:8px; 
	font-size:1.5em;
}
.scroll-arrow {
	display:none;
	width:94%;
	padding:3%;
	margin:auto;
	background-color:#1968b3;
	position:fixed;
	left:-396px;
	bottom:0px;
	cursor:pointer;
	opacity:0.9;
	transition:0.5s;
	-webkit-transition:0.5s;
}
.scroll-arrow img {
	width:40px;
	float:right;
}
.scroll-arrow h3 {
	font-family:'Calibri', Arial, sans-serif;
	color:#fff;
	font-size:1.6em;
	padding-right:5%;
	float:left;
	width:200px;
}
.scroll-arrow:hover {
	transition:0.5s;
	left:0px;
}
.scroll-slide {
	display:none;
	opacity:0;
	transition:0.5s;
}
.scroll-arrow:hover .scroll-slide {
	display:inline;
	opacity:1;
	transition:0.5s;
	-webkit-transition:0.5s;
}
.scroll-line {
	width:1px;
	background-color:#fff;
	height:30px;
	float:left;
	margin-left:30px;
	margin-right:5px;	
}

/* SIDEBAR */

.right-sidebar {
	background-color:#e7e7e8;
	width:30%;
	float:right;
	overflow:hidden;
	position:relative;
	z-index:10;
}
.sidebar-content {
	width:80%;
	margin:auto;
}
.sidebar-content h1 {
	font-family:'Calibri', Arial, sans-serif;
	font-size:2.5em;
}
.sidebar-content h2 {
	font-family:'Impact', Arial Bold, sans-serif;
	font-size:2.0em;
	letter-spacing:1px;
}
.sidebar-content h3 {
	font-size:1.5em;
	font-family:'Calibri', Arial, sans-serif;
	padding-top:20px;
}
.sidebar-content p {
	font-size:1.3em;
	font-family:'Calibri', Arial, sans-serif;
}
.sidebar-content a {
	text-decoration:none;
	cursor:pointer;
}
.author-pic {
	padding-top:107px;
	width:46%;
	height:auto;
}

/* COLOURS */

.brown {
	color:#4c361d !important;
}
.sky-blue {
	color:#1968b3 !important;
}
.grey {
	color:e7e7e8 !important;
}
.orange {
	color:#f15e22 !important;
}
.pumpkin {
	color:#d0981b !important;
}
.rose {
	color:#b81137 !important;
}
.gun-grey {
	color:#231f20 !important;
}
.pink {
	color:#e60376 !important;
}
.red {
	color:#b91f33 !important;
}
.moss-green {
	color:#436026 !important;
}
.purple {
	color:#5b3957 !important;
}
.turquoise {
	color:#4e9fba !important;
}
.honey {
	color:#d2c100 !important;
}
.river-blue {
	color:#0063a5 !important;
}
.green {
	color:#54b247 !important;
}
.mud {
	color:#705b45 !important;
}
.emerald {
	color:#75a184 !important;
}
.blood {
	color:#da5620 !important;
}
.baby-blue {
	color:#0090b4 !important;
}
.deep-red {
	color:#840a2d !important;
}
.sunset-red {
	color:#bb2034 !important;
}
.sapphire {
	color:#0077be !important;
}
.army-green {
	color:#00673f !important;
}
.royal-blue {
	color:#002f5f !important;
}