* {
	margin:0px;
	padding:0px;
}

html {
	height: 100%;
}

body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:normal;
	height: 100%;
	background-color: white;
	overflow-y:scroll;
	min-width:780px;
}

h1, .h1 {
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight:lighter;
	font-size: 40px;
	margin-bottom:20px;
	color:#787878;
	display:block;
}

h2 {
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight:lighter;
	font-size: 30px;
	margin-top:45px;
	margin-bottom:15px;
	color:#787878;
}

h3 {
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight:lighter;
	font-size: 24px;
	margin-top:30px;
	margin-bottom:10px;
	color:#787878;
	margin-top:30px;
}

h4 {
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight:lighter;
	font-size: 18px;
	margin-top:20px;
	margin-bottom:8px;
	color:#787878;
	margin-top:30px;
}

.nowrap{
	white-space:nowrap;
}

.blueHeader {
	color:#319ACE;
}

.greenHeader {
	color:#65A600;
}

ul,ol {
	margin-left: 40px;
	margin-bottom:15px;
}

ol {
	list-style-position: inside;
}

li {
	line-height:18px;
}

a {
	color:blue;
	text-decoration:underline;
	word-wrap: break-word;
}

input,select,textarea{
	font-family:Arial, Helvetica, sans-serif;
}

label, input[type=checkbox]{
	cursor:pointer;
}

select{
	background:white;
}

.fwButton {
	margin:10px;
	color:white;
	cursor:pointer;
	background-color:#319ACE;
	border-radius:14px;
	border:none;
	padding:10px 30px;
	outline:none;
	font-size:15px;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);

		  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;

}

.fwButton:hover{
	color:yellow;

	background: #319ace; /* Old browsers */
	background: -moz-linear-gradient(top,  #319ace 1%, #25769c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#319ace), color-stop(100%,#25769c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #319ace 1%,#25769c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #319ace 1%,#25769c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#319ace', endColorstr='#25769c',GradientType=0 ); /* IE6-9 */

   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		

}

.fwInput{
	box-sizing:border-box;
	padding:10px 10px;
	border:1px #787878 solid;
	border-radius:6px;
	outline:none;
	width:100%;
	max-width:600px;
	font-size:14px;
	height:40px;
	
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;
}

.fwInput:hover{
	border:1px #4A4A4A solid;

	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
}

.fwInput:focus{
	border:1px #319ACE solid;

	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px #5EB0D9;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px #5EB0D9;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px #5EB0D9;	
}

.fwCheckbox input[type=checkbox]{
	display:none;
}

.fwCheckbox span{
	display:inline-block;
	width:40px;
	height:40px;
	border-radius:6px;
	border:1px #787878 solid;
	background-color:white;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;	
}

.fwCheckbox span:hover{
	border:1px #4A4A4A solid;

	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
}

.fwCheckbox input[type=checkbox]:checked + span{
	background-image: url("https://www.firstwriter.com/images/tick.png");
	background-size:cover;
}

.quarterAnchor{
	position:relative;
	padding-top:25vh;
	margin-top:-25vh;
}

.tradPubTable {
	border-collapse:collapse;
	border:1px solid #25769C;
	margin-bottom:25px;
	background:white;
	width:100%;
}

.tradPubTable td, .tradPubTable th{
	padding:10px 5%;
}

.tradPubTable th{
	background-color:#319ACE;
	color:white;
	text-align:left;
}

.tradPubTable tr:nth-child(even){
	background-color:#B5DBEE;
}

.selfPubTable{
	border-collapse:collapse;
	border:1px solid #4B7D00;
	margin-bottom:25px;
	background:white;
	width:100%;
}

.selfPubTable td, .selfPubTable th{
	padding:10px 5%;
}

.selfPubTable th{
	background-color:#65A600;
	color:white;
	text-align:left;
}

.selfPubTable tr:nth-child(even){
	background-color:#D8EDA5;
}

.submissionForm table{
	border: 1px solid #787878;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

	border-spacing:25px;
	margin-bottom:15px;
	width:100%;

	background:url('https://www.firstwriter.com/images/submission_form.jpg') no-repeat center center / cover #FFFFFF;
}

.submissionForm tr td:nth-of-type(1){
	width:35%;
	text-align:right;
	padding:10px;
	vertical-align:top;
	background-color:rgba(0,0,0,0.5);
	border-radius:6px;
	color:white;
}

.submissionForm tr td:nth-of-type(2){
	width:65%;
	vertical-align:auto;
}

.submissionForm input, .submissionForm select{
	height:40px;
}

.submissionForm input, .submissionForm select, .submissionForm textarea{
	box-sizing:border-box;
	padding:10px 10px;
	border:1px #787878 solid;
	border-radius:6px;
	outline:none;
	width:100%;
	max-width:600px;
	font-size:14px;
	
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;
}

.submissionForm select, .submissionForm textarea{
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
}

.submissionForm textarea{
	min-height:calc(100% + 22px);
	margin-top:2px;
}

.submissionForm option{
	padding:10px;
	border-bottom:1px #787878 solid;
}

.submissionForm input:hover, .submissionForm select:hover, .submissionForm textarea:hover{
	border:1px #4A4A4A solid;

	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
	
}

.submissionForm input:focus, .submissionForm select:focus, .submissionForm textarea:focus{
	border:1px #319ACE solid;

	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px #5EB0D9;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px #5EB0D9;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px #5EB0D9;	

}

.submissionForm input:disabled, .submissionForm select:disabled, .submissionForm textarea:disabled{
	border:1px #787878 solid;

	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0) inset;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0) inset;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0) inset;	
	
}

.disabledElement{
	opacity:0.5;
}

.inactive{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity:0.8;
	pointer-events: none;
}


.submissionForm .actionButtons{
	text-align:center;
}

.submissionForm input[type=submit], .submissionForm input[type=button], .submissionForm input[type=reset], .submissionForm button {
	width: auto;
	height: 40px;
	border: 3px #25769C solid;
	margin: 10px 10px 10px 0px;
	color: white;
	background-color: #25769C;
	cursor: pointer;
	padding: 6px 12px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 15px;
	border-radius: 0px;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	/*Animation*/
	-moz-transition: -moz-transform 0.5s ease;
	-o-transition: -o-transform 0.5s ease;
	-ms-transition: -ms-transform 0.5s ease;
}

	.submissionForm input[type=submit]:hover, .submissionForm input[type=button]:hover, .submissionForm input[type=reset]:hover, .submissionForm button:hover{
		background-color: #1B536D;
		border: 3px #1B536D solid;
		color: yellow;
		-webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
		-moz-transform: scale(1.1,1.1);
		-o-transform: scale(1.1,1.1);
		-ms-transform: scale(1.1,1.1); /* IE 9 */
		transform: scale(1.1,1.1);
	}

.radioWrap{
	position:relative;
}

.submissionForm input[type=radio]{
	width:40px;
	height: 40px;
	position:absolute;
	top:10px;
	left:10px;
	z-index:2;

	-webkit-box-shadow:none;
	-moz-box-shadow: none;	
	box-shadow: none;
	
}


.submissionForm input[type=radio]:checked+label{
	background-color:#319ACE;
	color:white;
	border:1px #319ACE solid;

	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3);	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3);	
}

.radioWrap+.radioWrap{
	margin-top:10px;
}

.actionButtons input:nth-of-type(even){
	background-color:transparent;
	color:#25769C;
	font-weight:bold;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);
}

.actionButtons input:nth-of-type(even):hover{
	background-color:#B5DBEE;
	color:#1B536D;
}

.messageText{
	background-color:#CC0000;
	color: white;
	border-radius:6px;
	text-align:left;
	padding:10px 20px;
	margin-bottom:20px;
	margin-top:20px;
}

.messageText h1, .messageText h2, .messageText h3{
	color:white;
	margin-top:0px;
}

.messageText a{
	color:white;
}

.errorField{
	border: 2px red solid !IMPORTANT;
	background-color:#FFCCCC !IMPORTANT;
}

.sideBox{
	box-sizing:border-box;
	border-radius:12px;
	padding: 20px;
	float:left;
	margin-bottom:20px;
	box-sizing:border-box;	
	color:white;
	background-color:#319ACE;
}

.sideBox h2{
	margin-top:0px;
	color:white;
}

.sideBox input[type=text], .sideBox input[type=password], .sideBox select, .sideBox input[type=number]{
	width:100%;
	height:40px;
	margin:12px 0;
	margin-top:-10px;	
	box-sizing:border-box;
	padding:10px 10px;
	border:1px #787878 solid;
	border-radius:6px;
	outline:none;
	font-size:14px;
	border-radius:14px;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;

}

.sideBox input[type=text]:hover, .sideBox input[type=password]:hover, .sideBox select:hover, .sideBox input[type=number]:hover {
	border:1px orange solid;
	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
}

.sideBox select{
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}

.sideBox input[type=text]:focus, .sideBox input[type=password]:focus, .sideBox select:focus, .sideBox input[type=number]:focus{

	border:1px orange solid;

	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px yellow;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px yellow;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px yellow;	
}

.sideBox input[type=submit]{
	height: 40px;
	border: 3px white solid;
	margin:10px;
	color:white;
	background-color:transparent;
	cursor:pointer;
	padding:6px 12px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:15px;
	font-weight:bold;
	display:block;
	margin-left:auto;
	margin-right:auto;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);

}

.sideBox input[type=submit]:hover{
	background-color:rgba(255,255,255,0.25);
}


.whiteBody{
	background-color: white;
}

.clearBody {
	background-color: transparent;
}

#wrapper{
}

#pageMask {
	background-color: black;
	position: fixed;
	top: 0px;
	
}

.showPage {
	width: 0%;
	height: 0%;
	opacity: 0;
	filter:alpha(opacity=0);
	z-index:0;

			  /*Animation*/
  -webkit-transition: opacity 0.5s ease 0s, width 0s ease 0.5s, height 0s ease 0.5s;
     -moz-transition: opacity 0.5s ease 0s, width 0s ease 0.5s, height 0s ease 0.5s;
       -o-transition: opacity 0.5s ease 0s, width 0s ease 0.5s, height 0s ease 0.5s;
      -ms-transition: opacity 0.5s ease 0s, width 0s ease 0.5s, height 0s ease 0.5s;
          transition: opacity 0.5s ease 0s, width 0s ease 0.5s, height 0s ease 0.5s;

}

.maskPage {
	width: 100%;
	height: 100%;
	opacity: 0.5;
	filter:alpha(opacity=50);
	z-index:400;

			  /*Animation*/
  -webkit-transition: opacity 0.5s ease;
     -moz-transition: opacity 0.5s ease;
       -o-transition: opacity 0.5s ease;
      -ms-transition: opacity 0.5s ease;
          transition: opacity 0.5s ease;
}

.maskPageAlert {
	width: 100%;
	height: 100%;
	opacity: 0.5;
	filter:alpha(opacity=50);
	z-index:900;

			  /*Animation*/
  -webkit-transition: opacity 0.5s ease;
     -moz-transition: opacity 0.5s ease;
       -o-transition: opacity 0.5s ease;
      -ms-transition: opacity 0.5s ease;
          transition: opacity 0.5s ease;
}

#clearPageMask {
	background-color: transparent;
	position: fixed;
	top: 0px;
}

.clearShowPage {
	width: 0%;
	height: 0%;
	z-index:0;	
}

.clearMaskPage {
	width: 100%;
	height: 100%;
	z-index:49;	
}

.divider{
	text-align:center;
}

.illustration{
	float:right;
	border:1px black solid;
	max-width:40%;
	margin-left:20px;
	margin-bottom:20px;
}

.loadingWhiteBG{
	background-color:white;
	border-radius:6px;
	padding:10px;
}

.sticky{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

/*Reminder Pane*/
/*============================================================*/

#reminderPane {
	height:98vh;
	width: 0px;
	position:fixed;
	top:2vh;
	left:100%;
	z-index:390;

			  /*Animation*/
  -webkit-transition: margin-left 0.5s ease;
     -moz-transition: margin-left 0.5s ease;
       -o-transition: margin-left 0.5s ease;
      -ms-transition: margin-left 0.5s ease;
          transition: margin-left 0.5s ease;
}

#reminderPane.hidden {
	margin-left:0px;
}

#reminderPane.show {
	margin-left:-350px;
}

.reminderPaneItem {
	width:310px;
	height: 80px;
	position:relative;
	padding:10px 20px;
	background-color: white;
	background: url(https://www.firstwriter.com/images/reminders_background_right.jpg) right top/auto 100px no-repeat, white;
	overflow:hidden;
	-webkit-box-shadow: 5px 5px 15px #444444;
	-moz-box-shadow: 5px 5px 15px #444444;	
	box-shadow: 5px 5px 15px #444444;
	z-index:5;
}

.reminderPaneSpacer {
	width:0px;
	height: 18%;
	max-height: 125px;
	margin-bottom:-100px;
	position:relative;
}

.reminderPaneItem.hidden {
	height:0px;
	padding: 0px 20px;
	margin-left:370px;
	margin-bottom:0px;

			  /*Animation*/
  -webkit-transition: margin-left 0.5s ease, height 0.5s ease 0.5s, padding 0.5s ease 0.5s, margin-bottom 0.5s ease 0.5s;
     -moz-transition: margin-left 0.5s ease, height 0.5s ease 0.5s, padding 0.5s ease 0.5s, margin-bottom 0.5s ease 0.5s;
       -o-transition: margin-left 0.5s ease, height 0.5s ease 0.5s, padding 0.5s ease 0.5s, margin-bottom 0.5s ease 0.5s;
      -ms-transition: margin-left 0.5s ease, height 0.5s ease 0.5s, padding 0.5s ease 0.5s, margin-bottom 0.5s ease 0.5s;
          transition: margin-left 0.5s ease, height 0.5s ease 0.5s, padding 0.5s ease 0.5s, margin-bottom 0.5s ease 0.5s;

}

.reminderPaneItem.hidden + .reminderPaneSpacer {
	height: 0%;
	margin-bottom:0px;

			  /*Animation*/
  -webkit-transition: margin-left 0.5s ease, height 0.5s ease 0.5s, padding 0.5s ease 0.5s, margin-bottom 0.5s ease 0.5s;
     -moz-transition: margin-left 0.5s ease, height 0.5s ease 0.5s, padding 0.5s ease 0.5s, margin-bottom 0.5s ease 0.5s;
       -o-transition: margin-left 0.5s ease, height 0.5s ease 0.5s, padding 0.5s ease 0.5s, margin-bottom 0.5s ease 0.5s;
      -ms-transition: margin-left 0.5s ease, height 0.5s ease 0.5s, padding 0.5s ease 0.5s, margin-bottom 0.5s ease 0.5s;
          transition: margin-left 0.5s ease, height 0.5s ease 0.5s, padding 0.5s ease 0.5s, margin-bottom 0.5s ease 0.5s;
	
}

.reminderPaneItem.reveal {
    -webkit-animation: revealReminder 0.5s; /* Chrome, Safari, Opera */
    animation: revealReminder 0.5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes revealReminder {
    from {margin-left: 350px;}
    to {margin-left: 0px;}
}

/* Standard syntax */
@keyframes revealReminder {
    from {margin-left: 350px;}
    to {margin-left: 0px;}
}

.reminderPaneItem.hide {
    -webkit-animation: hideReminder 0.5s; /* Chrome, Safari, Opera */
    animation: hideReminder 0.5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes hideReminder {
    from {margin-left: 0px;}
    to {margin-left: 350px;}
}

/* Standard syntax */
@keyframes hideReminder {
    from {margin-left: 0px;}
    to {margin-left: 350px;}
}

.snoozeAll {
	background:#319ACE;
	color: white;
	cursor:pointer;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:18px;
	border:none;
	width:350px;
	height:auto;
	max-height:50px;
}

.snoozeAll:hover {
	color:yellow;
	background: #25769C;
}

.reminderPaneItem span{
	white-space:nowrap;
	display:block;
	overflow:hidden;
	width:250px;
	text-overflow:ellipsis;
	color: #787878;
}

.reminderPaneItem a {
	color:#25769C;
	text-decoration: none;
	text-shadow: 1px 1px white;
}

.reminderPaneItem a:hover {
	text-decoration:underline;
}

.reminderPaneItem p {
	margin-top:6px;
	margin-bottom:15px;	
}

.reminderPaneItem.due {
	color:#CC6600;
	font-weight:bold;
}

.reminderPaneItem .overdue {
	color:white;
	font-weight:bold;
	background-color:#CC0000;
	padding:2px 6px 2px 6px;
}

.reminderPaneItem input[type=button] {
	height: 27px;
	width: 70px;
	position: absolute;
	right: 20px;
	bottom:10px;
	border: 3px #25769C solid;
	color:white;
	background-color:#25769C;
	cursor:pointer;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:13px;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

		  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;
}

.reminderPaneItem input[type=button]:hover {
	background-color: #1B536D;
	border: 3px #1B536D solid;	
	color:yellow;

   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		
}

.reminderPaneItem input[type=button]:nth-of-type(1) {
	right:100px;
	border: 3px #25769C solid;
	color:#25769C;
	background-color:transparent;
	cursor:pointer;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight:bold;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);

		  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;
}

.reminderPaneItem input[type=button]:nth-of-type(1):hover {
	background-color:#B5DBEE;

   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		
}

.reminderPaneItem .noteText {
	color: black;
	margin-bottom: 10px;
}

.reminderPaneMoreLink {
	text-decoration: none;
}

#reminderPaneMoreDiv {
	height:24px;
	width:290px;
	padding:8px 30px;
	z-index:0;
}

/*Reminder Pane End*/
/*============================================================*/


#alertWrap{
	margin:auto;
	position: fixed;
	top:10vh;
	top: 10%\9;
	left:50%;
	margin-left:-390px;
	z-index:1000;

	-webkit-perspective: 800px;	
	-moz-perspective: 800px;	
	-o-perspective: 800px;	
	-ms-perspective: 800px;	
	perspective: 800px;	


	-webkit-perspective-origin: 25% center;	
	-moz-perspective-origin: 25% center;	
	-o-perspective-origin: 25% center;
	-ms-perspective-origin: 25% center;
	perspective-origin: 25% center;
}

