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

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10pt;
	font-weight:normal;	
	overflow-x:hidden;
}

.noScroll {
	overflow: hidden;
	height: 100%;
	position: fixed;
	width:100vw;
}

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: 20px;
	margin-bottom: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: 16px;
	margin-top:20px;
	margin-bottom:8px;
	color:#787878;
	margin-top:30px;
}

.nowrap{
	white-space:nowrap;
}

.blueHeader {
	color:#319ACE;
}

.greenHeader {
	color:#65A600;
}

p {
	margin-bottom:15px;
	line-height:18px;
}

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

li {
	line-height:18px;
}

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

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

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 {
	background:white;
	border-collapse:collapse;
	border:1px solid #25769C;
	margin-bottom:25px;
	width:100%;
}

.tradPubTable td, .tradPubTable th{
	padding:1% 3%;
}

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

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

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

.selfPubTable td, .selfPubTable th{
	padding:1% 3%;
}

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

.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);
}

#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:600;

			  /*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;
	z-index:490;	
}

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

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

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

.divider{
	text-align:center;
}

.illustration{
	border:1px black solid;
	max-width:90%;
	margin-top:20px;
	margin-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}

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

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

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

#reminderPane {
	height:100%;
	width: 0px;
	position:fixed;
	top:-30px;
	left:100vw;
	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:-100vw;
}

.reminderPaneItem {
	width:100vw;
	height: 80px;
	position:relative;
	padding:10px 0px;
	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: 2px 2px 7px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 7px rgba(0,0,0,0.5);	
	box-shadow: 2px 2px 7px rgba(0,0,0,0.5);
	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:120vw;
	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: 100vw;}
    to {margin-left: 0vw;}
}

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

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

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

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

.snoozeAll {
	background:#319ACE;
	color: white;
	cursor:pointer;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:18px;
	border:none;
	width:100vw;
	max-height:40px;
	line-height:40px;
	z-index:395;
	margin-bottom:100px;
	margin-top:30px;
	text-align:center;
}

.snoozeAll + .reminderPaneSpacer {
	height:0px;
}

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

.reminderPaneItem span{
	white-space:nowrap;
	display:block;
	overflow:hidden;
	width:calc(100vw - 100px);
	text-overflow:ellipsis;
	color: #787878;
	margin-left:20px;
}

.reminderPaneItem span.database {
	width:calc(100vw - 200px);	
}

.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;	
	margin-left:20px;
}

.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:100vw;
	padding:8px 30px;
	z-index:395;
}

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


#alertWrap{
	margin:auto;
	position: fixed;
	top:3vh;
	left: 25px;
	right: 25px;
	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;

			  /*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:100%;
	height: 94vh;
	opacity:1;

			  /*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:84vh;
	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('../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:90vw;
	padding-left:5vw;
	padding-right:5vw;
	z-index:600;
	overflow:auto;

	-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{
	width:100%;
	height: 75px;
	overflow: hidden;	
	margin-bottom: 40px;

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

#books-grass-sky {
	width: 100%;
	height: 75px;
	overflow: hidden;
}

#bannerLeft{
	width:180px;
	height: 75px;
	float:left;
}

#logo {
	height:55px;
	width:180px;
	margin-top: 10px;
	margin-left:-5px;
	float: left;
}

#bannerMid{
	float:left;
	margin-top:10px;
	width:calc(100vw - 182px);
	position:relative;
	margin-left:-15px;
}

#boxes{
	float:right;
	margin-right:0px;
	width:calc(100vw - 182px);
	max-width:360px;
}

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

.boxContainer{
	height:55px;
	width:55px;	
	float:left;
	margin:0px 2px 10px 2px;
	overflow:hidden;
}

.boxContainer .label{
	display:none;
}
.box {
	width: 49px;
	height: 49px;
	border: 3px gray solid;
	background-color: rgba(180,180,180,0.15);
	background-repeat: no-repeat; 
	background-position: center center; 
	background-size: 100% 100%;

}

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

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

#boxContainerSearch{
	display:none;
}

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

#narrowSearchBoxCloser {
	z-index:550;

			  /*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;
}

#narrowSearchBoxCloser.topRightCloser.hidden {
	display:none;
	opacity:0;
}

#narrowSearchBoxCloser.topRightCloser.show {
	opacity:1;
	position:fixed;
	top:15px;
	right:15px;

			  /*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;
}

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


}

.magnifyingGlassContainer {
	height:49px;
	width:49px;
}

#narrowSearchContainer .magnifyingGlass {
	margin-left:calc(100vw - 120px);
	margin-top:3px;
}

.circle {
	height:14px;
	width:14px;
	border-radius:15px;
	border:5px #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;
	
}

#narrowSearchContainer .circle {
	border:6px white solid;	
}

.handle{
	height:18px;
	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:24px;
	left:30px;

			  /*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;
}

#narrowSearchContainer .handle{
	background-color:white;
}

#narrowSearchContainer{
	width:100vw;
	height:100vh;
	max-height:320px;
	z-index:500;
	position:fixed;
	right:0px;
	top:0px;
	overflow-x:hidden;
	overflow-y:auto;

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

#narrowSearchContainer.boxContainer{
	margin-top:-350px;
}

#narrowSearchContainer.searchOpen{
	margin-top:0px;
}

#narrowSearchContainer .box{
	width:calc(100vw - 6px);
	height:314px;
	border: 3px black solid;
	position:relative;

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 */
}