#alertBox {
	background-color: white;
	border-radius: 20px;
	overflow: hidden;	

	
	-webkit-box-shadow: 2px 2px 20px #444444;
	-moz-box-shadow: 2px 2px 20px #444444;	
	box-shadow: 2px 2px 20px #444444;

	-webkit-transform-origin: right center;
	-moz-transform-origin: right center;
	-o-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;

}

.alertOff{
	width:0px;
	height: 0px;
	opacity:0;
	filter:alpha(opacity=0);

			  /*Animation*/
  -webkit-transition: -webkit-transform 0.5s ease-in, opacity 1s ease, width 0s ease 0.5s, height 0s ease 0.5s;
     -moz-transition: -moz-transform 0.5s ease-in, opacity 1s ease, width 0s ease 0.5s, height 0s ease 0.5s;
       -o-transition: -o-transform 0.5s ease-in, opacity 1s ease, width 0s ease 0.5s, height 0s ease 0.5s;
      -ms-transition: -ms-transform 0.5s ease-in, opacity 1s ease, width 0s ease 0.5s, height 0s ease 0.5s;
          transition: transform 0.5s ease-in, opacity 1s ease, width 0s ease 0.5s, height 0s ease 0.5s;

        

	-webkit-transform: translateX( -75% ) rotateY( -90deg );
	-moz-transform: translateX( -75% ) rotateY( -90deg );
	-o-transform: translateX( -75% ) rotateY( -90deg );
	-ms-transform: translateX(-75%) rotateY(-90deg);
	transform: translateX(-75%) rotateY(-90deg);
	

}

.alertOn{
	width:780px;
	height: 60vh;
	height: 400px\9;
	opacity:1;
	filter:alpha(opacity=100);

			  /*Animation*/
  -webkit-transition: -webkit-transform 0.5s ease-out, opacity 0.5s ease;
     -moz-transition: -moz-transform 0.5s ease-out, opacity 0.5s ease;
       -o-transition: -o-transform 0.5s ease-out, opacity 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease-out, opacity 0.5s ease;
          transition: transform 0.5s ease-out, opacity 0.5s ease;


	-webkit-transform: translateX( 0% ) rotateY( 0deg );
	-moz-transform: translateX( 0% ) rotateY( 0deg );
	-o-transform: translateX( 0% ) rotateY( 0deg );
	-ms-transform: translateX(0%) rotateY(0deg);
	transform: translateX(0%) rotateY(0deg);

}


#alertContent{
	width:80%;
	height:50vh;
	min-width:0;
	overflow-y:auto;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:14px;
	font-weight:lighter;
	color: #787878;
	overflow-y:auto;
	position:absolute;
	top:0;
	left:0;
	border-radius: 20px;
	padding: 5vh 10% 5vh 10%;
	background-image:url('https://www.firstwriter.com/images/loadingOrange.gif'); 
	background-repeat: no-repeat; 
	background-position:center center; 
	background-attachment:local;
}

#alertContent h1{
	color:orange;
	font-size:30px;
	font-weight:lighter;
	margin-bottom: 15px;
}

#alertContent ul{
	margin:5%;
	margin-left:12%;
}

#alertContent li{
	margin:3%;
}

#alertContent p{
	margin:3% 0%;
}

#centreBar{
	position:fixed;
	top: 50vh;
	left:0px;
	width:70vw;
	padding-left:15vw;
	padding-right:15vw;
	z-index:500;
	overflow:hidden;

	-webkit-box-shadow: 0px 2px 20px #444444;
	-moz-box-shadow: 0px 2px 20px #444444;	
	box-shadow: 0px 2px 20px #444444;
	
}

#centreBar p{
	margin-bottom:0px;
}

#centreBar h1{
	font-size:30px;
	margin-bottom:5px;
}

#centreBar h2{
	font-size:20px;
	margin-bottom:5px;
	margin-top:10px;
}

.centreBarClosed{
	height:0px;
	margin-top:0px;

			  /*Animation*/
  -webkit-transition: height 0.3s linear, margin-top 0.3s linear, background-color 0s ease 0.5s, background-image 0.5s;
     -moz-transition: height 0.3s linear, margin-top 0.3s linear, background-color 0s ease 0.5s, background-image 0.5s;
       -o-transition: height 0.3s linear, margin-top 0.3s linear, background-color 0s ease 0.5s, background-image 0.5s;
      -ms-transition: height 0.3s linear, margin-top 0.3s linear, background-color 0s ease 0.5s, background-image 0.5s;
          transition: height 0.3s linear, margin-top 0.3s linear, background-color 0s ease 0.5s, background-image 0.5s;
}

#centreBarLoading{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-25px;
	margin-left:-25px;
}

#centreBarLoading.loadingWhiteBG{
	margin-top:-35px;
	margin-left:-35px;
}

/*======================================================================================================================*/
/*Calendar Date Picker*/
/*======================================================================================================================*/

.datepickr-wrapper{
	display:inline-block;
	position:relative
}
	
.datepickr-calendar{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color:gainsboro;
	color:black;
	border:1px solid #B4B4B4;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	padding:2px;
	display:none;
	position:absolute;
	top:100%;
	left:0;
	z-index:100;
}

.open .datepickr-calendar{
	display:block
}

.datepickr-calendar .datepickr-months{
	background-color:#319ACE;
	border:1px solid #25769C;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	color:white;
	padding:2px;
	text-align:center;
	font-size:120%;
}

.datepickr-calendar .datepickr-next-month,.datepickr-calendar .datepickr-prev-month{
	color:white;
	text-decoration:none;
	padding:0 .4em;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	cursor:pointer;
}

.datepickr-calendar .datepickr-prev-month{
	float:left;
}

.datepickr-calendar .datepickr-next-month{
	float:right;
}

.datepickr-calendar .datepickr-current-month{
	padding:0 .5em
}

.datepickr-calendar .datepickr-next-month:hover,.datepickr-calendar .datepickr-prev-month:hover{
	background-color:#25769C;
	color:yellow;
}

.datepickr-calendar table{
	border-collapse:collapse;
	padding:0;
	width:100%;
}

.datepickr-calendar thead{
	font-size:90%;
}

.datepickr-calendar td,.datepickr-calendar th{
	width:14.3%;
}

.datepickr-calendar th{
	text-align:center;
	padding:5px;
}

.datepickr-calendar td{
	text-align:right;
	padding:1px;
}

.datepickr-calendar .datepickr-day{
	display:block;
	color:black;
	background-color:#b4b4b4;
	border:1px solid #787878;
	padding:5px;
	cursor:pointer;
}

.datepickr-calendar .datepickr-day:hover{
	color:white;
	background-color:#4A4A4A;
	border:1px solid #4A4A4A;
}

.datepickr-calendar .today .datepickr-day{
	background-color:gainsboro;
	border:1px solid #787878;
	color:black;

    -webkit-box-shadow: 0px 0px 2px 2px orange;
    -moz-box-shadow: 0px 0px 2px 2px orange;
    box-shadow: 0px 0px 2px 2px orange;

}

.datepickr-calendar .today .datepickr-day:hover{
	background-color:#4A4A4A;
	color:white;
}


.datepickr-calendar .selected .datepickr-day{
	background-color:#1c94c4;
	color:#f6f6f6;
}

.datepickr-calendar .disabled .datepickr-day,.datepickr-calendar .disabled .datepickr-day:hover{
	background-color:#eee;
	border:1px dotted #ccc;
	color:#bbb;
	cursor:default;
}

/*======================================================================================================================*/
/*END Calendar Date Picker END*/
/*======================================================================================================================*/

.searchText{
	box-sizing:border-box;
	padding:10px 10px;
	border:1px #787878 solid;
	border-top-left-radius:6px;
	border-bottom-left-radius:6px;
	border-right:none;
	float:left;
	outline:none;
	font-size:14px;
	height:40px;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;	
}

.searchText:hover{
	border:1px #4A4A4A solid;
	border-right:none;

	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;		
}

.searchText:focus{
	border:1px #319ACE solid;
	border-right:none;

	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px #5EB0D9;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px #5EB0D9;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px #5EB0D9;
}

.searchSubmit{
	box-sizing:border-box;
	height:40px;
	width:40px;
	border-top-right-radius:6px;
	border-bottom-right-radius:6px;	
	cursor:pointer;
	border:1px #25769C solid;
	float:left;
	outline:none;

	background: url('https://www.firstwriter.com/images/search-icon.png') center center / 15px 15px no-repeat, url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, #319ace; /* Old browsers */
	background: url('https://www.firstwriter.com/images/search-icon.png') center center / 15px 15px no-repeat, url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, -moz-linear-gradient(top,  #319ace 1%, #25769c 100%); /* FF3.6+ */
	background: url('https://www.firstwriter.com/images/search-icon.png') center center / 15px 15px no-repeat, url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(1%,#319ace), color-stop(100%,#25769c)); /* Chrome,Safari4+ */
	background: url('https://www.firstwriter.com/images/search-icon.png') center center / 15px 15px no-repeat, url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, -webkit-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Chrome10+,Safari5.1+ */
	background: url('https://www.firstwriter.com/images/search-icon.png') center center / 15px 15px no-repeat, url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, -o-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Opera 11.10+ */
	background: url('https://www.firstwriter.com/images/search-icon.png') center center / 15px 15px no-repeat, url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, -ms-linear-gradient(top,  #319ace 1%,#25769c 100%); /* IE10+ */
	background: url('https://www.firstwriter.com/images/search-icon.png') center center / 15px 15px no-repeat, url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, linear-gradient(to bottom,  #319ace 1%,#25769c 100%); /* W3C */

}

.searchSubmit:hover{
	background: url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, #25769c; /* Old browsers */
	background: url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, -moz-linear-gradient(top,  #25769c 0%, #1b536d 100%); /* FF3.6+ */
	background: url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25769c), color-stop(100%,#1b536d)); /* Chrome,Safari4+ */
	background: url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, -webkit-linear-gradient(top,  #25769c 0%,#1b536d 100%); /* Chrome10+,Safari5.1+ */
	background: url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, -o-linear-gradient(top,  #25769c 0%,#1b536d 100%); /* Opera 11.10+ */
	background: url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, -ms-linear-gradient(top,  #25769c 0%,#1b536d 100%); /* IE10+ */
	background: url('https://www.firstwriter.com/images/search-icon-yellow.png') center center / 15px 15px no-repeat, linear-gradient(to bottom,  #25769c 0%,#1b536d 100%); /* W3C */
}

.searchReset{
	box-sizing:border-box;
	height:40px;
	width:40px;
	border-radius:6px;
	cursor:pointer;
	border:1px #4B7D00 solid;
	float:left;
	outline:none;

	background: url('https://www.firstwriter.com/images/refreshIcon.png') center center / 60% 60% no-repeat, url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, #65A600; /* Old browsers */
	background: url('https://www.firstwriter.com/images/refreshIcon.png') center center / 60% 60% no-repeat, url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, -moz-linear-gradient(top,  #65A600 1%, #4B7D00 100%); /* FF3.6+ */
	background: url('https://www.firstwriter.com/images/refreshIcon.png') center center / 60% 60% no-repeat, url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(1%,#65A600), color-stop(100%,#4B7D00)); /* Chrome,Safari4+ */
	background: url('https://www.firstwriter.com/images/refreshIcon.png') center center / 60% 60% no-repeat, url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, -webkit-linear-gradient(top,  #65A600 1%,#4B7D00 100%); /* Chrome10+,Safari5.1+ */
	background: url('https://www.firstwriter.com/images/refreshIcon.png') center center / 60% 60% no-repeat, url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, -o-linear-gradient(top,  #65A600 1%,#4B7D00 100%); /* Opera 11.10+ */
	background: url('https://www.firstwriter.com/images/refreshIcon.png') center center / 60% 60% no-repeat, url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, -ms-linear-gradient(top,  #65A600 1%,#4B7D00 100%); /* IE10+ */
	background: url('https://www.firstwriter.com/images/refreshIcon.png') center center / 60% 60% no-repeat, url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, linear-gradient(to bottom,  #65A600 1%,#4B7D00 100%); /* W3C */

}

.searchReset:hover{
	color:yellow;

	background: url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, #4B7D00; /* Old browsers */
	background: url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, -moz-linear-gradient(top,  #4B7D00 0%, #325300 100%); /* FF3.6+ */
	background: url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4B7D00), color-stop(100%,#325300)); /* Chrome,Safari4+ */
	background: url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, -webkit-linear-gradient(top,  #4B7D00 0%,#325300 100%); /* Chrome10+,Safari5.1+ */
	background: url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, -o-linear-gradient(top,  #4B7D00 0%,#325300 100%); /* Opera 11.10+ */
	background: url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, -ms-linear-gradient(top,  #4B7D00 0%,#325300 100%); /* IE10+ */
	background: url('https://www.firstwriter.com/images/refreshIconYellow.png') center center / 60% 60% no-repeat, linear-gradient(to bottom,  #4B7D00 0%,#325300 100%); /* W3C */
}

#banner {
	min-width:800px;
	height:80px;

background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%), url('https://www.firstwriter.com/images/books-sky-grass.jpg') right top / auto 90px no-repeat, #8FB8E2; /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(40%,rgba(255,255,255,1)), color-stop(60%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))), url('https://www.firstwriter.com/images/books-sky-grass.jpg') right top / auto 90px no-repeat, #8FB8E2; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%), url('https://www.firstwriter.com/images/books-sky-grass.jpg') right top / auto 90px no-repeat, #8FB8E2; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%), url('https://www.firstwriter.com/images/books-sky-grass.jpg') right top / auto 90px no-repeat, #8FB8E2; /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%), url('https://www.firstwriter.com/images/books-sky-grass.jpg') right top / auto 90px no-repeat, #8FB8E2; /* IE10+ */
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%), url('https://www.firstwriter.com/images/books-sky-grass.jpg') right top / auto 90px no-repeat, #8FB8E2; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */

}

#bannerLeft {
	box-sizing:border-box;
	width:calc(30% - 40px);
	height:80px;
	position:relative;
	float:left;
}

#logo{
	height:55px;
	width:180px;
	margin-top:12px;
	margin-left:-90px;
	position:relative;
	left:50%;
}

#bannerMid {
	box-sizing:border-box;
	width:calc(30% + 30px);
	height:80px;
	position:relative;
	float:left;
}

#bannerRight {
	box-sizing:border-box;
	width:calc(40% + 10px);
	height:80px;
	position:relative;
	float:right;
}


#boxes{
	padding-top:7px;
	float:left;
}

.boxContainer{
	height:60px;
	width:60px;	
	float:left;
	margin:3px;
	margin-bottom:20px;
	text-align:center;
	overflow:hidden;
	position:relative;
	
			  /*Animation*/
  -webkit-transition: width 0.5s ease, height 0.5s ease, margin 0.5s ease, z-index 0.5s ease;
     -moz-transition: width 0.5s ease, height 0.5s ease, margin 0.5s ease, z-index 0.5s ease;
       -o-transition: width 0.5s ease, height 0.5s ease, margin 0.5s ease, z-index 0.5s ease;
      -ms-transition: width 0.5s ease, height 0.5s ease, margin 0.5s ease, z-index 0.5s ease;
          transition: width 0.5s ease, height 0.5s ease, margin 0.5s ease, z-index 0.5s ease;

}

.boxContainer:hover{
	height:66px;
	width:66px;	
	margin:0px;	
	cursor:pointer;
}

.box {
	float:left;
	width: 54px;
	height: 54px;
	border: 3px gray solid;
	background-color: rgba(180,180,180,0.2);
	background-repeat: no-repeat; 
	background-position: center center; 
	background-size: 100% 100%;

			  /*Animation*/
  -webkit-transition: width 0.5s ease, height 0.5s ease, background-color 0.5s ease, border 0.5s ease;
     -moz-transition: width 0.5s ease, height 0.5s ease, background-color 0.5s ease, border 0.5s ease;
       -o-transition: width 0.5s ease, height 0.5s ease, background-color 0.5s ease, border 0.5s ease;
      -ms-transition: width 0.5s ease, height 0.5s ease, background-color 0.5s ease, border 0.5s ease;
          transition: width 0.5s ease, height 0.5s ease, background-color 0.5s ease, border 0.5s ease;

}

.boxContainer:hover .box {
	width: 60px;
	height: 60px;
	background-color: rgba(180,180,180,0.5);

			  /*Animation*/
  -webkit-transition: width 0.5s ease, height 0.5s ease;
     -moz-transition: width 0.5s ease, height 0.5s ease;
       -o-transition: width 0.5s ease, height 0.5s ease;
      -ms-transition: width 0.5s ease, height 0.5s ease;
          transition: width 0.5s ease, height 0.5s ease;

}

#boxHome{
	background-image: url('https://www.firstwriter.com/images/home14.gif');	
}

#narrowSearchBoxHolder{
	display:none;
}

#boxHelp{
	background-image: url('https://www.firstwriter.com/images/help.png');	
}

#boxMag{
	background-image: url('https://www.firstwriter.com/images/magazine14b.png');	
}

#boxLinks{
	background-image: url('https://www.firstwriter.com/images/links14.png');	
}

#boxNews{
	background-image: url('https://www.firstwriter.com/images/news.png');	
}

#boxContact{
	background-image: url('https://www.firstwriter.com/images/contact14.gif');	
}

.label{
	width:66px;
	height: 20px;
	background-color: rgba(0,0,0,0.6);
	color: white;
	margin-top:0px;
	margin-left:-3px;
	position:relative;
	float: left;
	line-height:18px;
	padding-left:0px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 13px;
	
  -webkit-transition: margin-top 0.5s ease, margin-left 0.5s ease, width 0.5s ease, height 0.5s ease, background-color 0.5s ease, font-size 0.5s ease, line-height 0.5s ease, padding-left 0.5s ease;
     -moz-transition: margin-top 0.5s ease, margin-left 0.5s ease, width 0.5s ease, height 0.5s ease, background-color 0.5s ease, font-size 0.5s ease, line-height 0.5s ease, padding-left 0.5s ease;
       -o-transition: margin-top 0.5s ease, margin-left 0.5s ease, width 0.5s ease, height 0.5s ease, background-color 0.5s ease, font-size 0.5s ease, line-height 0.5s ease, padding-left 0.5s ease;
      -ms-transition: margin-top 0.5s ease, margin-left 0.5s ease, width 0.5s ease, height 0.5s ease, background-color 0.5s ease, font-size 0.5s ease, line-height 0.5s ease, padding-left 0.5s ease;
          transition: margin-top 0.5s ease, margin-left 0.5s ease, width 0.5s ease, height 0.5s ease, background-color 0.5s ease, font-size 0.5s ease, line-height 0.5s ease, padding-left 0.5s ease;
}

.boxContainer:hover .label {
	margin-top:-20px;
	margin-left:0px;

  -webkit-transition: margin-top 0.5s ease, margin-left 0.5s ease;
     -moz-transition: margin-top 0.5s ease, margin-left 0.5s ease;
       -o-transition: margin-top 0.5s ease, margin-left 0.5s ease;
      -ms-transition: margin-top 0.5s ease, margin-left 0.5s ease;
          transition: margin-top 0.5s ease, margin-left 0.5s ease;

}

.label.two{
	height: 32px;
	line-height:14px;
	padding-top:3px;
}

.boxContainer:hover .label.two {
	margin-top:-35px;	
}

#searchBoxCloser {
	display:none;
}

#searchBoxCloser .topRightCloser.show {
	display:none;
}

#searchBoxHolder {
	height:66px;
	width:66px;
	float:left;
	overflow:visible;
	position:relative;
}

#boxContainerSearch ul{
	margin-left:0px;
	margin-bottom:0px;
}


.magnifyingGlass {
	height:54px;
	width:54px;
	position:absolute;
	margin-left:0px;

			  /*Animation*/
  -webkit-transition: -webkit-transform 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
     -moz-transition: -moz-transform 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
       -o-transition: -o-transform 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
          transition: transform 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;

}

.magnifyingGlassContainer {
	height:54px;
	width:54px;
	
			  /*Animation*/
  -webkit-transition: -webkit-transform 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
     -moz-transition: -moz-transform 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
       -o-transition: -o-transform 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
          transition: transform 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;

}

.boxContainer:hover .magnifyingGlassContainer {
	margin-left:3px;
	margin-top:3px;
	
   -webkit-transform: scale(1.2,1.2); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2); /* IE 9 */
     transform: scale(1.2,1.2);		
}

.searchOpen .magnifyingGlass {
	margin-left:230px;
	margin-top:3px;
	-ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
}

.circle {
	height:16px;
	width:16px;
	border-radius:15px;
	border:6px #787878 solid;
	position:absolute;
	top:8px;
	left:8px;

			  /*Animation*/
  -webkit-transition: border 0.5s ease;
     -moz-transition: border 0.5s ease;
       -o-transition: border 0.5s ease;
      -ms-transition: border 0.5s ease;
          transition: border 0.5s ease;
	
}

.searchOpen .circle {
	border:6px white solid;	
}

.handle{
	height:20px;
	width:6px;
	-ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
	background-color:#787878;
	border-radius:8px;
	position:absolute;
	top:28px;
	left:34px;

			  /*Animation*/
  -webkit-transition: background-color 0.5s ease;
     -moz-transition: background-color 0.5s ease;
       -o-transition: background-color 0.5s ease;
      -ms-transition: background-color 0.5s ease;
          transition: background-color 0.5s ease;
}

.searchOpen .handle{
	background-color:white;
}

.searchOpen{
	width:300px;
	height:320px;
	z-index:500;
	position:absolute;
	overflow:hidden;
	margin-top:25px;
	margin-left:-100px;

	-webkit-box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
	-moz-box-shadow: 4px 4px 10px rgba(0,0,0,0.3);	
	box-shadow: 4px 4px 10px rgba(0,0,0,0.3);

			  /*Animation*/
  -webkit-transition: width 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
     -moz-transition: width 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
       -o-transition: width 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
      -ms-transition: width 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
          transition: width 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
}


.searchOpen .box{
	width:294px;
	height:314px;
	border: 3px black solid;

background: rgb(74,74,74); /* Old browsers */
background: -moz-radial-gradient(80% 20px, ellipse cover,  rgba(74,74,74,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, 80% 20px, 0px, center center, 100%, color-stop(0%,rgba(74,74,74,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(80% 20px, ellipse cover,  rgba(74,74,74,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(80% 20px, ellipse cover,  rgba(74,74,74,1) 0%,rgba(0,0,0,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(80% 20px, ellipse cover,  rgba(74,74,74,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at 80% 20px,  rgba(74,74,74,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4a4a', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.searchOpen .label{
	margin-top:-317px;
	margin-left:3px;
	width:264px;
	background-color:transparent;
	font-size:30px;
	line-height:60px;
	padding-left:30px;
}

#searchItems {
	width:60px;
	height:0px;

			  /*Animation*/
  -webkit-transition: width 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
     -moz-transition: width 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
       -o-transition: width 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
      -ms-transition: width 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
          transition: width 0.5s ease, height 0.5s ease, margin-top 0.5s ease, margin-left 0.5s ease;
}

.searchOpen #searchItems{
	width:294px;
	height: 251px;
	background-color:white;
	position:absolute;
	top:66px;
	left:3px;
}

#searchItems a{
	display: block;
	box-sizing:border-box;
	padding-left:20px;
	width:100%;
	line-height:40px;
	text-decoration:none;
	color:black;
	border-bottom:1px black solid;
}

#searchItems a:hover{
	background:url('https://www.firstwriter.com/images/search-icon.png') right 15px top 10px / 20px 20px #787878 no-repeat;
	color:white;
}

#siteSearch {
	padding:5px 20px;
	font-style:italic;
	line-height:30px;
	background-color:gainsboro;
	height:77px;
	width:254px;
}

#siteSearch #q{
	width:214px;
}

#boxContainerSearchNarrow{
	display:none;
}

#follow {
	position:absolute;
	top:50px;
	color:white;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	box-sizing:border-box;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	overflow:hidden;

/* IE 8 */
	background: black\9;	
}

.followClosed {
	height:26px;
	margin-left:10px;
	background-color: rgba(0,0,0,0.5);
	width:125px;
	z-index:1;
	padding:2px 15px;
	border-radius:6px;

  -webkit-transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, background-color 0.5s ease, border-radius 0.5s ease, z-index 0.6s ease;
     -moz-transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, background-color 0.5s ease, border-radius 0.5s ease, z-index 0.6s ease;
       -o-transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, background-color 0.5s ease, border-radius 0.5s ease, z-index 0.6s ease;
      -ms-transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, background-color 0.5s ease, border-radius 0.5s ease, z-index 0.6s ease;
          transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, background-color 0.5s ease, border-radius 0.5s ease, z-index 0.6s ease;

}

.followClosed:hover {
	cursor:pointer;
	border:2px orange solid;
	padding:0px 13px;
}

.followOpen {
	height:485px;
	width:500px;
	margin-left:-200px;
	background-color: rgba(0,0,0,0.85);
	z-index:500;
	border-radius:15px;

  -webkit-transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, background-color 0.5s ease;
     -moz-transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, background-color 0.5s ease;
       -o-transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, background-color 0.5s ease;
      -ms-transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, background-color 0.5s ease;
          transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, background-color 0.5s ease;

}

.followPageMask {
	width: 100%;
	height: 100%;
	z-index:490;	
}

#follow span {

  -webkit-transition: font-size 0.5s ease, width 0.5s ease, line-height 0.5s ease, background-color 0.5s ease, padding 0.5s ease;
     -moz-transition: font-size 0.5s ease, width 0.5s ease, line-height 0.5s ease, background-color 0.5s ease, padding 0.5s ease;
       -o-transition: font-size 0.5s ease, width 0.5s ease, line-height 0.5s ease, background-color 0.5s ease, padding 0.5s ease;
      -ms-transition: font-size 0.5s ease, width 0.5s ease, line-height 0.5s ease, background-color 0.5s ease, padding 0.5s ease;
          transition: font-size 0.5s ease, width 0.5s ease, line-height 0.5s ease, background-color 0.5s ease, padding 0.5s ease;

}

.followClosed span{
	line-height:22px;	
	display:inline-block;
	float:left;
	margin-right:5px;
	font-size: 14px;
	padding: 0px;
}

.followClosed span:after{
	content:":";
}

.followOpen span{
	font-size:30px;
	line-height:45px;	
	display:inline-block;
	float:left;
	margin-right:5px;
	padding: 15px 30px 5px 30px;
}

.headerSocMedIcon {

  -webkit-transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, margin-top 0.5s ease;
     -moz-transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, margin-top 0.5s ease;
       -o-transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, margin-top 0.5s ease;
      -ms-transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, margin-top 0.5s ease;
          transition: height 0.5s ease, width 0.5s ease, margin-left 0.5s ease, margin-top 0.5s ease;

}

.followClosed .headerSocMedIcon {
	width:18px;
	height:18px;
	margin:2px 0px 4px 3px;
	float:left;
	position:relative;
}

.followOpen .headerSocMedIcon {
	width:90px;
	height:90px;
	margin:2px 0px 4px 3px;
	float:left;
	position:absolute;
}

.followOpen .headerSocMedIcon:nth-of-type(1) {
	margin-top:75px;
	margin-left:-130px;
}

.followOpen .headerSocMedIcon:nth-of-type(2) {
	margin-top:380px;
	margin-left:-130px;
}

.followOpen .headerSocMedIcon:nth-of-type(3) {
	margin-top:500px;
	margin-left:-130px;
}

.socMedBlock{
	box-sizing:border-box;
	height:auto;
	width:535px;
	padding-left:155px;
	margin-top:45px;
	border-top:1px #787878 solid;
}

#facebook{
	margin-top:60px;
	margin-left:-35px;
	height:260px;
}

#twitter{
	height:73px;
	padding-top:40px;
}

#googlePlus{
	padding-top:10px;
}

#newsletterSignUp{
/*Note - this is used in the javascript for testing if the wide or narrow CSS is applied - position must stay absolute for test to work - if changed change javascript also*/
	border-radius: 10px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:14px;
	font-weight:lighter;
	color: #787878;
	position: absolute;
	top: 6px;
	outline: none;
	overflow: hidden;
	right:45%;


/* IE 8 */
	background: white\9;
}

.newsletterSignUpClosed {
	width: 295px;	
	margin-right:-120px;
	height: 38px;
	background-color: rgba(255,255,255,0.7);
	margin-top: 0px;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

			  /*Animation*/
  -webkit-transition: margin-right 0.5s ease, height 0.5s ease, width 0.5s ease, background-color 0.5s ease, margin-top 0.5s ease, z-index 0s ease 0.5s;
     -moz-transition: margin-right 0.5s ease, height 0.5s ease, width 0.5s ease, background-color 0.5s ease, margin-top 0.5s ease, z-index 0s ease 0.5s;
       -o-transition: margin-right 0.5s ease, height 0.5s ease, width 0.5s ease, background-color 0.5s ease, margin-top 0.5s ease, z-index 0s ease 0.5s;
      -ms-transition: margin-right 0.5s ease, height 0.5s ease, width 0.5s ease, background-color 0.5s ease, margin-top 0.5s ease, z-index 0s ease 0.5s;
          transition: margin-right 0.5s ease, height 0.5s ease, width 0.5s ease, background-color 0.5s ease, margin-top 0.5s ease, z-index 0s ease 0.5s;

}

.newsletterSignUpOpen {
	width: 700px;
	height: 450px;
	background-color: rgba(255,255,255,1);
	-webkit-box-shadow: 2px 2px 20px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 20px rgba(0,0,0,0.5);	
	box-shadow: 2px 2px 20px rgba(0,0,0,0.5);
	margin-top: 50px;
	margin-right:-100px;
	z-index: 500;

			  /*Animation*/
  -webkit-transition: margin-left 0.5s ease, height 0.5s ease, width 0.5s ease, background-color 0.5s ease, margin-top 0.5s ease;
     -moz-transition: margin-left 0.5s ease, height 0.5s ease, width 0.5s ease, background-color 0.5s ease, margin-top 0.5s ease;
       -o-transition: margin-left 0.5s ease, height 0.5s ease, width 0.5s ease, background-color 0.5s ease, margin-top 0.5s ease;
      -ms-transition: margin-left 0.5s ease, height 0.5s ease, width 0.5s ease, background-color 0.5s ease, margin-top 0.5s ease;
          transition: margin-left 0.5s ease, height 0.5s ease, width 0.5s ease, background-color 0.5s ease, margin-top 0.5s ease;

}

.newsletterSignUpOpen.extra {
	height: 650px;
}

#newsletterSignUpInner {
	position: absolute;
	width: 700px;

			  /*Animation*/
  -webkit-transition: margin-top 0.5s ease;
     -moz-transition: margin-top 0.5s ease;
       -o-transition: margin-top 0.5s ease;
      -ms-transition: margin-top 0.5s ease;
          transition: margin-top 0.5s ease;

}

.newsletterSignUpClosed #newsletterSignUpInner {
	margin-top: -70px;
	margin-left: -15px;
}

#newsletterSignUp h1, #newsletterSignUp .h1 {
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 30px;
	font-weight: lighter;
	color:#787878;	
}

#newsletterSignUpInner #heading {
	height: 45px;
	border-bottom-style:solid;
	border-bottom-color:#787878;
	border-bottom-width:1px;
	width: 700px;
	padding: 15px 30px 5px 30px;
	text-align: left;
	display:block;
}

.close {
	width: 20px;
	height: 20px;
	border-radius: 20px;
	border-style:solid;
	border-width: 2px;
	position: absolute;
	right: 20px;
	top:10px;
	padding-left: 0px;
	padding-right: 0px;
	cursor:pointer;
	overflow: hidden;
	border-color: #787878;
	background-color:#787878;

			  /*Animation*/
  -webkit-transition: margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease;
     -moz-transition: margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease;
       -o-transition: margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease;
      -ms-transition: margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease;
          transition: margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease;

}

.close:hover{
	border-color: orange;
	background-color: white;
	width: 24px;
	height: 24px;
	margin-right: -2px;
	margin-top:-2px;
}

.close .side {
	width: 0px;
	height: 0px;
	border: 10px solid transparent;	
	position: absolute;
	top: 0px;
	left: 0px;
	margin-top: 0px;
	margin-left: 0px;

			  /*Animation*/
  -webkit-transition: margin-top 0.5s ease, margin-left 0.5s ease, border 0.5s ease;
     -moz-transition: margin-top 0.5s ease, margin-left 0.5s ease, border 0.5s ease;
       -o-transition: margin-top 0.5s ease, margin-left 0.5s ease, border 0.5s ease;
      -ms-transition: margin-top 0.5s ease, margin-left 0.5s ease, border 0.5s ease;
          transition: margin-top 0.5s ease, margin-left 0.5s ease, border 0.5s ease;
}

.close:hover .side{
	border: 12px solid transparent;		
}

.close .side.top{
	border-top-color:white;
	margin-top: -1px;
}

.close:hover .side.top{
	border-top-color:orange;
	margin-top: -2px;
}

.close .side.left{
	border-left-color:white;
	margin-left: -1px;
}

.close:hover .side.left{
	border-left-color:orange;
	margin-left: -2px;
}

.close .side.right{
	border-right-color:white;
	margin-left: 1px;
}

.close:hover .side.right{
	border-right-color:orange;
	margin-left: 2px;
}

.close .side.bottom{
	border-bottom-color:white;
	margin-top: 1px;
}

.close:hover .side.bottom{
	border-bottom-color:orange;
	margin-top: 2px;
}