#narrowSearchContainer .label{
	position:absolute;
	left:0px;
	top:0px;
	width:264px;
	background-color:transparent;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:30px;
	line-height:60px;
	padding-left:30px;
	color:white;
}

#narrowSearchItems {
	width:60px;
	height:0px;
}

#narrowSearchContainer #narrowSearchItems{
	width:calc(100vw - 6px);
	height: 251px;
	background-color:white;
	position:absolute;
	top:66px;
	left:3px;
}

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

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

#narrowSiteSearch {
	padding:5px 20px;
	font-style:italic;
	line-height:30px;
	background-color:gainsboro;
	height:77px;
	width:calc(100vw - 46px);
}

#narrowSiteSearch #narowq{
	width:214px;
}


#follow {
	display:none;
}

#newsletterSignUp{
/*Note - this is used in the javascript for testing if the wide or narrow CSS is applied*/
	display: none;
}

#topBarContainer {
	width: 100%;
	z-index: 2;
	top:75px;

}

.topBarContainerRelative{
	position: absolute;
	margin-top: 0px;	
}

.topBarContainerFixed{
	position: fixed;
	margin-top:-75px;
}

.smooth{

				  /*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;
}


#topBar {
	height: 40px;
	width:100%;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:20px;
	font-weight:lighter;
	color: white;
	z-index:2;
	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: 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;
}

.topBarHidden{
	margin-top: -55px;
}

#leftBar {
    float: left;
    width: 50%;
    height: 40px;
    
    	  /*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 {
	display: none;
}

#leftMenuIcon{
	height:40px;
	width:80px;
	cursor: pointer;
	padding-top: 5px;
}

.leftMenuLinesWrap {
	float: left;
	margin-left: 10px;
}

#leftMenuIcon .menuLine {
	background-color: #1B536D;

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

}

#leftMenuIcon:hover .menuLine {
	background-color: yellow;
}

.rightArrow {
	height: 0px;
	width: 0px;
	border-style: solid;
	border-color: transparent;
	border-width: 10px;
	border-left-color: #1B536D;
}

#leftMenuIcon .rightArrow {
	float: left;
	margin-top: 4px;
	margin-left: 5px;
}

#leftMenuIcon:hover .rightArrow {
	border-left-color: yellow;
}

#leftMenuClose{
	height: 40px;
	width: 200px;
	cursor: pointer;
	position: fixed;
	-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:5;
	
	  /*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 */
	
}

#leftMenuClose: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 */

}

#leftMenuClose .rightMenuLinesWrap {
	float: left;
	margin:6px;
} 

#leftMenuClose .leftArrow {
	float: left;
	border-right-color: #1B536D;
	margin-top:10px;
}

#leftMenuClose:hover .leftArrow {
	border-right-color: yellow;
}


#leftMenuClose .menuLine{
	background-color: #1B536D;

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

#leftMenuClose:hover .menuLine{
	background-color: yellow;
}


#leftMenuClose:after{
	content: "Close";
	font-size: 18px;
	font-weight:bold;
	color: #1B536D;
	top:6px;
	position: relative;
}

#leftMenuClose:hover:after{
	color: yellow;
}

#leftMenuTitle{
	margin: 50px 15px 10px 15px;
}

#leftMenuTitle:after{
	content: "Traditional Publishing";
	font-size: 20px;
	font-weight:lighter;
	color: #1B536D;
	padding-right: 80px;
}

#midBarContainer {
	width: 50vw;
	position: absolute;
	left: 0px;
	height: 0px;
}

#midBar {
	position: relative;
	width: 0px;
	margin-left: -55px;
	cursor: pointer;
	left:100%;
	height: 0px;
	top:-106px;
	
				  /*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;
}

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

#midBarLeftMask {
	width:55px;
	height: 50px;
	position: relative;
	left: 100%;
	margin-left: -79px;
    -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: 50px;
	position: relative;
	left: 100%;	
	top:-50px;
	margin-left: 24px;
    -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;

}

.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;

}

.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 */	
}