#newsletterSignUpInner #form {
	height: 45px;
	width: 700px;
	padding-top: 10px;
	padding-bottom: 0px;
	text-align: left;
	display:block;
	padding-left: 30px;
	padding-right: 30px;
}


.newsletterSignUpClosed #newsletterSignUpInner #inputs {
	width: 112px;
	height: 14px; 
	padding: 3px 0px;
	float: left;
	overflow: hidden;	

			  /*Animation*/
  -webkit-transition: width 0.5s ease;
     -moz-transition: width 0.5s ease;
       -o-transition: width 0.5s ease;
      -ms-transition: width 0.5s ease;
          transition: width 0.5s ease;

}

.newsletterSignUpOpen #newsletterSignUpInner #inputs {
	width: 175px;
	height: 14px; 
	padding: 3px 0px;
	float: left;	
	overflow: hidden;	

			  /*Animation*/
  -webkit-transition: width 0.5s ease;
     -moz-transition: width 0.5s ease;
       -o-transition: width 0.5s ease;
      -ms-transition: width 0.5s ease;
          transition: width 0.5s ease;

}

#newsletterSignUpInner #inputs a {
	color:#787878;
	text-decoration:none;
}

#newsletterSignUpInner #inputs a:hover {
	text-decoration:underline;
}

.newsletterSignUpClosed #newsletterSignUpInner #inputs a:after {
	content: "Free Newsletter: ";
}

.newsletterSignUpOpen #newsletterSignUpInner #inputs a:after {
	content: "Enter your email address: ";
}

#fwnSignUpEmail{
	box-sizing:content-box;
}

input.transparent { 
	color:black;
    border: 2px solid #787878; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
    font-size: 12px; 
    padding: 2px 5px; 
    outline: 0; 
    -webkit-appearance: none; 
    background-color: rgba(180,180,180,0.5);
    margin: 2px;

			  /*Animation*/
  -webkit-transition: width 0.5s ease;
     -moz-transition: width 0.5s ease;
       -o-transition: width 0.5s ease;
      -ms-transition: width 0.5s ease;
          transition: width 0.5s ease;
}

::-webkit-input-placeholder {
   color: gray;
   font-style:italic;
}

:-moz-placeholder { /* Firefox 18- */
   color: gray;  
   font-style:italic;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: gray;  
   font-style:italic;
}

input:-ms-input-placeholder {  
   color: gray;  
   font-style:italic;
}

.offSelect{
	color:gray;
	font-style:italic;
}

.offSelect:focus{
	color:black;
	font-style:normal;
}

.onSelect{
	color: black;
	font-style:normal;
}


input.transparent:hover { 
    border-color: orange; 
} 

input.transparent:focus { 
    border-color: orange; 
	color: black;
} 

input.join{
	cursor:pointer;
	color:white;
    border: 2px solid #319ACE; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
    font-size: 12px; 
    padding: 2px 7px; 
    outline: 0; 
    -webkit-appearance: none; 
    background-color: #319ACE;
    position:relative;
    margin:2px;
}

input.join:hover{
    border: 2px solid orange; 
}

input.join:active{
	background-color:orange;
}

.newsletterSignUpClosed input.transparent {
	width: 90px;
}

.newsletterSignUpOpen input.transparent {
	width: 250px;
}

#newsletterSignUpTextWrap {
	margin-top: -8px;
	border-top-style:solid;
	border-top-color:#787878;
	border-top-width:1px;
	padding-top: 15px;
	background-color: white;
	padding-left: 30px;
	padding-right: 30px;
	display: block;
	width: 640px;
	position:relative;
}

#newsletterSignUpText {
	width: 410px;
	text-align: left;
	float: left;
	padding-right: 30px;
	background:white;
}

#newsletterSignUpText p {
	margin-bottom: 10px;
}

#newsletterImage {
	width: 200px;
	height: 200px;
	float: left;
	background: black;
}

#newsletterSignUpText ul {
	list-style-type:none;
	border-top-style:dashed;
	border-top-width: 1px;
	border-top-color: #787878;
	margin-top: 25px;
	width: 250px;
}

#newsletterSignUpText ul li {
	border-bottom-style:dashed;
	border-bottom-width: 1px;
	border-bottom-color: #787878;	
	height: 30px;
}

#newsletterSignUpText ul li a {
	line-height: 30px;
	text-decoration: none;
	display:block;
	width: 235px;
	color: #787878;
	padding-left: 15px;
	border-style: solid;
	border-width: 1px;
	border-color: transparent;
	margin-top: -1px;
}

#newsletterSignUpText ul li a:hover {
	background-color:#319ACE;
	color: white;
	border-color: #319ACE;
}

#newsletterSignUpResultWrap {
	text-align: left;
	display:block;
	padding-left: 30px;
	padding-right: 30px;
	height: 210px;

	background-image:url('https://www.firstwriter.com/images/loadingGrey.gif'); 
	background-repeat: no-repeat; 
	background-position:center center; 
	background-attachment:local;

	overflow: hidden;

				  /*Animation*/
  -webkit-transition: margin-bottom 0.5s ease;
     -moz-transition: margin-bottom 0.5s ease;
       -o-transition: margin-bottom 0.5s ease;
      -ms-transition: margin-bottom 0.5s ease;
          transition: margin-bottom 0.5s ease;

}

.newsletterSignUpResultWrapClosed{
	margin-bottom: -218px;
}

.newsletterSignUpResultWrapOpen{
	margin-top: -8px;
	margin-bottom: 0px;
	border-top-style:solid;
	border-top-color:#787878;
	border-top-width:1px;
}

#newsletterSignUpFrame {
	width: 100%;
	border: none;
	overflow: hidden;
	background-color: white;

}

.newsletterSignUpResultWrapClosed #newsletterSignUpFrame{
	height:0px;
}

.newsletterSignUpResultWrapOpen #newsletterSignUpFrame{
	height:200px;
				  /*Animation*/
  -webkit-transition: height 0.5s ease;
     -moz-transition: height 0.5s ease;
       -o-transition: height 0.5s ease;
      -ms-transition: height 0.5s ease;
          transition: height 0.5s ease;
}

#newsletterSignUpResult {
	background-color: white;
}

#newsletterSignUpResultWrap h1, #newsletterSignUpResultWrap .h1{
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 25px;
	font-weight: lighter;
	color:#787878;	
	margin-top: 10px;	
}

#newsletterSignUpResultWrap p {
	margin-bottom: 10px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:14px;
	font-weight:lighter;
	color: #757575;
	padding-top: 12px;
}




#topBar {
	height: 40px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:20px;
	font-weight:lighter;
	color: white;

	
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

#leftBar {
    float: left;
    width: 50%;
    
    	  /*Gradient*/
  background: #319ACE; /* Old browsers */
  background: -moz-linear-gradient(top, #5EB0D9 0%, #319ACE 44%, #25769C 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5EB0D9), color-stop(44%,#319ACE), color-stop(100%,#25769C)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #5EB0D9 0%,#319ACE 44%,#25769C 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #5EB0D9 0%,#319ACE 44%,#25769C 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #5EB0D9 0%,#319ACE 44%,#25769C 100%); /* IE10+ */
  background: linear-gradient(top, #5EB0D9 0%,#319ACE 44%,#25769C 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5EB0D9', endColorstr='#25769C',GradientType=0 ); /* IE6-9 */

}


#leftBar span {
	margin-left: 20px;
	line-height: 40px;
}

#midBarContainer {
	width: 50%;
	min-width: 400px;
	position: absolute;
	left: 0px;
	height: 0px;
	z-index:55;

				  /*Animation*/
  -webkit-transition: margin-top 0.5s ease, border-top-color 0.5s ease;
     -moz-transition: margin-top 0.5s ease, border-top-color 0.5s ease;
       -o-transition: margin-top 0.5s ease, border-top-color 0.5s ease;
      -ms-transition: margin-top 0.5s ease, border-top-color 0.5s ease;
          transition: margin-top 0.5s ease, border-top-color 0.5s ease;
}

}

#midBarContainer.low {
	margin-top:0px;
}

#midBarContainer.high {
	margin-top:-40px;
}


#midBar {
	position: relative;
	width: 0px;
	margin-left: -55px;
	cursor: pointer;
	left:100%;
	height: 0px;
	top:-126px;
	
				  /*Animation*/
  -webkit-transition: margin-top 0.3s ease, border-top-color 0.5s ease;
     -moz-transition: margin-top 0.3s ease, border-top-color 0.5s ease;
       -o-transition: margin-top 0.3s ease, border-top-color 0.5s ease;
      -ms-transition: margin-top 0.3s ease, border-top-color 0.5s ease;
          transition: margin-top 0.3s ease, border-top-color 0.5s ease;
}

.midBarOff {
	border: 55px solid transparent;
	border-top-color: #787878;	
	border-bottom: 0px;
	margin-top: 0px;
}

.midBarOff:hover {
	border: 55px solid transparent;
	border-top-color: orange;	
	border-bottom: 0px;
	margin-top: 5px;
}

.midBarOn {
	border: 55px solid transparent;
	border-top-color: orange;	
	border-bottom: 0px;
	margin-top: 5px;
}

#midBarLeftMask {
	width:55px;
	height: 60px;
	position: relative;
	left: 100%;
	margin-left: -76px;
    -ms-transform: skew(45deg,0deg); /* IE 9 */
    -webkit-transform: skew(45deg,0deg); /* Chrome, Safari, Opera */
    transform: skew(45deg,0deg);	
    z-index:2;
}

#midBarRightMask {
	width:55px;
	height: 60px;
	position: relative;
	left: 100%;	
	top:-60px;
	margin-left: 22px;
    -ms-transform: skew(-45deg,0deg); /* IE 9 */
    -webkit-transform: skew(-45deg,0deg); /* Chrome, Safari, Opera */
    transform: skew(-45deg,0deg);	
    z-index:2;
}

.midBarInner {
	height: 0px;
	width: 0px;
	border: 50px solid transparent;
	border-top-color: white;
	border-bottom: 0px;
	margin-left: -50px;
	position: relative;
	left:100%;
	top:-108px;
	
				  /*Animation*/
  -webkit-transition: margin-top 0.5s ease;
     -moz-transition: margin-top 0.5s ease;
       -o-transition: margin-top 0.5s ease;
      -ms-transition: margin-top 0.5s ease;
          transition: margin-top 0.5s ease;

}

#midBar:hover .midBarInner {
	border-top-color:white;
	cursor: pointer;
	overflow:visible;
	
	
			  /*Animation*/
  -webkit-transition: margin-top 0.5s ease;
     -moz-transition: margin-top 0.5s ease;
       -o-transition: margin-top 0.5s ease;
      -ms-transition: margin-top 0.5s ease;
          transition: margin-top 0.5s ease;
}

.midBarShadow {
	height: 0;
	width: 0px;
	opacity:0.2;
	filter:alpha(opacity=20); /* For IE8 and earlier */
	border: 55px solid transparent;
	border-top-color: black;
	border-bottom: 0px;
	margin-left: -52px;
	position: relative;
	top:-53px;
	
				  /*Animation*/
  -webkit-transition: margin-left 0.3s ease;
     -moz-transition: margin-left 0.3s ease;
       -o-transition: margin-left 0.3s ease;
      -ms-transition: margin-left 0.3s ease;
          transition: margin-left 0.3s ease;

}

.midBarOff:hover .midBarShadow, .midBarOn .midBarShadow {
	cursor: pointer;
	margin-left: -55px;
	opacity:0;
	filter:alpha(opacity=0); /* For IE8 and earlier */

	
				  /*Animation*/
  -webkit-transition: margin-left 0.3s ease, opacity 0.3s ease;
     -moz-transition: margin-left 0.3s ease, opacity 0.3s ease;
       -o-transition: margin-left 0.3s ease, opacity 0.3s ease;
      -ms-transition: margin-left 0.3s ease, opacity 0.3s ease;
          transition: margin-left 0.3s ease, opacity 0.3s ease;
}

.menuLineWrap {
	position: relative;
	margin-top: -45px;	
	margin-left: -17px;

  -webkit-transition: opacity 0.5s ease;
     -moz-transition: opacity 0.5s ease;
       -o-transition: opacity 0.5s ease;
      -ms-transition: opacity 0.5s ease;
          transition: opacity 0.5s ease;
}

.midBarOn .menuLineWrap {
	opacity:0;
	filter:alpha(opacity=0); /* For IE8 and earlier */	
}

.menuLineWrap .menuLine {
	height: 4px;
	background: #787878;
	width: 27px;
	margin:4px;
	border-radius:2px;

			  /*Animation*/
  -webkit-transition: background 0.5s ease;
     -moz-transition: background 0.5s ease;
       -o-transition: background 0.5s ease;
      -ms-transition: background 0.5s ease;
          transition: background 0.5s ease;

}

.midBarOff:hover .menuLine, .midBarOn .menuLine {
	background: orange;	
}

#topMenuCloser {
	width: 26px;
	height: 26px;
	border-radius: 26px;
	border-style:solid;
	border-width: 2px;
	position: absolute;
	right: -16px;
	top:-45px;
	cursor:pointer;
	overflow: hidden;
	border-color: orange;
	background-color:white;
	color: orange;
	font-size: 26px;
	font-weight:bold;
	line-height:20px;
	text-align: center;

			  /*Animation*/
  -webkit-transition: color 0.5s ease, margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;
     -moz-transition: color 0.5s ease, margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;
       -o-transition: color 0.5s ease, margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;
      -ms-transition: color 0.5s ease, margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;
          transition: color 0.5s ease, margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;

}

.midBarOn:hover #topMenuCloser {
	background-color: orange;
	color:white;
}

.midBarOff #topMenuCloser {
	opacity:0;
	filter:alpha(opacity=0); /* For IE8 and earlier */	
}

.xline {
	position: absolute;
	top:50%;
	height: 4px;
	margin-top:-2px;
	left: 50%;
	width: 20px;
	margin-left:-10px;
	background-color: orange;
	border-radius:2px;

			  /*Animation*/
  -webkit-transition: background-color 0.5s ease;
     -moz-transition: background-color 0.5s ease;
       -o-transition: background-color 0.5s ease;
      -ms-transition: background-color 0.5s ease;
          transition: background-color 0.5s ease;
}

.midBarOn:hover .xline {
	background-color: white;
}

.xline.one {
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.xline.two {
	-ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
}

.topRightCloser {
	width: 26px;
	height: 26px;
	border-radius: 26px;
	border-style:solid;
	border-width: 2px;
	float: right;
	right: 25px;
	top:15px;
	cursor:pointer;
	overflow: hidden;
	border-color: orange;
	background-color:white;
	color: orange;
	font-size: 26px;
	font-weight:bold;
	line-height:20px;
	text-align: center;
	position: relative;
	z-index:1;

			  /*Animation*/
  -webkit-transition: color 0.5s ease, margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;
     -moz-transition: color 0.5s ease, margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;
       -o-transition: color 0.5s ease, margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;
      -ms-transition: color 0.5s ease, margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;
          transition: color 0.5s ease, margin-top 0.5s ease, margin-right 0.5s ease, width 0.5s ease, height 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;

}

.topRightCloser:hover {
	background-color: orange;
	color:white;
}

.topRightCloser:hover .xline {
	background-color: white;
}

.topRightCloser16{
	width:30px;
	height:30px;
	border-radius:15px;
	background: url('https://www.firstwriter.com/images/negative.png') center center / 60% 60% no-repeat, #B4B4B4;
	position:absolute;
	top:10px;
	right:10px;
	cursor:pointer;
}

.topRightCloser16:hover{
	background: url('https://www.firstwriter.com/images/negative.png') center center / 60% 60% no-repeat, orange;
}

#rightBar {
    float: right;
    width: 50%;
    text-align:right;
    
    	  /*Gradient*/
  background: #65A600; /* Old browsers */
  background: -moz-linear-gradient(top, #99CA28 0%, #65A600 44%, #4B7D00 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99CA28), color-stop(44%,#65A600), color-stop(100%,#4B7D00)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #99CA28 0%,#65A600 44%,#4B7D00 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #99CA28 0%,#65A600 44%,#4B7D00 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #99CA28 0%,#65A600 44%,#4B7D00 100%); /* IE10+ */
  background: linear-gradient(top, #99CA28 0%,#65A600 44%,#4B7D00 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99CA28', endColorstr='#4B7D00',GradientType=0 ); /* IE6-9 */

}

#topBarContainer {
	position:relative;
	z-index:2;
}

#topMenu{
	overflow:hidden;
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:normal;
	color:white;
	margin-left:0px;
	position:absolute;
	width:100%;

	background-color: black;
	background-color: rgba(0,0,0,0.85);

  /*Animation*/
  -webkit-transition: height 0.5s ease, margin-top 0.5s ease, margin-bottom 0.5s ease;
     -moz-transition: height 0.5s ease, margin-top 0.5s ease, margin-bottom 0.5s ease;
       -o-transition: height 0.5s ease, margin-top 0.5s ease, margin-bottom 0.5s ease;
      -ms-transition: height 0.5s ease, margin-top 0.5s ease, margin-bottom 0.5s ease;
          transition: height 0.5s ease, margin-top 0.5s ease, margin-bottom 0.5s ease;
	
}

#topMenu p{
	font-size:13px;
	line-height:normal;
}

.topMenuClosed{
	height:0px;
}