.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;

}

.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: 15px;
	top:10px;
	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: absolute;
	z-index:10;

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

}

.topRightCloser.black{
	background-color:black;
}

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

#topMenu input, #topMenu select, #topMenu textarea{
	outline:none;
	width:90%;
    -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;
}

#cardContact .cardContentBlock{
	margin: 5%;
}

#cardContact .cardContentBlock.high{
	margin-top: -5%;
}

#cardAffiliate .cardContentBlock.high{
	margin: 5%;
}

.cardContentBlock a{
	color:orange;
}

.cardContentBlock.dashFeature {
	overflow:hidden;
	opacity:1;
	filter: alpha(opacity=100);
	position:fixed;
	background-color:black;
	top:10vh;
	left:5vw;
	z-index:500;
	width: 90vw;
	height:80vh;
	border-radius:25px;

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

			  /*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;

}

.cardContentBlock.dashFeature.hidden {
	opacity:0;
	filter: alpha(opacity=0);
	width:0;
	height:0;

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

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


.dashFeatureBox{
	border-color: gainsboro; 
	border-style: solid none solid none; 
	border-width: 1px;
	overflow:auto;
	overflow-x:hidden;
	overflow-y:scroll;
	height: 200px;
	height: calc(80vh - 100px);
	background-image:url('../images/loadingOrangeBlack.gif'); 
	background-repeat: no-repeat; 
	background-position:center center; 
	background-attachment:local;	

	-webkit-overflow-scrolling: touch;


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

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

.dashFeatureBox p {
	margin:15px;
}

.dashFeature span{
	white-space:nowrap;
	display:block;
	overflow:hidden;
	width:80%;
	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{
	margin-left:10%;
}

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

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

#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) 10%, rgba(204,0,0,0) 90%, 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(10%,rgba(204,0,0,0)), color-stop(90%,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) 10%,rgba(204,0,0,0) 90%,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) 10%,rgba(204,0,0,0) 90%,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) 10%,rgba(204,0,0,0) 90%,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) 10%,rgba(204,0,0,0) 90%,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) 10%, rgba(255,165,0,0) 90%, 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(10%,rgba(255,165,0,0)), color-stop(90%,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) 10%,rgba(255,165,0,0) 90%,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) 10%,rgba(255,165,0,0) 90%,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) 10%,rgba(255,165,0,0) 90%,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) 10%,rgba(255,165,0,0) 90%,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:100vh;
	margin-top:-50vh;
}

.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:85%;
	height:120px;
	border-style:solid;
	border-width:3px;
	border-color:#993300;
	border-top-left-radius: 20px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 0px;
	padding: 10px 20px 0px 20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	background-color:white;
	color:black;
	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:100%;
	position:relative;
	float:left;
	margin-bottom:20px;
}

#removeReminderButton{
	width: 180px;
	margin-top:20px;
	display: block;
	float:none;
}

#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;
	display:block;
	float:none;

	-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: 50vh;
	left: 50vw;
	margin-top:-120px;
	margin-left:-120px;
	position:fixed;
}

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

.centreBarReminder{
	background: url(https://www.firstwriter.com/images/reminders_background_right.jpg) right top/auto 100vh 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;
}

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

#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 30px 0px 10px;
	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;
}

#cardNewsletter .cardContentBlock{
	margin: 5%;
}

#cardNewsletter .cardContentBlock.high{
	margin: 0%;
	margin-top:-5%;
	border-top:1px #b4b4b4 dashed;
}

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

.topMenuShow {
	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;

}

.topMenuHide {
	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;
}


#rightBar {
    float: right;
    width: 50%;
    text-align:right;
    height: 40px;
    
    	  /*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 */

}

#rightBar span{
	display: none;
}

#rightMenuIcon{
	height:40px;
	width:80px;
	cursor: pointer;
	padding-top: 5px;
	float: right;
}

.rightMenuLinesWrap {
	float: right;
	margin-right: 10px;
}

#rightMenuIcon .menuLine {
	background-color: #325300;

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

}

#rightMenuIcon:hover .menuLine {
	background-color: yellow;
}

.leftArrow {
	height: 0px;
	width: 0px;
	border-style: solid;
	border-color: transparent;
	border-width: 10px;
	border-right-color: #325300;
}

#rightMenuIcon .leftArrow {
	float: right;
	margin-top: 4px;
	margin-right: 5px;
}

#rightMenuIcon:hover .leftArrow {
	border-right-color: yellow;
}