.topMenuOpen{
	height:248px;
	margin-top:-60px;
	
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

#topMenu input, #topMenu select, #topMenu textarea{
	outline:none;
	width:95%;
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
	font-family:Arial, Helvetica, sans-serif;
    font-size: 14px; 
    padding: 4px 10px; 
    margin: 0px 0px 20px 0px;
    border: 1px gainsboro solid; 
    background-color: #787878;
    color:white;
    
    -webkit-box-shadow: 2px 2px 5px #4A4A4A inset, 0px 0px 4px 4px #4A4A4A;
    -moz-box-shadow: 2px 2px 5px #4A4A4A inset, 0px 0px 4px 4px #4A4A4A;
    box-shadow: 2px 2px 5px #4A4A4A inset, 0px 0px 4px 4px #4A4A4A;
}

#topMenu input:hover, #topMenu select:hover, #topMenu textarea:hover{
    -webkit-box-shadow: 2px 2px 5px #4A4A4A inset, 0px 0px 4px 4px #b4b4b4;
    -moz-box-shadow: 2px 2px 5px #4A4A4A inset, 0px 0px 4px 4px #b4b4b4;
    box-shadow: 2px 2px 5px #4A4A4A inset, 0px 0px 4px 4px #b4b4b4;
}

#topMenu input:focus, #topMenu select:focus, #topMenu textarea:focus{
    -webkit-box-shadow: 2px 2px 5px #4A4A4A inset, 0px 0px 4px 4px orange;
    -moz-box-shadow: 2px 2px 5px #4A4A4A inset, 0px 0px 4px 4px orange;
    box-shadow: 2px 2px 5px #4A4A4A inset, 0px 0px 4px 4px orange;
    border: 1px orange solid; 
}

#topMenu input::-webkit-input-placeholder {
   color:#333333;
   font-style:italic;
}

#topMenu textarea::-webkit-input-placeholder {
   color:#333333;
   font-style:italic;
}

#topMenu input:-moz-placeholder { /* Firefox 18- */
   color:black;
   font-style:italic;
}

#topMenu textarea:-moz-placeholder { /* Firefox 18- */
   color:black;
   font-style:italic;
}

#topMenu input::-moz-placeholder {  /* Firefox 19+ */
   color:black;
   font-style:italic;
}

#topMenu textarea::-moz-placeholder {  /* Firefox 19+ */
   color:black;
   font-style:italic;
}

#topMenu input:-ms-input-placeholder {  
   color:#333333;
   font-style:italic;
}

#topMenu textarea:-ms-input-placeholder {  
   color:#333333;
   font-style:italic;
}

#topMenu textarea{
	padding:15px;
	width: 85%;
	resize:none;
	height: 100px;
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
	overflow-y:scroll;
}

#topMenu select {
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
}

#topMenu .offSelect{
	color:#333333;
	font-style:italic;
}

#topMenu .offSelect:focus{
	color:white;
	font-style:normal;
}

#topMenu .onSelect{
	color: white;
	font-style:normal;
}

#topMenu .submit{
	background-color:orange;
	color:white;
	width: auto;
	border:none;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:18px;
	font-weight:lighter;
	cursor: pointer;
    padding: 5px 15px; 
    -webkit-box-shadow: 2px 2px 5px #333333;
    -moz-box-shadow: 2px 2px 5px #333333;
    box-shadow: 2px 2px 5px #333333;
    float:left;
}

#topMenu .submit:hover{
    -webkit-box-shadow: 0px 0px 4px 4px #b4b4b4;
    -moz-box-shadow: 0px 0px 4px 4px #b4b4b4;
    box-shadow: 0px 0px 4px 4px #b4b4b4;

}

#radioButtons {
	width:100%;
	height:40px;
}

#topMenu input[type=radio] {
	float:left;
	width:auto;
    -webkit-box-shadow: none;
    cursor:pointer;
}

#topMenu label{
	float: left;
	margin:0px 20px 0px 5px;
	cursor:pointer;
	color: #787878;
}

#topMenu label:hover, #topMenu input[type=radio]:hover + label{
	color:#b4b4b4;
}

#topMenu input[type=radio]:checked + label{
	color: white;
}

#topMenu input[type=radio]:focus + label{
	color: orange;
}


#menuCards {
	position: relative;
}

.menuCard .cardHeading{
	line-height: 30px;
	border-color: #B4B4B4; 
	border-style: none none dashed none; 
	border-width: 1px;
	padding: 0px 5px 0px 5px;
	height:30px;
	width: 28%;
	cursor:pointer;
	margin-left:20px;
}

.menuCard:hover .cardHeading {
	background:#666666;
	color:white;
}

.menuCard.selected .cardHeading {
	background:orange;
	color:black;
}

.menuCard .cardContent {
	position: absolute;
	top: 30px;
	left: 50%;
	opacity: 0;
	filter: alpha(opacity=0);
	width: 70%;
	height: 100%;
	z-index:0;
	padding: 0px 50px 20px 50px;

			  /*Animation*/
  -webkit-transition: left 0.5s ease, opacity 0.5s ease;
     -moz-transition: left 0.5s ease, opacity 0.5s ease;
       -o-transition: left 0.5s ease, opacity 0.5s ease;
      -ms-transition: left 0.5s ease, opacity 0.5s ease;
          transition: left 0.5s ease, opacity 0.5s ease;

}

#topMenuMask {
/*The purpose of this is to stop .menuCard headings being selected randomly by mouse hovers at the right of topMenu*/
	position: absolute;
	top: 0px;
	left: 30%;
	width: 70%;
	height: 100%;
	opacity: 0;
	filter: alpha(opacity=0);
	z-index:5;
	background:black;
}

.menuCard.selected .cardContent {	
	left: 30%;
	opacity:1;
	filter: alpha(opacity=100);
	z-index:10;
}

#cardDashboard{
	display:none;
}

#cardSettings{
	display:none;
}

.cardContent h1, .cardContent .h1 {
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 30px;
	font-weight: lighter;
	color:orange;	
	margin-bottom: 15px;
}

.cardContent h2 {
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 20px;
	font-weight: lighter;
	color:orange;	
	margin-top: 0px;
	margin-bottom: 10px;
}


.cardContent .cardContentBlock{
	padding:0px;
	min-width: 200px;
	width: 38%;	
	float: left;
	margin-right:60px;
}

.cardContent .cardContentBlock.high{
	margin-top: -50px;
}

.cardContentBlock a {
	color: orange;
}

.cardContentBlock.dashFeature {
	height:240px;
	margin-top: -75px;
	overflow:hidden;
	opacity:1;
	filter: alpha(opacity=100);
	left:46%;
	position:absolute;
	z-index:6;

			  /*Animation*/
  -webkit-transition: left 0.5s ease, opacity 0.5s ease;
     -moz-transition: left 0.5s ease, opacity 0.5s ease;
       -o-transition: left 0.5s ease, opacity 0.5s ease;
      -ms-transition: left 0.5s ease, opacity 0.5s ease;
          transition: left 0.5s ease, opacity 0.5s ease;

}

.cardContentBlock.dashFeature.hidden {
	opacity:0;
	filter: alpha(opacity=0);
	left:100%;
}

.cardContent ul{
	border-color: #B4B4B4; 
	border-style: none none dashed none; 
	border-width: 1px;
	list-style-type: none;
	padding:0px;
	margin:0px;
}


.cardContent li{
	line-height: 30px;
	border-color: #B4B4B4; 
	border-style: dashed none none none; 
	border-width: 1px;
	padding-left:5px;
	padding-right:5px;
	cursor:pointer;
}

.cardContent li:hover{
	background:#666666;
	color:white;
}

.cardContent li.selected{
	background:orange;
	color:black;
}

.cardContent li a{
	line-height:30px;
	width:100%;
	display: block;
	text-decoration: none;
	color:inherit;
}

.cardContent .text {
	padding:0px;
	min-width: 200px;
	width: 45%;	
	float: left;
	margin-right:20px;	
}

.cardContent p{
	margin: 0px 0px 15px 0px;
}

.cardContent .columns {
	width: 90%;
	
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;	
    
    -webkit-column-gap: 25px; /* Chrome, Safari, Opera */
    -moz-column-gap: 25px; /* Firefox */
    column-gap: 25px;
}

.cardContent .graphicWrapper {
	padding:0px;
	width: 40%;	
	margin-right:100px;
	position: absolute;
	left:42%;
	height: 208px;
	background-image:url('https://www.firstwriter.com/Magazine/issue32/images/issue-32-cover.jpg'); 
	background-size: contain;
	background-repeat:no-repeat;
	background-position:center;
	top: -10px;
}

@media screen and (min-width: 800px) and (max-width: 1009px) {
	.cardContent .graphicWrapper{
		height:108px;
		top:50px;
		margin-right:0px;
	}

}

.cardContent .graphic{
	padding:0px;
	min-width: 200px;
	width: 40%;	
	float: right;
	margin-right:20px;
}

.dashFeature h2{
	margin-left:7px;
}

.dashFeature .topRightCloser {
	display:none;
}

.dashFeature a{
	display:block;
	border-color: #B4B4B4; 
	border-style: none none dashed none; 
	border-width: 1px;
	padding: 8px 8px 9px 8px;
	color:white;
	text-decoration:none;
}

.dashFeature a:hover{
	background:#666666;
	color:white;	
}

.dashFeatureBox{
	border:1px gainsboro solid;
	overflow-x:hidden;
	overflow-y:scroll;
	height:162px;
	margin-left:7px;
	margin-right:7px;
	position:relative;
	top:0px;
	background-image:url('https://www.firstwriter.com/images/loadingOrangeBlack.gif'); 
	background-repeat: no-repeat; 
	background-position:center center; 
	background-attachment:local;	

    -webkit-box-shadow: 2px 2px 5px #4A4A4A inset, 0px 0px 4px 4px #4A4A4A;
    -moz-box-shadow: 2px 2px 5px #4A4A4A inset, 0px 0px 4px 4px #4A4A4A;
}

.dashFeatureBox .spacer{
	width:100%;
	height:30px;
	border:none;
}

.dashFeature a.moreLink {
	display:inline-block;
	border-color: none; 
	border-style: none; 
	border-width: none;
	padding: 0px;
	color:orange;
	text-decoration:none;
	margin:10px 20px 30px 20px;
}

.dashFeature a.moreLink:hover {
	color:orange;
	background:none;
	text-decoration:underline;	
}

.dashFeatureBox p {
	margin:15px;
}

.dashFeature span{
	white-space:nowrap;
	display:block;
	overflow:hidden;
	width:95%;
	text-overflow:ellipsis;
	color:#b4b4b4;
}

#dashboardRemindersBox div, #dashboardNotesBox div{
	border-color: #B4B4B4; 
	border-style: none none dashed none; 
	border-width: 1px;
}

#dashboardRemindersBox div a, #dashboardNotesBox div a{
	border:none;
}

#dashboardRemindersBox div span, #dashboardNotesBox div span{
	padding: 0px 8px;
}

#dashboardRemindersBox input, #dashboardNotesBox input{
	width:auto;
	border-radius:0px;
	margin: 8px 8px 9px 8px;
}

#topMenu .dashFeatureBox .buttonWrap {
	display:block;
	width:90%;
}

#topMenu .dashFeatureBox input[type=button]{

	margin: 10px 0px;
	font-size:12px;
	box-shadow:none;
	border-top-color:#787878;
	border-left-color: #787878;
	border-right-color: black;
	border-bottom-color: black;
	float: right;
	