#rightMenuClose{
	height: 40px;
	cursor: pointer;
	width:200px;
	position: fixed;
	-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);
	
	  /*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 */
	
}

#rightMenuClose: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 */

}

#rightMenuClose .leftMenuLinesWrap {
	float: right;
	margin:6px;
} 

#rightMenuClose .rightArrow {
	float: right;
	border-left-color: #325300;
	margin-top:10px;
}

#rightMenuClose:hover .rightArrow {
	border-left-color: yellow;
}


#rightMenuClose .menuLine{
	background-color: #325300;

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

#rightMenuClose:hover .menuLine{
	background-color: yellow;
}


#rightMenuClose:after{
	content: "Close";
	font-size: 18px;
	font-weight:bold;
	color: #325300;
	top:6px;
	position: relative;
	float: right;
}

#rightMenuClose:hover:after{
	color: yellow;
}

#rightMenuTitle{
	margin: 50px 15px 10px 15px;
}

#rightMenuTitle:after{
	content: "Self Publishing";
	font-size: 20px;
	font-weight:lighter;
	color: #325300;
	padding-right: 80px;
}

#topMenu{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10pt;
	font-weight:normal;
	color:white;
	margin-left:0px;
	width: 100%;
	position: fixed;
	top:0px;
	overflow-x:hidden;
		
background: #000000; /* Old browsers */

  /*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;

}

.topBarContainerFixed .topMenuClosed{
	height: 0vh;
	margin-top: 0px;

}

.topBarContainerRelative .topMenuClosed{
	height: 0vh;
	margin-top: 75px;

}

.topMenuOpen{
	height: 100vh;
	margin-top: 0px;
	overflow-y: scroll;

}

.topMenuOpen.topMenuFixed{
	overflow-y:hidden;

}

#menuCards{
  /*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;
	
}

.menuCardsDefault{
	margin-top: 40px;
}

.menuCardsRaised{
	margin-top:0px;
}

.menuCard{
	position:relative;
}

.cardHeading {
	height: 40px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:20px;
	font-weight:lighter;
	color: white;
	padding-top: 12px;
	padding-left: 5vw;
	position: relative;	
	
background: #787878; /* Old browsers */
background: -moz-linear-gradient(top,  #787878 0%, #4A4A4A 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#787878), color-stop(100%,#4A4A4A)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #787878 0%,#4A4A4A 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #787878 0%,#4A4A4A 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #787878 0%,#4A4A4A 100%); /* IE10+ */
background: linear-gradient(to bottom,  #787878 0%,#4A4A4A 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#787878', endColorstr='#4A4A4A ',GradientType=0 ); /* IE6-9 */

}

.cardContent {
	height: 0px;
	width: 100%;
	overflow: hidden;
	font-size: 16px;
	
background: black;
	

		  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}

.menuCardShadow {
	position: absolute;
	bottom:0px;
	width:100%;
	height: 20px;

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

.menuCard.selected .cardContent{
	height:185px;
	overflow: auto;
}

#cardDashboard{
	display:none;
}

#cardSettings{
	display:none;
}

.cardContent h1, .cardContent .h1 {
	display: none;
}

.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 p{
	margin:20px 10% 20px 10%;
}

.cardContent .list{
	padding:0px;
	min-width: 200px;
	width: 100%;	
	margin-right:20px;
}

.cardContent ul{
	list-style-type: none;
	padding:0px;
	margin:0px;
}


.cardContent li{
	line-height: 40px;
	border-color: #B4B4B4; 
	border-style: none none dashed none; 
	border-width: 1px;
	padding-left:10vw;
	padding-right:10vw;
}

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

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

.dashFeature h2{
	margin:15px 5% 15px 5%;
}