background: rgb(120,120,120); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(120,120,120,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(120,120,120,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(120,120,120,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(120,120,120,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(120,120,120,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(120,120,120,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#787878', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}

#topMenu .dashFeatureBox input[type=button]:hover {
	cursor: pointer;

background: rgb(136,136,136); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(136,136,136,1) 0%, rgba(17,17,17,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(136,136,136,1)), color-stop(100%,rgba(17,17,17,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(136,136,136,1) 0%,rgba(17,17,17,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(136,136,136,1) 0%,rgba(17,17,17,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(136,136,136,1) 0%,rgba(17,17,17,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(136,136,136,1) 0%,rgba(17,17,17,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#111111',GradientType=0 ); /* IE6-9 */
	
}

#topMenu .dashFeatureBox input[type=button]:focus {
	color:black;
	background:orange;

	border-top-color:black;
	border-left-color: black;
	border-right-color: #787878;
	border-bottom-color: #787878;
	
}

#topMenu .leftButton {
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;

}

#topMenu .rightButton {
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}

.dashFeatureBox .overdue {
background: -moz-linear-gradient(left,  rgba(204,0,0,0.5) 0%, rgba(204,0,0,0) 5%, rgba(204,0,0,0) 95%, rgba(204,0,0,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(204,0,0,0.5)), color-stop(5%,rgba(204,0,0,0)), color-stop(95%,rgba(204,0,0,0)), color-stop(100%,rgba(204,0,0,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(204,0,0,0.5) 0%,rgba(204,0,0,0) 5%,rgba(204,0,0,0) 95%,rgba(204,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(204,0,0,0.5) 0%,rgba(204,0,0,0) 5%,rgba(204,0,0,0) 95%,rgba(204,0,0,0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(204,0,0,0.5) 0%,rgba(204,0,0,0) 5%,rgba(204,0,0,0) 95%,rgba(204,0,0,0.5) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(204,0,0,0.5) 0%,rgba(204,0,0,0) 5%,rgba(204,0,0,0) 95%,rgba(204,0,0,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80cc0000', endColorstr='#80cc0000',GradientType=1 ); /* IE6-9 */
}

.dashFeatureBox .today {
background: -moz-linear-gradient(left,  rgba(255,165,0,0.5) 0%, rgba(255,165,0,0) 5%, rgba(255,165,0,0) 95%, rgba(255,165,0,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,165,0,0.5)), color-stop(5%,rgba(255,165,0,0)), color-stop(95%,rgba(255,165,0,0)), color-stop(100%,rgba(255,165,0,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,165,0,0.5) 0%,rgba(255,165,0,0) 5%,rgba(255,165,0,0) 95%,rgba(255,165,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,165,0,0.5) 0%,rgba(255,165,0,0) 5%,rgba(255,165,0,0) 95%,rgba(255,165,0,0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,165,0,0.5) 0%,rgba(255,165,0,0) 5%,rgba(255,165,0,0) 95%,rgba(255,165,0,0.5) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(255,165,0,0.5) 0%,rgba(255,165,0,0) 5%,rgba(255,165,0,0) 95%,rgba(255,165,0,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffa500', endColorstr='#80ffa500',GradientType=1 ); /* IE6-9 */
}


/*CENTRE BAR */
/*====================================================================================*/

#centreBar{
			  /*Animation*/
  -webkit-transition: height 0.5s ease, margin-top 0.5s ease, background-color 0s ease;
     -moz-transition: height 0.5s ease, margin-top 0.5s ease, background-color 0s ease;
       -o-transition: height 0.5s ease, margin-top 0.5s ease, background-color 0s ease;
      -ms-transition: height 0.5s ease, margin-top 0.5s ease, background-color 0s ease;
          transition: height 0.5s ease, margin-top 0.5s ease, background-color 0s ease;
}

.centreBarOpen{
	height:350px;
	margin-top:-175px;
}

.centreBarNotes{
	background: url(https://www.firstwriter.com/subscriber/interactions/images/notesbackground.gif) right top/auto 250px no-repeat, #FFFF9A;
}

.centreBarNotes h1 {
	color:#993300;
	margin-top:20px;
	margin-bottom:10px;
}


.centreBarNotes input[type=button] {
	float:left;
	height: 40px;
	border: 3px #993300 solid;
	margin:10px 10px 10px 0px;
	color:white;
	background-color:#993300;
	cursor:pointer;
	padding:6px 12px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:15px;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

		  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;
}

.centreBarNotes input[type=button]:hover {
	background-color:#800000;
	border: 3px #800000 solid;	
	color:yellow;

   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		
}

.centreBarNotes input[type=button]:nth-of-type(2) {
	float:left;
	height: 40px;
	border: 3px #993300 solid;
	margin:10px;
	color:#993300;
	background-color:transparent;
	cursor:pointer;
	padding:6px 12px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:15px;
	font-weight:bold;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);

		  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;
}

.centreBarNotes input[type=button]:nth-of-type(2):hover {
	background-color:rgba(153,51,0,0.4);

   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		
}

.centreBarNotes h2 {
	margin-bottom:5px;
	color:#993300;
}

.centreBarNotes h2 a {
	color:#993300;
	text-decoration: none;
}

.centreBarNotes h2 a:hover {
	text-decoration:underline;
}

.centreBarNotes h3 {
	margin-bottom:5px;
	color:#993300;
}

.centreBarNotes p {
	margin-top:6px;
	margin-bottom:15px;	
}

.centreBarNotes #usernotes {
	resize:none;
	width:65%;
	height:120px;
	border-style:solid;
	border-width:3px;
	border-color:#993300;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	padding: 10px 20px 0px 20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	outline:none;

    -webkit-box-shadow: 2px 2px 5px #4A4A4A inset;
    -moz-box-shadow: 2px 2px 5px #4A4A4A inset;
    box-shadow: 2px 2px 5px #4A4A4A inset;
}

#editNoteReminder {
	width:300px;
	height:180px;
	position:absolute;
	left: 68%;
	top:64px;
}

#removeReminderButton{
	width: 180px;
	margin-top:20px;
}

#removeReminderButton.hidden {
	display:none;
}


#reminderdate{
	height:24px;
	width: 150px;
	border: 3px #993300 solid;
	color:#993300;
	background-color:transparent;
	cursor:pointer;
	padding:6px 12px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:15px;
	font-weight:bold;
	text-align:center;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);

		  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;
}

#reminderdate:hover {
	background-color:rgba(153,51,0,0.4);

   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		
}

.centreBarNotes .datepickr-calendar{
	top: -30px;
	left: -10px;
}

#noteCounter{
	color: #993300;
	display: block;
	padding:10px;
	padding-left:20px;
}

.centreBarReminder{
	background: url(https://www.firstwriter.com/images/reminders_background_right.jpg) right top/auto 350px no-repeat, url(https://www.firstwriter.com/images/reminders_background_left.jpg) left top/auto 350px no-repeat, white;
}

.centreBarReminder h1 {
	color:#25769C;
	margin-top:20px;
	margin-bottom:10px;
	text-shadow: 1px 1px white;
}

.centreBarReminder h2 {
	margin-bottom:5px;
}

.centreBarReminder h2 a {
	color:#25769C;
	text-decoration: none;
	text-shadow: 1px 1px white;
}

.centreBarReminder h2 a:hover {
	text-decoration:underline;
}

.centreBarReminder p {
	margin-top:6px;
	margin-bottom:15px;	
}

#centreBar .due {
	color:#CC6600;
	font-weight:bold;
}

#centreBar .overdue {
	color:white;
	font-weight:bold;
	background-color:#CC0000;
	padding:2px 6px 2px 6px;
}

.centreBarReminder input[type=button] {
	float:left;
	height: 40px;
	border: 3px #25769C solid;
	margin:10px 10px 10px 0px;
	color:white;
	background-color:#25769C;
	cursor:pointer;
	padding:6px 12px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:15px;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

		  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;
}

.centreBarReminder input[type=button]:hover {
	background-color: #1B536D;
	border: 3px #1B536D solid;	
	color:yellow;

   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		
}

.centreBarReminder input[type=button]:nth-of-type(1) {
	float:left;
	height: 40px;
	border: 3px #25769C solid;
	margin:10px;
	color:#25769C;
	background-color:transparent;
	cursor:pointer;
	padding:6px 12px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:15px;
	font-weight:bold;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);

		  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;
}

.centreBarReminder input[type=button]:nth-of-type(1):hover {
	background-color:#B5DBEE;

   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		
}

.reminderNote{
	border:1px brown solid;
	border-top-left-radius:20px;
	border-bottom-left-radius:20px;
	padding:15px 20px;
	margin:15px 0px 10px 0px;
	overflow-y:auto;
	max-height:80px;
	background: #FFFF99;

	-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
	-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);	
	box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

.centreBarNotes .reminderNote{
	background: white;
}

.scrollingBoxShadow {
	position: relative;
	width:calc(100% - 32px);
	height: 20px;
	margin-left:8px;
	margin-right:24px;
	margin-top:-21px;

	background: -webkit-radial-gradient(bottom left, 100% 100%,black,transparent);
	background: radial-gradient(100% 100% at bottom left, black,transparent);
	
}

.iconWrap {
	padding:0px;
	min-width: 200px;
	width: 40%;	
	margin-right:100px;
	position: absolute;
	left:44%;
	height: 200px;
	top: -6px;

	/* IE 8 */
	display:none\9;
}

.iconBox {
	border-style: solid;
	border-width: 5px;
	border-color: orange;
	height: 200px;
	width: 200px;
	border-radius: 25px;
	overflow: hidden;
	position: relative;
	left:50%;
	margin-left:-100px;
	
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top,  #000000 0%, #b4b4b4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#b4b4b4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #000000 0%,#b4b4b4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #000000 0%,#b4b4b4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #000000 0%,#b4b4b4 100%); /* IE10+ */
background: linear-gradient(to bottom,  #000000 0%,#b4b4b4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#b4b4b4',GradientType=0 ); /* IE6-9 */
	
			  /*Animation*/
  -webkit-transition: left 0.5s ease, opacity 0.5s ease;
     -moz-transition: left 0.5s ease, opacity 0.5s ease;
       -o-transition: left 0.5s ease, opacity 0.5s ease;
      -ms-transition: left 0.5s ease, opacity 0.5s ease;
          transition: left 0.5s ease, opacity 0.5s ease;

 }
 
.iconBox.hidden{
	filter: alpha(opacity=0);
	opacity:0;
	left:100%;
}

#speedo{
	top: 40px;
	left: 15px;

	/* IE 8 */
	display:none\9;
}

.speedo {
	width: 160px;
	height:80px;
	border-style:solid;
	border-width: 5px;
	border-color:white;
	border-top-left-radius: 160px;
	border-top-right-radius: 160px;
	position: absolute;

	/* IE 8 */
	display:none\9;
}

#speedoReflection{
	top: 150px;
	left:15px;
	
	opacity: 0.3;
	filter:alpha(opacity=30);


	-ms-transform: rotateX(180deg); /* IE 9 */
    -webkit-transform: rotateX(180deg); /* Chrome, Safari, Opera */
    transform: rotateX(180deg);

	/* IE 8 */
	display:none\9;
}

.speedoCentre {
	width: 40px;
	height:20px;
	background-color:white;
	border-top-left-radius: 40px;
	border-top-right-radius: 40px;
	position: absolute;
	bottom: 0px;
	left:50%;
	margin-left:-20px;	
}

.dotWrap{
	height: 140px;
	width: 10px;
	position: absolute;
	left: 50%;
	margin-left:-5px;
	top:-50px;
}

.dot {
	height: 10px;
	width: 10px;
	border-radius: 10px;
	background-color: white;
}

.dotWrap.one{
	-ms-transform: rotate(-70deg); /* IE 9 */
    -webkit-transform: rotate(-70deg); /* Chrome, Safari, Opera */
    transform: rotate(-70deg);
}

.dotWrap.two{
	-ms-transform: rotate(-50deg); /* IE 9 */
    -webkit-transform: rotate(-50deg); /* Chrome, Safari, Opera */
    transform: rotate(-50deg);
}

.dotWrap.three{
	-ms-transform: rotate(-30deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */
    transform: rotate(-30deg);
}

.dotWrap.four{
	-ms-transform: rotate(-10deg); /* IE 9 */
    -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
    transform: rotate(-10deg);
}

.dotWrap.five{
	-ms-transform: rotate(10deg); /* IE 9 */
    -webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
    transform: rotate(10deg);
}

.dotWrap.six{
	-ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg);
}

.dotWrap.seven{
	-ms-transform: rotate(50deg); /* IE 9 */
    -webkit-transform: rotate(50deg); /* Chrome, Safari, Opera */
    transform: rotate(50deg);
}

.dotWrap.eight{
	-ms-transform: rotate(70deg); /* IE 9 */
    -webkit-transform: rotate(70deg); /* Chrome, Safari, Opera */
    transform: rotate(70deg);
}

/* Chrome, Safari, Opera */
@-webkit-keyframes speedo {
    0%   {-webkit-transform: rotate(-50deg);}
    20%   {-webkit-transform: rotate(-10deg);}
    23%   {-webkit-transform: rotate(-45deg);}
    45% {-webkit-transform: rotate(10deg);}
    50% {-webkit-transform: rotate(15deg);}
    55% {-webkit-transform: rotate(25deg);}
    60% {-webkit-transform: rotate(20deg);}
    65% {-webkit-transform: rotate(25deg);}
    70% {-webkit-transform: rotate(20deg);}
    75% {-webkit-transform: rotate(18deg);}
    80% {-webkit-transform: rotate(25deg);}
    85% {-webkit-transform: rotate(23deg);}
    90% {-webkit-transform: rotate(30deg);}
    93% {-webkit-transform: rotate(20deg);}
    100% {-webkit-transform: rotate(-50deg);}
}

/* Standard syntax */
@keyframes speedo {
    0%   {transform: rotate(-50deg);}
    20%   {transform: rotate(-10deg);}
    23%   {transform: rotate(-45deg);}
    45% {transform: rotate(10deg);}
    50% {transform: rotate(15deg);}
    55% {transform: rotate(25deg);}
    60% {transform: rotate(20deg);}
    65% {transform: rotate(25deg);}
    70% {transform: rotate(20deg);}
    75% {transform: rotate(18deg);}
    80% {transform: rotate(25deg);}
    85% {transform: rotate(23deg);}
    90% {transform: rotate(30deg);}
    93% {transform: rotate(20deg);}
    100% {transform: rotate(-50deg);}
}

.dotWrap.needleWrap {
    -webkit-animation: speedo 10s; /* Chrome, Safari, Opera */
    animation: speedo 10s;

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;    

    -webkit-animation-delay: 0s;
    animation-delay: 0s;    

    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;	
	
}

.needle {
	height:0px;
	width:0px;
	border-style: solid;
	border-width:8px;
	border-color: transparent;
	border-bottom-color: white;
	border-bottom-width: 70px;
	margin-left:-4px;
	margin-top: -10px;
}


.wheel {
	width:60px;
	height: 60px;
	border-radius: 100px;
	border-style:solid;
	border-color: white;
	border-width: 30px;
	margin-top: 15px;
	margin-left:15px;

    -webkit-animation: cog 20s; /* Chrome, Safari, Opera */
    animation: cog 20s;

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;    

    -webkit-animation-delay: 0s;
    animation-delay: 0s;    

    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;	


}

.tooth {
	height: 150px;
	width: 30px;
	margin-left: 15px;
	margin-top: -45px;	
	position: absolute;
}

.toothTop {
	height: 20px;
	width: 30px;
	background-color:white;
}

.toothBottom {
	height: 20px;
	width: 30px;
	background-color:white;
	margin-top:110px;
}

.tooth.two {
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.tooth.three {
	-ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}

.tooth.four {
	-ms-transform: rotate(315deg); /* IE 9 */
    -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
    transform: rotate(315deg);
}

/* Chrome, Safari, Opera */
@-webkit-keyframes cog {
    0%   {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

/* Standard syntax */
@keyframes cog {
    0%   {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes cogReverse {
    0%   {-webkit-transform: rotate(360deg);}
    100% {-webkit-transform: rotate(0deg);}
}

/* Standard syntax */
@keyframes cogReverse {
    0%   {transform: rotate(360deg);}
    100% {transform: rotate(0deg);}
}


#cog1{
	-moz-transform: scale(0.8);
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);

	position: absolute;
	left: -23px;
	top: -25px;
}


#cog2{
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);
	
	position: absolute;
	left: 70px;
	top: 0px;
}

#cog2 .wheel {
    -webkit-animation: cogReverse 10s; /* Chrome, Safari, Opera */
    animation: cogReverse 10s;

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;    

    -webkit-animation-delay: 0s;
    animation-delay: 0s;    

    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;	
}

#cog3 {
	position: absolute;
	left: 40px;
	top: 100px;	
}

#cog3 .wheel {
	border-style: double;
}

#rightBar span {
	margin-right: 20px;
	line-height: 40px;
}

#navLeftBG{
	position:fixed;
	width:200px;
	height:100vh;
	background-color: #B5DBEE;	
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	z-index:-1;
}

#navLeft{
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.5;
	width: 200px;
	background-color: #B5DBEE;	
	float: left;
	
	/* IE 8 */
	display:table-cell\9;
	float:none\9;
}

#navRightBG{
	position:fixed;
	right:0;
	width:200px;
	height:100vh;
	background-color: #D8EDA5;	
	-webkit-box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: -2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
	z-index:-1;
}


#navRight{
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.5;
	width: 200px;
	background-color: #D8EDA5;	
	float:right;

	/* IE 8 */
	display:table-cell\9;
	float:none\9;
}

#loginStatusBox{
	width: 190px;
	height: 110px;
	padding-left:10px;
	-webkit-box-shadow: 0px 12px 5px -10px rgba(0,0,0,0.2) inset, 0px -12px 5px -10px rgba(0,0,0,0.2) inset;
	-moz-box-shadow: 0px 12px 5px -10px rgba(0,0,0,0.2) inset, 0px -12px 5px -10px rgba(0,0,0,0.2) inset;
	box-shadow: 0px 12px 5px -10px rgba(0,0,0,0.2) inset, 0px -12px 5px -10px rgba(0,0,0,0.2) inset;

}

#loginStatusBox a{
	text-decoration:none;
}

#loginButtonGroup{
	overflow:hidden;
}

.loginButtons{
	height:60px;
	width: 60px;
	margin: 14px 8px;
	text-align:center;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:15px;
	font-weight: lighter;
	line-height: 20px;
	float:left;
	border-radius:10px;
	color:white;
	cursor:pointer;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	background-color: #25769C;

		  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;
}

.loginButtons p {
	position: relative;
	top:10px;
}

.loginButtons:hover{
	color:yellow;
	
   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		

}

#subscribeButton{
	background-color: #25769C;
}

#subscribeButton:hover{
	background: #25769c; /* Old browsers */
	background: -moz-linear-gradient(top,  #25769c 0%, #1b536d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25769c), color-stop(100%,#1b536d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #25769c 0%,#1b536d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #25769c 0%,#1b536d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #25769c 0%,#1b536d 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #25769c 0%,#1b536d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25769c', endColorstr='#1b536d',GradientType=0 ); /* IE6-9 */
}

#loginButton{
	background: #319ACE;
}

#loginButton:hover{
	background: #319ace; /* Old browsers */
	background: -moz-linear-gradient(top,  #319ace 1%, #25769c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#319ace), color-stop(100%,#25769c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #319ace 1%,#25769c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #319ace 1%,#25769c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#319ace', endColorstr='#25769c',GradientType=0 ); /* IE6-9 */
}

#loginButtonWide{
	background: #319ACE;
	width:120px;
}

#loginButtonWide p {
	top:18px;
}

#loginButtonWide:hover{
	background: #319ace; /* Old browsers */
	background: -moz-linear-gradient(top,  #319ace 1%, #25769c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#319ace), color-stop(100%,#25769c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #319ace 1%,#25769c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #319ace 1%,#25769c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#319ace', endColorstr='#25769c',GradientType=0 ); /* IE6-9 */
}

#logoutButton{
	background: #25769C;
	margin:14px 6px 14px 2px;
}

#logoutButton:hover{
	background: #25769c; /* Old browsers */
	background: -moz-linear-gradient(top,  #25769c 0%, #1b536d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25769c), color-stop(100%,#1b536d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #25769c 0%,#1b536d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #25769c 0%,#1b536d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #25769c 0%,#1b536d 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #25769c 0%,#1b536d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25769c', endColorstr='#1b536d',GradientType=0 ); /* IE6-9 */
}

#subscriberHomeButton{
	background: #319ACE;	
	width:100px;
	margin:14px 8px;
}

#subscriberHomeButton:hover{
	background: #319ace; /* Old browsers */
	background: -moz-linear-gradient(top,  #319ace 1%, #25769c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#319ace), color-stop(100%,#25769c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #319ace 1%,#25769c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #319ace 1%,#25769c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#319ace', endColorstr='#25769c',GradientType=0 ); /* IE6-9 */
}


#noShow{
	width:0;
	height:0;
	margin:0;
}

#forgotDetails{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-style:italic;
	text-decoration:none;
	position:relative;
	top: -6px;
	left: 10px;
}

#forgotDetails:hover{
	text-decoration:underline;
}

#forgotDetails a{
	color:#1b536d;
}

#loggedIn{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-style:italic;
	text-decoration:none;
	position:relative;
	top: 6px;
	left: 38px;
	color:#1b536d;
}

#addThisWrapper1 {
	position:absolute;
	top:13px;
	right:35px;	
}

#addThisWrapper2 {
	position:relative;
	margin-top:20px;
	margin-bottom:40px;
}


.addThisWrapper {
	height:32px;
	margin-left:68px;
}

.addThisPreamble {
	line-height:30px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	color:#787878;
	font-size:14px;
	margin-right:5px;
	border:1px #787878 solid;
	border-radius: 5px;
	padding:0px 10px;
	position:absolute;
	left:-68px;
}

.shareArrow{
	height:7px;
	width:7px;
	background-color:white;
	border-top: 1px #787878 solid;
	border-right: 1px #787878 solid;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    position:absolute;
    right:-5px;
    top:11px;
}

#addThis2{
	position:absolute;
	top:0;
}

#main{
	padding:53px 40px 22px 40px;
	min-height: 45vh;
	-webkit-min-height: calc(100vh - 420px);
	-moz-min-height: calc(100vh - 420px);
	min-height: calc(100vh - 420px);
	width: calc(100% - 480px);
	float:left;
	background-color:white;
	margin-left: 0px;
	margin-top: 0px;
	position:relative;
	font-size:15px;
	
	-webkit-box-shadow: 7px 2px 5px -5px rgba(0,0,0,0.2) inset, -7px 2px 5px -5px rgba(0,0,0,0.2) inset;
	-moz-box-shadow: 7px 2px 5px -5px rgba(0,0,0,0.2) inset, -7px 2px 5px -5px rgba(0,0,0,0.2) inset;	
	box-shadow: 7px 2px 5px -5px rgba(0,0,0,0.2) inset, -7px 2px 5px -5px rgba(0,0,0,0.2) inset;
	

	/* IE 8 */
	display:table-cell\9;
	float:none\9;

}

#main p {
	margin-bottom:20px;
	line-height:21px;
}

.indexPageBlock{
	margin-left:-2%;
	width:104%;
	position:relative;
	overflow:hidden;
}

.pageBanner{
	width:100%;
	background-size:cover;
	margin:10px 0% 2% 0%;
	border:1px #787878 solid;
	padding:60px 10%;
	box-sizing:border-box;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.indexPageBlock .pageBanner{
	width:96%;
	margin:10px 2% 2% 2%;
}

.pageBannerTitleBox{
	background-color:rgba(37,118,156,0.8);
	color:white;
	box-sizing:border-box;
	padding:40px 5% 30px 5%;
	max-width:500px;
}

.pageBannerTitleBox.self{
	background-color:rgba(75,125,0,0.8);	
}

.pageBannerTitleBox.neutral{
	background:rgba(0,0,0,0.75);
}

.pageBanner h1 {
	color:white;
}

.contentBlock {
	float:left;
	box-sizing:border-box;
	margin:2%;
	position:relative;
	text-align:left;	
	height:0px;
}

.buttonBlock{
	margin-left:-3%;
	margin-top:0px;
	position:absolute;
	width:106%;
	top:-3%;
}

.contentBlock.tall .buttonBlock {
	margin-top:52px;	
}

.introBlockBackground{
	overflow:hidden;
	border:1px black solid;
	box-sizing: border-box;
	height:0px;
	padding-bottom:100%;
	width:100%;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.contentBlock.tall .introBlockBackground{
	padding-bottom:calc(100% + 48px);	
}

.contentBlock h2{
	margin-top:0px;
}

.introBlock {
	padding:0px;
}

.contentBlockText {
	position:relative;
	overflow:hidden;
	box-sizing:border-box;
	padding:25px;
	background:rgba(255,255,255,0.9);
	top:-140px;
	left:-140px;
	margin-top: 50%;
	margin-left: 50%;
	width:280px;
	height:280px;
}

.contentBlock.tall .contentBlockText {
	height:328px;
}

/* One Column*/
@media screen and (min-width: 800px) and (max-width: 1009px) {
	.contentBlock{
		height:auto;
		width:96%;
		padding:0px 0px 25px 0px;
	}

	.contentBlockText {
		top:0px;
		left:0px;
		margin-top: 0%;
		margin-left: 0%;
		width:auto;
		height:auto;
	}

	.contentBlock.tall .contentBlockText {
		height:auto;
	}

	.introBlockBackground{
		border:none;
		box-sizing: border-box;
		height:auto;
		padding-bottom:0;
		width:auto;
		-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0);
		-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0);	
		box-shadow: 2px 2px 5px rgba(0,0,0,0);
	}
	
	.contentBlock.tall .introBlockBackground{
		padding:0;
	}
	
	.contentBlock.tall .buttonBlock {
		margin-top:0px;	
	}
	
	.buttonBlock{
		position:relative;
		margin-top:0px;
	}

	.quarterBlock span {
		font-size:calc((100vw - 510px)*0.05);
	}

	.contentBlockText {
		padding:25px 0px 0px 0px;
	}
}

/* Two Columns*/
@media screen and (min-width: 1010px) and (max-width: 1309px) {
	.contentBlock{
		width:46%;
		padding-bottom:46%;
	}
	
	.contentBlock.tall {
		padding-bottom:calc(46% + 50px);	
	}

	.quarterBlock span {
		font-size:calc(((100vw - 510px) / 2)*0.05);
	}

}

/* Three Columns*/
@media screen and (min-width: 1310px) and (max-width: 1709px) {
	.contentBlock{
		width:29.33%;
		padding-bottom:29.33%;
	}

	.contentBlock.tall {
		padding-bottom:calc(29.33% + 50px);
	}
	
	.quarterBlock span {
		font-size:calc(((100vw - 510px) / 3)*0.05);
	}
	
}

/* Four Columns*/
@media screen and (min-width: 1710px) {
	.contentBlock{
		width:21%;
		padding-bottom:21%;
	}
	
	.contentBlock.tall {
		padding-bottom:calc(21% + 50px);
	}

	.quarterBlock span {
		font-size:calc(((100vw - 510px) / 4)*0.05);
	}

}


.quarterBlock {
	width:44%;
	height:0;
	padding-bottom:44%;
	margin: 3%;
	float:left;
	color:white;
	position:relative;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

		  /*Animation*/
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;

}

.quarterBlock:hover {
   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		
}

.quarterBlock span {
	display:block;
	position:absolute;
	bottom:0%;
	padding-bottom:10%;
	padding-top:5%;
	width:100%;
	text-align:center;
}

.compIcon{
	background:url('https://www.firstwriter.com/images/compIcon.png') no-repeat center 30% / 50% 50% #319ACE;	
}

.magIcon{
	background:url('https://www.firstwriter.com/images/magIcon.png') no-repeat center 30% / 50% 50% #660066;	
}

.agentIcon{
	background:url('https://www.firstwriter.com/images/agentIcon.png') no-repeat center 30% / 50% 50% #800000;	
}

.pubIcon{
	background:url('https://www.firstwriter.com/images/pubIcon.png') no-repeat center 30% / 50% 50% #1B536D;	
}


#footer{
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	background-color: #787878;
	box-sizing:border-box;
	width: 100%;
	overflow: hidden;
	color: white;
	margin: 0;
	padding: 50px 0 20px 0;
	text-align: center;
}

#footerInner {
	width: 95%;
	margin: auto;
}

.footerLeft {
	text-align: left;
	width:calc(100% - 435px);
	-webkit-column-width:150px;
	-moz-column-width:150px;
	column-width:150px;
	float:left;
	max-width:900px;
	padding-left:25px;
}

.footerNav {
	overflow: hidden; /* Fix for firefox and IE 10-11  */
	-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
	page-break-inside: avoid; /* Deprecated Firefox */
	-moz-column-break-inside:avoid; /* Current Firefox */
	column-break-inside:avoid;
	break-inside: avoid; /* IE 10+ */
	break-inside: avoid-column;
	padding-bottom: 20px;
}

.footerNav h1, .footerNav .h1 {
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 14px;
	color:yellow;
	font-weight:normal;
	margin-bottom:5px;
}

.footerNav ul {
	list-style-type:none;
	text-indent:-15px;
	padding-left:15px;
	margin-left:0px;
}

.footerNav a {
	color:white;
	text-decoration:none;
}

.footerNav a:hover {
	text-decoration:underline;
}

#footerSocMed ul {
	text-indent:0px;
	padding-left:0px;
}

#footerSocMed .socMed{
	line-height:30px;
}

.footerSocMedIcon {
	width:22px;
	height:22px;
	margin:4px 5px 3px 0px;
	float:left;
}

#footerRight{
	width:410px;
	float:right;
}

#yourCountry {
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 13px;
	color:yellow;
	font-weight:normal;
	margin-bottom:20px;
	display:inline-block;
	position:relative;
}

#footerFlag {
	height:30px;
	position:absolute;
	right:25px;
	top:5px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */

	#footerFlag {
		right:5px;
	}

}

#footerCountry {
	color:white;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	background-color: transparent;	
	border:1px #b4b4b4 solid;
	height: 40px;
	box-sizing:border-box;
	width:300px;
	text-overflow:ellipsis;
	padding:10px;
	padding-right:60px;
	position:relative;
}

#footerCountry::-ms-expand {
    display: none;
}

#footerCountryShade{
	background-color:transparent;
	display:inline-block;
	margin-left:10px;
}

#footerCountryShade:hover{
	background-color:rgba(74,74,74,0.5);
}

#footerCountry:hover, #footerCountry:focus {
	border:1px solid yellow;
	cursor:pointer;
}

#footerCountry option {
	background-color:#6E6E6E;
	width:250px;
	text-overflow:ellipsis;
	padding:10px;
}

.navRightBox {
	height:80px;
	background-color: white;
	float:right;
	margin: 5px;
	color: black;
	-webkit-box-shadow: 4px 4px 10px #4A4A4A;
	-moz-box-shadow: 4px 4px 10px #4A4A4A;	
	box-shadow: 4px 4px 10px #4A4A4A;
	border-radius: 12px;
}

#CRS {
	width: 280px;
	padding:15px;
	height: 50px;
}

#JPandA {
	width: 80px;
	overflow: hidden;
}

#copyright {
	text-align: right; 
	width: 95%; 
	margin:auto;
	padding-right: 5px;
	margin-top:15px;
	display:inline-block;
}

#copyright span:hover {
	cursor: pointer;
	text-decoration: underline;
}

.menu {
	overflow:hidden;
}

.menu.closed {
	height: 35px;
}

.menuHead{
	width: 200px;
	font-size: 15px;
	font-weight: lighter;
	color: #FFFFFF;
	padding: 0px;
	background: #319ACE;
	height: 35px;
	cursor: pointer;
	overflow:hidden;
	
	  /*Gradient*/
  background: #319ACE; /* Old browsers */
  background: -moz-linear-gradient(top, #5EB0D9 0%, #319ACE 44%, #25769C 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5EB0D9), color-stop(44%,#319ACE), color-stop(100%,#25769C)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #5EB0D9 0%,#319ACE 44%,#25769C 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #5EB0D9 0%,#319ACE 44%,#25769C 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #5EB0D9 0%,#319ACE 44%,#25769C 100%); /* IE10+ */
  background: linear-gradient(top, #5EB0D9 0%,#319ACE 44%,#25769C 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5EB0D9', endColorstr='#25769C',GradientType=0 ); /* IE6-9 */
	
}

.menuHead.right {
	
	  /*Gradient*/
  background: #65A600; /* Old browsers */
  background: -moz-linear-gradient(top, #99CA28 0%, #65A600 44%, #4B7D00 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99CA28), color-stop(44%,#65A600), color-stop(100%,#4B7D00)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #99CA28 0%,#65A600 44%,#4B7D00 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #99CA28 0%,#65A600 44%,#4B7D00 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #99CA28 0%,#65A600 44%,#4B7D00 100%); /* IE10+ */
  background: linear-gradient(top, #99CA28 0%,#65A600 44%,#4B7D00 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99CA28', endColorstr='#4B7D00',GradientType=0 ); /* IE6-9 */
	
}


.menuHead:hover {

	  /*Gradient*/
  background: #25769C; /* Old browsers */
  background: -moz-linear-gradient(top, #319ACE 0%, #25769C 44%, #1B536D 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#319ACE), color-stop(44%,#25769C), color-stop(100%,#1B536D)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #319ACE 0%,#25769C 44%,#1B536D 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #319ACE 0%,#25769C 44%,#1B536D 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #319ACE 0%,#25769C 44%,#1B536D 100%); /* IE10+ */
  background: linear-gradient(top, #319ACE 0%,#25769C 44%,#1B536D 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#319ACE', endColorstr='#1B536D',GradientType=0 ); /* IE6-9 */
	
	
}

.menuHead.right:hover {

	  /*Gradient*/
  background: #4B7D00; /* Old browsers */
  background: -moz-linear-gradient(top, #65A600 0%, #4B7D00 44%, #325300 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#65A600), color-stop(44%,#4B7D00), color-stop(100%,#325300)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #65A600 0%,#4B7D00 44%,#325300 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #65A600 0%,#4B7D00 44%,#325300 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #65A600 0%,#4B7D00 44%,#325300 100%); /* IE10+ */
  background: linear-gradient(top, #65A600 0%,#4B7D00 44%,#325300 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65A600', endColorstr='#325300',GradientType=0 ); /* IE6-9 */
	
	
}

.menuTitle {
	width:145px;
	height:35px;
	float:left;
	padding: 0px;
}

.menuTitle a {
	color: white;
	text-decoration: none;
	display:block;
	width: 100%;
	padding: 5px 12px;
}

.menuTitle a:hover {
	color: yellow;
	text-decoration: none;
}


.menuOpener {
	border-color: #5EB0D9 #319ACE #25769C #5EB0D9;
	border-width: 2px;
	width: 21px;
	height: 31px;
	text-align: center;
	float: right;
	border-left-style: groove;
	padding-top: 14px;
	padding-left: 8px;	
}

.menuHead.right .menuOpener {
	border-color: #99CA28 #65A600 #4B7D00 #99CA28;	
}

.menu.closed .menuHead .menuOpener {
	padding-top: 14px;
}
.menu.open .menuHead .menuOpener {
	padding-top: 14px;
}
.menu.stayOpen .menuHead .menuOpener {
	padding-top: 6px;
}

.menuArrow {
   height: 0;
   width: 0px;
   border: 6px solid transparent;	
}

.menu.closed .menuHead .menuOpener .menuArrow {
   border-top-color: white;
}

.menu.closed .menuHead .menuOpener:hover .menuArrow {
   border-top-color: yellow;
}

.menu.open .menuHead .menuOpener .menuArrow {
   border-top-color: white;
}

.menu.open .menuHead .menuOpener:hover .menuArrow {
   border-top-color: yellow;
}

.menu.stayOpen .menuHead .menuOpener .menuArrow {
	border-bottom-color: white;	
}

.menu.stayOpen .menuHead .menuOpener:hover .menuArrow {
	border-bottom-color: yellow;	
}

.menu.currentMenu .menuHead{

	  /*Gradient*/
  background: #25769C; /* Old browsers */
  background: -moz-linear-gradient(top, #319ACE 0%, #25769C 44%, #1B536D 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#319ACE), color-stop(44%,#25769C), color-stop(100%,#1B536D)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #319ACE 0%,#25769C 44%,#1B536D 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #319ACE 0%,#25769C 44%,#1B536D 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #319ACE 0%,#25769C 44%,#1B536D 100%); /* IE10+ */
  background: linear-gradient(top, #319ACE 0%,#25769C 44%,#1B536D 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#319ACE', endColorstr='#1B536D',GradientType=0 ); /* IE6-9 */


}

.menu.currentMenu .menuHead.right{

	  /*Gradient*/
  background: #4B7D00; /* Old browsers */
  background: -moz-linear-gradient(top, #65A600 0%, #4B7D00 44%, #325300 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#65A600), color-stop(44%,#4B7D00), color-stop(100%,#325300)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #65A600 0%,#4B7D00 44%,#325300 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #65A600 0%,#4B7D00 44%,#325300 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #65A600 0%,#4B7D00 44%,#325300 100%); /* IE10+ */
  background: linear-gradient(top, #65A600 0%,#4B7D00 44%,#325300 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65A600', endColorstr='#325300',GradientType=0 ); /* IE6-9 */

}

.menu.currentMenu .menuOpener {
	display:none;
}

.menu.currentMenu .menuTitle{
	width:200px;
}

.menu.currentMenu .menuTitle a {
	color:yellow;
}

.menuSub {
	width: 200px;
	overflow: hidden;

	-webkit-box-shadow: 0px 12px 5px -10px rgba(0,0,0,0.2) inset, 0px -12px 5px -10px rgba(0,0,0,0.2) inset;
	-moz-box-shadow: 0px 12px 5px -10px rgba(0,0,0,0.2) inset, 0px -12px 5px -10px rgba(0,0,0,0.2) inset;
	box-shadow: 0px 12px 5px -10px rgba(0,0,0,0.2) inset, 0px -12px 5px -10px rgba(0,0,0,0.2) inset;

}

.menuItem{
	font-size: 13px;
	line-height: 30px;
	overflow: hidden;
	width: 200px;
	cursor: pointer;
	height:30px;
}

.menuItem:hover {
	background:#7CBFE0
}

.menuItem.right:hover {
	background:#99CA28
}

.menuItem.currentItem{
	background-color:#FFFF99;
}

.menuItem.currentItem:hover{
	background-color:#FFFF99;
}

.menuItem a {
	color: black;
	text-decoration: none;
	display:block;
	width: 170px;
	padding: 0px 18px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

.menuText{
	font-size: 13px;
	overflow: hidden;
	width: 180px;
	cursor:auto;
	padding: 10px 10px 5px 10px;
}

.menuFoot{
	width:200px;
	height:45px;
	line-height:22px;
	font-size:35px;
	text-align:center;
	
	-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
	
}

#menuFootLeft{
	text-shadow: 1px 2px #5EB0D9;
	color:#25769C;

	  /*Gradient*/
  background: #319ACE; /* Old browsers */
  background: -moz-linear-gradient(top, #5EB0D9 0%, #319ACE 44%, #25769C 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5EB0D9), color-stop(44%,#319ACE), color-stop(100%,#25769C)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #5EB0D9 0%,#319ACE 44%,#25769C 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #5EB0D9 0%,#319ACE 44%,#25769C 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #5EB0D9 0%,#319ACE 44%,#25769C 100%); /* IE10+ */
  background: linear-gradient(top, #5EB0D9 0%,#319ACE 44%,#25769C 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5EB0D9', endColorstr='#25769C',GradientType=0 ); /* IE6-9 */
	
}

#menuFootRight{
	text-shadow: 1px 2px #99CA28;
	color:#4B7D00;

	  /*Gradient*/
  background: #65A600; /* Old browsers */
  background: -moz-linear-gradient(top, #99CA28 0%, #65A600 44%, #4B7D00 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99CA28), color-stop(44%,#65A600), color-stop(100%,#4B7D00)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #99CA28 0%,#65A600 44%,#4B7D00 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #99CA28 0%,#65A600 44%,#4B7D00 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #99CA28 0%,#65A600 44%,#4B7D00 100%); /* IE10+ */
  background: linear-gradient(top, #99CA28 0%,#65A600 44%,#4B7D00 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99CA28', endColorstr='#4B7D00',GradientType=0 ); /* IE6-9 */
	
}

/*Side Adverts*/
/*============================================================================*/

.adsWrap{
	z-index:10;
	position:absolute;
}

.adOuter{
	box-sizing:border-box;
	width:160px;
	color:white;
	border-radius:20px;
	padding:4px;
	margin:20px;
	font-size:18px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight:lighter;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);

			  /*Animation*/
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.adOuter:hover{
	width:600px;
}

.adOuter p{
	margin:5px 0 9px;
}

.adOuter a{
	text-decoration:none;
}

#rightAds .adOuter:hover{
	margin-left:-420px;
}

.adHead{
	box-sizing:border-box;
	width:152px;
	text-align:center;
	color:white;
}

.adInner{
	background-color:white;
	color:black;
	border-radius:20px;
	border-bottom-left-radius:16px;
	border-bottom-right-radius:16px;
	overflow:hidden;
	position:relative;
}

.adExpansion{
	box-sizing:border-box;
	width:600px;
	position:absolute;
	top:0;
	right:0;
	padding:30px 30px 30px 200px;
	height:100%;
}

.adExpansion h2{
	color:orange;
	margin:0 0 30px;
	line-height:30px;
}

.adExpansion li{
	margin: 15px 0;
}

.adExpansion strong{
	color:orange;
}

#rightSideAd .adExpansion strong{
	color:#800000;
}

#rightSideAd .adExpansion.tnw strong{
	color:#000000;
}

#rightAds .adExpansion{
	padding:30px 200px 30px 30px;	
	right:auto;
	left:0;
}

#rightSideAd .adExpansion h2{
	color:white;
	text-shadow:2px 2px 4px black;
	background:rgba(128,0,0,0.6);
	padding:20px 40px;
	margin-left:-40px;
	margin-top:-40px;
	width:100%;
}

#rightSideAd .adExpansion.tnw h2{
	background-color:rgba(0,0,0,0.6);
}

.adExpansionMask{
	width:153px;
	height:100%;
	border-right:1px solid #B4B4B4;
	position:absolute;
	background-color:white;
	z-index:0;

	-webkit-box-shadow: 0px 2px 30px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 2px 30px rgba(0,0,0,0.4);	
	box-shadow: 0px 2px 30px rgba(0,0,0,0.4);
	
}

#rightAds .adExpansionMask{
	right:0;
}

.adInsetShadowTop{
	position:absolute;
	top:0;
	height:20px;
	width:100%;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	margin-top:-2px;
	margin-left:-2px;

	-webkit-box-shadow: 5px 5px 4px rgba(0,0,0,0.3) inset;
	-moz-box-shadow: 5px 5px 4px rgba(0,0,0,0.3) inset;	
	box-shadow: 5px 5px 4px rgba(0,0,0,0.3) inset;
	
}

.adInsetShadowLeft{
	position:absolute;
	top:20px;
	height:calc(100% - 20px);
	width:20px;
	border-bottom-left-radius:16px;
	border-bottom-right-radius:16px;
	margin-top:-2px;
	margin-left:-2px;

	-webkit-box-shadow: 13px 0px 4px -8px rgba(0,0,0,0.3) inset;
	-moz-box-shadow: 13px 0px 4px -8px rgba(0,0,0,0.3) inset;	
	box-shadow: 13px 0px 4px -8px rgba(0,0,0,0.3) inset;
	
}
.adContent{
	box-sizing:border-box;
	width:152px;
	height:100%;
	position:relative;	
	padding:10px;
	text-align:center;
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
}

#leftSideAd .adContent, #rightSideAd .adContent{
	min-height:460px;	
}

#rightAds .adContent{
	float:right;
}

.sideAdCoverImage{
	margin:10px 0;
	width:100px;
	height:150px;

	-webkit-box-shadow: 3px 3px 15px rgba(0,0,0,0.6);
	-moz-box-shadow: 3px 3px 15px rgba(0,0,0,0.6);	
	box-shadow: 3px 3px 15px rgba(0,0,0,0.6);	
}

.buyButton{
	width:120px;
	margin:5px 0;
	border-radius:8px;
	padding:0;
}

.buyTextButton{
	width:120px;
	margin:5px auto;
	border-radius:8px;
	padding:10px 0;	
}

#leftSideAd{
	background-color:#319ACE;
}

#leftSideAd .adExpansion{
	background-image:url('https://www.firstwriter.com/ads/printBookBG.jpg');
	background-repeat:no-repeat;
	background-position:right bottom;
}

#rightSideAd{
	background-color:#65A600;
}

#rightSideAd .adExpansion{
	background-image:url('https://www.firstwriter.com/ads/rightSideAdBG.jpg');
	background-repeat:no-repeat;
	background-size:cover;
}

#rightSideAd .adExpansion.tnw{
	background-image:url('https://www.jpandadyson.com/images/the_naked_writer_bg.jpg');
	background-position:right;	
}

#rightSideAd .adExpansion .textBlock{
	background:rgba(255,255,255,0.85);
	padding:15px 30px 15px 15px;
	border-radius:12px;
}