.scrollingBoxShadow {
	position: relative;
	margin-top:-21px;
	margin-bottom:-8px;
	width:100%;
	height: 20px;

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

#navLeft {
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: -200px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.5;
	width: 200px;
	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:500;
	overflow:hidden;

		  /*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;
}

.navWrap{
	width: 230px;
	height: 100vh;
	overflow-x:hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.navLeftClosed {
	margin-left:0px;
}

.navLeftOpen {
	margin-left:200px;
}


#navRight{
	position: fixed;
	top: 0px;
	bottom: 0px;
	right: -200px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	line-height: 1.5;
	width: 200px;
	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:500;

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

.navRightClosed {
	margin-right:0px;
}

.navRightOpen {
	margin-right:200px;
}

#loginStatusBox{
	width: 190px;
	height: 125px;
	padding-left:10px;
}

#loginStatusBox a{
	text-decoration:none;
}

.loginButtons{
	height:60px;
	width: 60px;
	margin: 0px 8px 8px 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;
}

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


#loginButton{
	background: #319ACE;
}

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

#loginButtonWide p {
	top:18px;
}

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

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

#noShow{
	display:none;
}

#forgotDetails{
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-style:italic;
	text-decoration:none;
	position:relative;
	top: -18px;
	left: 0px;
	padding: 20px 20px 20px 10px;
	display: inline-block;
}

#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: 0px;
	padding: 0px 20px 10px 0px;
	display: block;
	width:100%;
	color:#1b536d;
}

.menu {
	overflow:hidden;
	
		  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;

}

.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: 31px;
	height: 31px;
	text-align: center;
	float: right;
	border-left-style: groove;
	padding-top: 9px;
	padding-left: 11px;	
}

.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: 0px;
}


.menuArrow {
   height: 0;
   width: 0px;
   border: 10px 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;
}

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

.menuItem.right {
	background: #D8EDA5;
}

.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{
	background: #B5DBEE;
	font-size: 10pt;
	overflow: hidden;
	width: 180px;
	cursor:auto;
	padding: 10px 10px 5px 10px;
}

.menuText.right{
	background: #D8EDA5;
}

.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 */
	
}

.javaLink{
	cursor:pointer;
}

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

#addThisWrapper1 {
	position:absolute;
	top:15px;
	right:5px;
}

#addThisWrapper2 {
	margin-top:40px;
	margin-bottom:40px;
	position:relative;
	margin-left:60px;
	min-width:230px;
}

.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:7%;
	padding-top:60px;
	position:relative;
}

.pageBanner{
	width:118%;
	height:auto;
	background-size:cover;
	margin-top:10px;
	margin-left:-9%;
	margin-bottom:20px;
	border:1px #787878 solid;

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

.pageBannerTitleBox{
	margin:60px 7%;
	background-color:rgba(37,118,156,0.8);
	color:white;
	box-sizing:border-box;
	padding:40px 5%;
	width:86%;
	display:inline-block;
}

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

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

.pageBanner h1 {
	color:white;
	margin:0px;
}


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

.contentBlock {
	box-sizing:border-box;
	padding:0%;
	text-align:left;	
	width:92vw;
	height:calc(92vw + 80px);
	margin-left:-3vw;
}

.introBlock {
	height:auto;
}

.contentBlockText {
	padding:25px 3% 15px 3%;
}


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

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

.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;
	width: 100%;
	overflow: hidden;
	color: white;
	margin: 0;
	padding: 25px 0 25px 0;
	text-align: center;	
	position:relative;
	height: auto;
	overflow:hidden;
}

#footerInner {
	width: 100%;
	display: block;
}

#footerRight{
	position: relative;
	width:86vw;
	margin:auto;
}

.footerNav {
	display: none;
}

#yourCountry {
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 13px;
	color:yellow;
	font-weight:normal;
	margin-left:-2vw;
	margin-bottom:20px;
	display:block;
	position:relative;
	height:70px;
	width:90vw;
	box-sizing:border-box;
}

#footerFlag {
	height:30px;
	position:absolute;
	right:20px;
	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:86vw;
	text-overflow:ellipsis;
	padding:10px;
	padding-right:60px;
	position:relative;
}

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

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

#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;
	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;
	display: inline-block;
}


#CRS {
	width: 86vw;
	padding:15px;
	margin:auto;
	margin-top:0px;
	position: relative;
	box-sizing:border-box;
	text-align:center;
	padding-left:calc(43vw - 140px);
	display:block;
	overflow:hidden;
	height:auto;
}


#JPandA {
	width: 80px;
	overflow: hidden;
	position: relative;
	float:right;
	margin-top:10px;
	margin-right:0px;
}

#copyright {
	text-align: center; 
	width: 200px; 
	position: relative;
	float:right;
	margin-top:40px;
	margin-right:0px;
}

#cookieBar {
	position:fixed;
	bottom:0px;
	width:100%;
	height:auto;
	background-color:rgba(74,74,74,0.9);
	color:black;
	z-index: 800;
	box-sizing:border-box;
	padding:10px 100px 10px 10%;
	background:url('../images/cookie-right.jpg') right 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);

			  /*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:"By using this site you confirm you're happy to accept cookies.";
}

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

#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:"Okay";
}

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

#decline{
	display:none;
}


#cookieBar a {
	color:blue;
}

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

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

.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: 8%;
	width:100%;
	margin-left:-8%;
	overflow:hidden;
	background:white;
}


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

.subSectionHead + p{
	margin-top:20px;
}

/*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;
}

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