#subscribeAdWrap{
	margin:20px;
}

#subscribeAdWrap a{
	text-decoration:none;
}

#subscribeAd{
	background-color:#25769C;
	color:yellow;
	overflow:hidden;
	margin:0;
}

#subscribeAd .adInner{
	background-color:#25769C;
	border-radius:0;
	color:white;
}

#subscribeAd .adExpansion{
	border-radius:16px;
	max-height:calc(100% - 8px);
	padding: 8px 100px 8px 140px;

	-webkit-box-shadow: none;
	-moz-box-shadow: none;	
	box-shadow: none;
}

#subscribeAd .adExpansion li span{
	font-weight:bold;
}

#subscribeAd .adExpansionMask{
	background-color:#25769C;
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
	border:none;
	top:-4px;
	left:-4px;
	width:160px;
	height:calc(100% + 8px);

	-webkit-box-shadow: 0px 2px 30px #25769C;
	-moz-box-shadow: 0px 2px 30px #25769C;	
	box-shadow: 0px 2px 30px #25769C;
}

#subscribeAd{
	color:white;
	font-size:14px;
}

#subscribeAd h2{
	color:yellow;
	font-size:22px;
	margin-top:0px;
	margin-bottom:6px;
	font-style:normal;
}

#subscribeAd .adContent p{
	margin:2px;
	font-style:italic;
}

#subscribeAd li{
	margin:5px;
}

#subscribeAd #subAdPrice{
	font-size:40px;
	font-style:normal;
	color:yellow;
}

.blueSpot{
	box-sizing:border-box;
	background-color:#319ACE;
	width:100px;
	height:100px;
	border-radius:50px;
	color:white;
	position:absolute;
	text-align:center;
	font-size:15px;
	padding:10px;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);

	-ms-transform: rotate(15deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
    transform: rotate(15deg);

}

.blueSpot span{
	font-size:30px;
	display:block;
	margin:-8px 0;
}

#subscribeAd .blueSpot{
	top:10px;
	right:10px;
}

#leftSideAd .blueSpot{
	right:20px;
}

#rightSideAd .blueSpot{
	right:180px;	
	top:60px;
	padding-top:15px;
}

#rightSideAd .blueSpot span{
	font-size:24px;
	margin:-5px 0;
}

/*End Side Adverts*/
/*============================================================================*/

.javaLink{
	cursor:pointer;
}

#main .javaLink{
	color:blue;
	text-decoration:underline;
}

img {
	border-width: 0px;
}
.vmid {	
	display: table;
}

.vmid div {
	display: table-cell;
	vertical-align:middle;
}

#cookieBar {
	position:fixed;
	bottom:0px;
	width:calc(100% + 15px);
	max-width: 1000px;
	height:70px;
	background-color:rgba(74,74,74,0.9);
	color:black;
	z-index: 800;
	box-sizing:border-box;
	padding:10px 80px 10px 10%;
	background:url('https://www.firstwriter.com/images/cookie-left.jpg') left top no-repeat, url('https://www.firstwriter.com/images/cookie-right.jpg') right 15px top no-repeat,white;
	text-shadow: 1px 1px white;
	-webkit-box-shadow: 2px -2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px -2px 5px rgba(0,0,0,0.3);	
	box-shadow: 2px -2px 5px rgba(0,0,0,0.3);
	border-top-right-radius:15px;

			  /*Animation*/
  -webkit-transition: margin-bottom 0.5s ease;
     -moz-transition: margin-bottom 0.5s ease;
       -o-transition: margin-bottom 0.5s ease;
      -ms-transition: margin-bottom 0.5s ease;
          transition: margin-bottom 0.5s ease;

}

#cookieBar:before{
	content:"We use cookies to make your experience sweeter. By using the site, you confirm that you're okay with this.";
}

#cookieBar.hidden {
	margin-bottom:-80px;
}

#cookieBar.show {
	margin-bottom:0px;
}

.cookieButton{
	color:white;
	border:none;
	padding:6px 20px;
	border-radius:4px;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	float:left;
	text-shadow:none;
}

.cookieButton:hover{
	cursor:pointer;
}

#accept{
	background-color:rgba(0,128,0,0.9);
	margin:8px 8px 8px 0px;
}

#accept:after{
	content:"I'd be delighted to accept your delicious cookies";
}

#accept:hover{
	background-color:#00B300;
}

#decline{
	background-color:rgba(128,0,0,0.9);
	margin:8px;
}

#decline:after{
	content:"I'm on a cookie-free diet";
}

#decline:hover{
	background-color:#CC0000;
}

#cookieBar a {
	color:blue;
}

#cookieBar a:hover {
	text-decoration:underline;
	cursor:pointer;
}

#cookieInfo{
	display:inline-block;
	margin:12px;
}

.matchesFound{
	color:#646464;
}

.searchResult{
	margin:22px 0px 22px 0px;
}

.searchResult .searchResultLink{
	font-size:16px;
	display:block;
	margin-bottom:5px;
}

.searchResult p a {
	color: black;
}

.pageLinks {
	text-align: center;
	padding: 40px 5px 10px 5px;
	overflow: hidden;
	white-space:nowrap;
}

.pageLink {
	display: inline-block;
	border: 1px #b4b4b4 solid;
	text-decoration: none;
	padding: 4px;
	min-width: 22px;
	height: 22px;
	line-height: 22px;
	margin: 2px;
	color: #787878;
}
.pageLink.currentPage {
	border: 1px #25769C solid;
	background: #25769C;
	color: white;
}
.pageLink.currentPage:hover {
	border: 1px #25769C solid;
	background: #25769C;
	color: white;
	-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0);
	box-shadow: 2px 2px 5px rgba(0,0,0,0);
	-webkit-transform: scale(1,1); /* Chrome, Safari, Opera */;
	-moz-transform: scale(1,1);
	-o-transform: scale(1,1);
	-ms-transform: scale(1,1); /* IE 9 */
     transform: scale(1,1);
}
.pageLink.arrow {
	background: gainsboro;
	color: #646464;
	padding: 6px;
	min-width: 28px;
	height: 28px;
	line-height: 28px;
	position:relative;
	z-index:5;
	top:-16px;
}

.pageLink.arrow.left{
	margin: 0 0px 0 8px;

	-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
	-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.25);	
	box-shadow: 2px 2px 8px rgba(0,0,0,0.25);		
}

.pageLink.arrow.right{
	margin: 0 8px 0 0px;

	-webkit-box-shadow: -2px 2px 8px rgba(0,0,0,0.25);
	-moz-box-shadow: -2px 2px 8px rgba(0,0,0,0.25);	
	box-shadow: -2px 2px 8px rgba(0,0,0,0.25);		
}

.pageLink:hover {
	background: #319ACE;
	color: white;
	border: 1px #25769C solid;
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	-webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */;
	-moz-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);
}

.pageLinkNumbers{
	max-width:calc(100% - 150px);
	display:inline-block;
	white-space:nowrap;
	position:relative;
	padding:2px 0;
	margin-left:-4px;
	margin-right:-4px;
	height:36px;
	overflow:hidden;
}

.prePageLinks{
	overflow:hidden;
	padding-left:10px;
	padding-right:4px;
}

.frontWeighted .prePageLinks{
	max-width:calc(50% + 10px);
	float:left;
}

.prePageLinksFloat{
	float:right;
}

.postPageLinks{
	overflow:hidden;
	height:40px;
	padding-right:10px;
}

.endWeighted .postPageLinks{
	max-width:calc(50% - 30px);
	float:right;
}

.goToPage{
	text-align:center;
	white-space:nowrap;
	margin:15px 0 40px;
}

.goToPage input[type=number]{
	width: 70px;
	text-align:center;
	font-size:15px;
	margin: 0 5px;
}

.goToPage input[type=submit]{
	box-sizing:border-box;
	height:40px;
	width:40px;
	border-radius:20px;
	cursor:pointer;
	border:1px #25769C solid;
	outline:none;
	color:white;
	font-size:16px;
	margin-left:5px;

	background: #319ace; /* Old browsers */
	background: -moz-linear-gradient(top,  #319ace 1%, #25769c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#319ace), color-stop(100%,#25769c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #319ace 1%,#25769c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #319ace 1%,#25769c 100%); /* W3C */
	
}

.goToPage input[type=submit]:hover{
	color:yellow;

	background: #25769c; /* Old browsers */
	background: -moz-linear-gradient(top,  #25769c 0%, #1b536d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25769c), color-stop(100%,#1b536d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #25769c 0%,#1b536d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #25769c 0%,#1b536d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #25769c 0%,#1b536d 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #25769c 0%,#1b536d 100%); /* W3C */
}

.goToPage #currentPage{
	display:none;
}

.pageDivision{
	padding: 40px;
	overflow:hidden;
	background:white;
}

.pageDivision.allowOverflow{
	overflow:visible;
}

.pageDivision:nth-of-type(even){
	background:#B5DBEE;
}

.pageDivision h2{
	margin-top:0;
}

.pageDivision:nth-of-type(even) h2, .pageDivision:nth-of-type(even) h3{
	color:#4A4A4A;
}


.pageDivision:nth-of-type(4n+0){
	background:gainsboro;
}

/*.pageDivision:nth-of-type(6n+0){
	background:#319ACE;
	color:white;
}

.pageDivision:nth-of-type(6n+0) h2, .pageDivision:nth-of-type(6n+0) h3{
	color:white;
}

.pageDivision:nth-of-type(6n+0) a{
	color:white;
}*/

.pageDivision.blackTop{
	box-shadow: 0px 175px 150px -100px black inset;
}

.pageDivision.blackTop h2{
	color:white;
}

.pageDivision.whiteTop{
	box-shadow: 0px 250px 150px -100px white inset;
}

.pageDivision.whiteTop h2{
	color:#4A4A4A;
}

.pageDivision p{
	margin-bottom:20px;
}

.subSectionHead {
	margin-top:20px;
	background: #25769C;
	color:white;
	padding: 5px 10px;
}

/*Interstitial Adverts*/
/*=========================================================================*/

#interstitialDiv{
	position:fixed;
	height:0vh;
	width:0vw;
	background:rgba(0,0,0,0.5);
	top:0;
	left:0;
	padding:0px;
	box-sizing:border-box;
	opacity:0;
	transition:opacity 1s ease;
	display:table;
	z-index:10000;
}

#interstitialDiv.reveal{
	height:100vh;
	width:100vw;	
	opacity:1;
	padding:40px;
}

#interstitialVerticalMiddle{
	display:table-cell;
	vertical-align:middle;

	-webkit-perspective: 800px;	
	-moz-perspective: 800px;	
	-o-perspective: 800px;	
	-ms-perspective: 800px;	
	perspective: 800px;	

	-webkit-perspective-origin: 25% center;	
	-moz-perspective-origin: 25% center;	
	-o-perspective-origin: 25% center;
	-ms-perspective-origin: 25% center;
	perspective-origin: 25% center;
}

#interstitialWindow{
	background:white;
	border-radius:20px;
	margin:auto;
	box-shadow: 2px 2px 20px #444444;
	overflow:hidden;
	width:0px;
	height:0px;

	-webkit-transform-origin: right center;
	-moz-transform-origin: right center;
	-o-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
}

.reveal #interstitialWindow{
	width:calc(100vmin - 80px);
	height:calc(100vmin - 80px);
	max-width:600px;
	max-height:600px;
	min-width:300px;
	min-height:300px;	
}

#interstitialContent{
	height:calc(100% - 100px);
	margin-top:30px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;
}

#interstitialButtons{
	height:70px;
	text-align:center;
	display:flex;
	justify-content:center;
}

#interstitialButtons input[type=button]{
	margin-top:10px;
	margin-bottom:20px;
	margin-left:calc(8% - 20px);
	margin-right:calc(8% - 20px);
	height:40px;
	min-width:130px;
	background:orange;
	color:white;
	border:none;
	border-radius:20px;
	outline:none;
	font-size:16px;
	padding:0 30px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
	cursor:pointer;
}

#interstitialButtons input[type=button]:hover{
	background-color:#FF8C00;
}

#interstitialButtons input[type=button].dismiss{
	background:#b4b4b4;
}

#interstitialButtons input[type=button].dismiss:hover{
	background:#787878;
}

/*=========================================================================*/