/*----------------------------------------------------------------
			---BASIC SETUP---
------------------------------------------------------------------*/
body {margin:0; border-width:0;}
a {	cursor: pointer; }
a {	text-decoration:none;}
a:visited {color:inherit; outline-width:0px; }
a:link {color:inherit;  outline-width:0px; }

body table {border-collapse:separate; border-spacing:0px; }
body td {padding:0px;}

.clear-both, .clear_both, .clear {clear:both; }
.clear-right, .clear_right {clear:right;}
.clear-left, .clear_left {clear:left;}
.clear-none, .clear_none {clear:none; }

.display-none {display:none;}

.line-height-normal {line-height: 1.3; }

/*----------------------------------------------------------------
			---MARKS AND CLOSES THE BOTTOM OF A DIV---
------------------------------------------------------------------*/
div.closer {height:0px; width:100%; clear:both;}

	/*----------------------------------------------------------------
				---NORMALIZE AND FIX---
	------------------------------------------------------------------*/
/*----------------------------------------------------------------------
 1. Corrects font family not being inherited in all browsers.
 2. Corrects font size not being inherited in all browsers.
 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 -----------------------------------------------------------------------*/
button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0;
}

/*----normalize and fix <sup> and <sub>-------------*/
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
    	
}

sub {
	bottom: -0.25em;
}

	/*----------------------------------------------------------------
				---INLINE STYLING RULES---
	------------------------------------------------------------------*/
*.italic { font-style:italic; }
*.italic  *.italic{ font-style:normal; }
*.normal_style { font-style:normal; }
*.normal_weight { font-weight:normal; }
*.normal { font-style:normal; font-weight:normal; }
*.normal.italic {font-style:italic; font-weight:normal;}
*.bold { font-weight:bold; }
*.strike_through {text-decoration: line-through;}
*.underline {text-decoration: underline;}

	/*----------------------------------------------------------------
		inline-block: Not good if lots of text wants to flow and wrap!
		inline: This works so that if any other CSS rule makes a span
		a block - this insures these span elements are alway inline.
	------------------------------------------------------------------*/
span.italic,
span.normal_style,
span.normal_weight,
span.normal,
span.bold,
span.strike_through {display:inline;}

*.font_size_4pt { font-size:4pt; line-height:normal; }
*.font_size_6pt { font-size:6pt; line-height:normal; }
*.font_size_8pt { font-size:8pt; line-height:normal; }
*.font_size_9pt { font-size:9pt; line-height:normal; }
*.font_size_10pt { font-size:10pt; line-height:normal; }
*.font_size_11pt { font-size:11pt; line-height:normal; }
*.font_size_12pt { font-size:12pt; line-height:normal; }
*.font_size_14pt { font-size:14pt; line-height:normal; }
*.font_size_16pt { font-size:16pt; line-height:normal; }
*.font_size_18pt { font-size:18pt; line-height:normal; }
*.font_size_20pt { font-size:20pt; line-height:normal; }
*.font_size_22pt { font-size:22pt; line-height:normal; }
*.font_size_24pt { font-size:24pt; line-height:normal; }
*.font_size_26pt { font-size:26pt; line-height:normal; }
*.font_size_28pt { font-size:28pt; line-height:normal; }
*.font_size_larger { font-size:larger; line-height:normal; }
*.font_size_smaller { font-size:smaller; line-height:normal; }



/*-------------------------------------------------------------------------------------------------
								---EXTERNAL FONT DEFINITIONS---
								
		Cannot use absoute url, because with EZProxy we get cross browser errors

-------------------------------------------------------------------------------------------------*/
@font-face {
    font-family: 'roboto_condensed';
    src: url('/style/font/robotocondensed-regular-webfont.eot');
    src: url('/style/font/robotocondensed-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/style/font/robotocondensed-regular-webfont.woff') format('woff'),
         url('/style/font/robotocondensed-regular-webfont.ttf') format('truetype'),
         url('/style/font/robotocondensed-regular-webfont.svg#roboto_condensedbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensed_bold';
    src: url('/style/font/robotocondensed-bold-webfont.eot');
    src: url('/style/font/robotocondensed-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/style/font/robotocondensed-bold-webfont.woff') format('woff'),
         url('/style/font/robotocondensed-bold-webfont.ttf') format('truetype'),
         url('/style/font/robotocondensed-bold-webfont.svg#roboto_condensedbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensed_italic';
    src: url('/style/font/robotocondensed-italic-webfont.eot');
    src: url('/style/font/robotocondensed-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/style/font/robotocondensed-italic-webfont.woff') format('woff'),
         url('/style/font/robotocondensed-italic-webfont.ttf') format('truetype'),
         url('/style/font/robotocondensed-italic-webfont.svg#roboto_condensedbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensed_bold_italic';
    src: url('/style/font/robotocondensed-bolditalic-webfont.eot');
    src: url('/style/font/robotocondensed-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/style/font/robotocondensed-bolditalic-webfont.woff') format('woff'),
         url('/style/font/robotocondensed-bolditalic-webfont.ttf') format('truetype'),
         url('/style/font/robotocondensed-bolditalic-webfont.svg#roboto_condensedbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*-------------------------------------------------------------------------------------------------
					---PAGE SETUP--- The scheme is: https:// 
					fullPath is: https://contactquarterly.com
-------------------------------------------------------------------------------------------------*/
body.init, .init {visibility: hidden;}
/*-------------------------------------------------------------------------------------------------
					---USED BY DOM.FEATURETEST---
-------------------------------------------------------------------------------------------------*/
body.featureTest {margin:0; padding:0; border-width:0; visibility:hidden; }
body.featureTest2 {margin:10px; padding:0; border-width:0; visibility:hidden; }

body { color:#000000; background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:14px; }


body div#msg_board {overflow:auto;}

div#shroud {background-color:#ffffff;}

div#msg_board.set > * {display:none; }

div#msg_board.set > *,
body.mobile div#msg_board.set > div#progress_message {position:absolute; left:50%; margin-top:100px; }

div#msg_board.set.initialize > * {left:0px; }

div#msg_board.set *.block,
body.mobile div#msg_board.set {display:block; }




body.mobile div#msg_board.set > *{position:static; left:auto; width:50%; /*width:1068px;*/ margin-left:auto; margin-right:auto; }
body.mobile div#msg_board.set .overlay {position:relative; margin-top:0px; }

div#msg_board.ready,
div#shroud.ready {display:block;}

div#msg_board.comments_panel div#comments_panel {margin-top:10px; }

div#msg_board .center {margin-left:auto; margin-right:auto; text-align:center; }

div#msg_board .agree {position:absolute; top:-1000px; left:-1000px; height:0px; }

.dummy {display:none; }

/*-------------------------------------------------------------------------------------------------
					---PAGE SETUP PRINT VIEW---
-------------------------------------------------------------------------------------------------*/
body.print-view div.banner div.top-quick-links,
body.print-view div.sub-banner {visibility: hidden;}

body.print-view div.banner-image div.banner-cover-1,
body.print-view div.banner-image div.banner-cover-2 {opacity:1; background-color:#ffffff; }
body.print-view div.banner-image img.banner-scribble {display:none; }

body.print-view div.banner-image h1,
body.print-view div.banner-image h2,
body.print-view div.banner-image h3 { /*color:#000000;*/ color:#0b3a4b; }

body.print-view div.banner-image h3 {left:300px; }

body.print-view div.left-bar,
body.print-view div.picture,
body.print-view div.tail,
body.print-view div.logged_in_as,
body.print-view div.return-to-top {display:none; width:0px; border-width:0px; }



/*---------------------------------------------------------------------------
			---Base Style for msg_board messages---
---------------------------------------------------------------------------*/
div#msg_board > div,
div#msg_board form > div.outer {
	font-size:14px; box-shadow:0px 1px 1px 1px #afafb0; padding:12px 16px; 
	background-color:#a5b8c6; color:#000000; 
 	text-align:left; overflow:auto}
 	
/*body.mobile div#msg_board > div,
body.mobile div#msg_board form > div.outer {padding-right:0px; padding-left:0px; }*/

body.mobile div#msg_board > div,
body.mobile div#msg_board form > div.outer {
	font-size:18px;
}
	

div#msg_board input[type=button],
div#msg_board input[type=submit]{cursor:pointer;}

div#msg_board input.action,
div#msg_board span.action {
	background-color:transparent; font-size:16px; font-family:roboto_condensed, Georgia, Times, serif;
	border-width:0px; color:#165377; margin:0px; 
}
div#msg_board input[type=button]:hover,
div#msg_board input[type=submit]:hover {color:#0b3a4b;}
div#msg_board input[type=button].close {float:right; font-size:16px;}
body.mobile div#msg_board input[type=button].close {font-size:24px;}
div#msg_board input[type=button].close + *.title {margin-top:10px; }
div#msg_board *.title {
	background-color:transparent; font-size:21px; font-family:roboto_condensed, Georgia, Times, serif;
	border-width:0px; color:#165377; /*clear:right;*/ margin-bottom:10px;
}
div#msg_board p.head,
div#msg_board div.head {margin:20px 0; clear:right;}
div#msg_board p[name~=messageText],
div#msg_board p.messageText,
div#msg_board div[name~=messageText],
div#msg_board div.messageText {/*text-align:center;*/ text-align:left; white-space:pre-wrap; line-height:1.5; }
div#msg_board div.input { margin:1em auto 0px 0px;}
div#msg_board table {margin:0 auto; text-align:center; width:100%;}
body.mobile div#msg_board table {width:auto;}

div#msg_board > div.messageAlert.Warning,
div#msg_board > div.confirm.Warning,
div#msg_board > div.logInError.Warning {margin-top:120px; background-color:#ffc0c0; }

div#msg_board div div.form {position:relative; }
div#msg_board div input[type="text"],
div#msg_board div input[type="password"],
div#msg_board div textarea {
	background-color:#ffffff; border-width:0px; padding:4px 10px 4px 8px; vertical-align:middle; margin-bottom:11px; 
	max-width:90%;
	width:90%;
}

div#msg_board div input[type="text"][defaultvalue],
div#msg_board div textarea[defaultvalue] {color:#c0c0c0; }

div#msg_board div input.enter[type="text"][defaultvalue],
div#msg_board div textarea.enter[defaultvalue] {color:#000000;}

div#msg_board table.input td {padding-bottom:7px; vertical-align:middle; text-align:left; }
div#msg_board table.input tr td:first-child {padding-right:1em; color:#165377; }
div#msg_board table.input tr:first-child input {margin-bottom:1px; }

div#msg_board div.confirm table.last.input td {text-align:center; width:50%}

div#msg_board div span.label {margin-right:1em; }

div#msg_board a {color:#da8918; }
div#msg_board a:hover {color:#c46702; }

div#msg_board a.siteLink {color:blue; }
div#msg_board a.siteLink:hover {text-decoration: underline; }

/*---------------------------------------------------------------------------
			---Style for the Login form---
---------------------------------------------------------------------------*/
.login_message {display: none; }
/*div#msg_board form.logIn {display:none;}*/
div#msg_board form.logIn {max-width:330pt; }
body.mobile div#msg_board form.logIn {margin:0 auto; max-width:none;}
				
div#msg_board div.logInError {padding:12pt; margin-top:150pt; }

div#msg_board .logIn div.buttons {text-align:center; border-bottom:1px dotted black; padding:5pt 0 5pt 0; }
div#msg_board .logIn div.buttons table td:first-child {text-align:left; padding-right:12pt; }

div#msg_board .logIn p.head {font-size:21px; font-family:roboto_condensed_bold, Georgia, Times, serif; margin:0 0 1em 0; color:#185377; }
div#msg_board .logIn p.note { margin:1em 0 1em 0;}
div#msg_board .logIn p.warning { margin:1em 0 1em 0; color:#185377; }
/*div#msg_board .logIn input[type~=text] {color:#000000; }*/
div#msg_board .logIn button {font-size:12px; }

div#msg_board .logIn ol {list-style-type: none; padding:0 0 1em 0; margin-bottom: 0; max-width:330pt; }
body.mobile div#msg_board .logIn ol {max-width: none;}
div#msg_board .logIn ol li {clear:right; }
div#msg_board .logIn ol li:first-child {margin-bottom:2em; }
div#msg_board .logIn ol li label {display:inline-block; }
div#msg_board .logIn ol li input {float:right; }

div#msg_board .logIn div.keep-me {margin-bottom:2em; padding-top:1em; }
div#msg_board .logIn div.keep-me input[name="keepMe"]{vertical-align: top; float:left; }
div#msg_board .logIn div.keep-me input[name="keepMe"] + span {display: inline-block; vertical-align: top; margin-left:6px; margin-top:-4px; }


div#msg_board > div.messageAlert.sub-in table.last {display:none; }
div#msg_board > div.messageAlert.sub-in p.center {margin-top:0; }
div#msg_board > div.messageAlert.sub-in p.center > a {
	color: #165377;
	font-family: roboto_condensed,Georgia,Times,serif;
	font-size: 16px;
}

/*---------------------------------------------------------------------------
			---Style for the Join Maiing List---
---------------------------------------------------------------------------*/
div#msg_board div#mail_list_panel {max-width: 550px;}
div#msg_board div#mail_list_panel div.form table.input {max-width: 400px; }
div#msg_board div#mail_list_panel div.form table.input tr td:first-child {width:110px; max-width:110px; }
div#msg_board div#mail_list_panel div.form table.input tr td:first-child + td{width:350px; max-width:350px; }
/*---------------------------------------------------------------------------

/*---------------------------------------------------------------------------
			---Style for the Search Panel---
---------------------------------------------------------------------------*/
div#msg_board form#search_panel {width:560px; }
body.mobile div#msg_board form#search_panel {width:1100px; }


div#msg_board form#search_panel div.input.author div.keyword{display:none;}
div#msg_board form#search_panel div.input.author div.author{display:block;}

/*div#msg_board form#search_panel table {margin:0 auto; text-align:center; width:100%;}*/
/*div#msg_board form#search_panel table.main-options {margin-bottom:20px; }*/
div#msg_board form#search_panel table.last tr:first-child {height: auto;}
div#msg_board form#search_panel table tr:first-child {height:40px; vertical-align:top}

div#msg_board form#search_panel table td.left {text-align:left; }
div#msg_board form#search_panel div.input div.keyword,
div#msg_board form#search_panel div.input div.author
 {margin-top:0px; margin-bottom:20px; }
 
body.mobile div#msg_board form#search_panel input[name=keyword]
 {width:880px; }
 
div#msg_board form#search_panel div.input div.author {display:none;}



div#msg_board div#progress_message {top:100px; min-width:300px; max-width:90%; border:3px outset white; padding:12px; background-color:#405060; overflow:visible;}
div#msg_board div#progress_message > p{text-align:center; font-size:10pt; color:white;}

div#msg_board div#progress_message div.progress {height:12px; margin:0 auto; position:relative; width:95%;} 

div#msg_board div#progress_message div.progress div#progress_message_bar {
	position:absolute; width:0px; height:12px; max-width:100%;
	overflow:hidden; background-color:#da8918; color:#43be07; 
}



.cart a.cart {display:inline-block; width:20px; height:20px; 
	background-repeat: no-repeat; background-image:url('https://contactquarterly.com/images/elements/cart-sm-bw-clean.png');}

.cart a:hover{
	background-position: 0 -20px; 
}
div.main {margin:0in auto 0 auto; overflow:hidden; max-width:1100px; border-style:solid; border-color:black; border-width:0 1px 1px 1px; position:relative; z-index:0; }


div.sub-banner {position: relative; z-index:1; }

ul.menuType {white-space: nowrap; list-style-type:none; margin:0 auto; padding:0; }
div[menuboxes] {z-index:1000; }
div[menuboxes] div[menu~=container] {display:block; position:absolute; overflow:hidden; z-index:inherit; padding:0 2px; visibility:hidden; }
div[menuboxes] div[menu~=container].display-none {display:none; }
div[menuboxes] div[menu~=container].display-block {display:block; }

div[menu~=container] ul[menu] {position:relative; z-index:inherit; }

/*table.menuTable a > span {display:block; margin-top:-6px; }*/
div.hoverBox {
	z-index:1; border:1px solid #767676; border-radius:5px; padding:6px 4px; font-size:11px; 
	color:#000000; background-color:#f7faf9;  text-align:left; white-space:nowrap;}
div.hoverBoxVertical {
	z-index:1; text-align:left;
	color:#000000; background-color:#f7faf9; font-size:11px; border:1px solid black; border-radius:5px; padding:6px 4px;  white-space:nowrap;
	line-height:normal; margin-left:9pt;}
div.hoverBoxWhite {
	z-index:1; border:1px solid #080808; padding:6px 4px;  border-radius:5px; font-size:11px; 
	background-color:#efefef; color:#080808; text-align:left; line-height:1.42;}

span.anchor {display:inline-block; width:1px; height:1px; }

/*-------------------------------------------------------------------------------------------------
					---SCROLL STYLES---

	Convention:	
		All elements that have an attribute customScroll will have custom scroll installed
		at load time.
-------------------------------------------------------------------------------------------------*/
*.unselectable {
	user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
/*---------------------------------------------------------
	scrollShell is an attribute installed  on the 
	shell of the original elt
	
	It's overflow is set to visible so that: 
		a)no scroll bars 
		b)box shadow on the scrollContainer can be seen
------------------------------------------------------------*/
*[scrollShell] {overflow:visible; padding:0px; }	

/*---Alternate solution for focus is to place keyboard handlers in the elt shell-------------*/
/*div[scrollShell]:focus {outline:blue 1px solid; outline-offset:1px; box-shadow: 0 0 1em gold; }*/


div.scrollContainer {overflow: hidden; position: relative; outline-width:0px;}

div.scrollContainer:focus {/*outline:#e2a363 1px solid; outline-offset:0px; box-shadow: 0 0 2em gold;*/  }
div.scrollContainer.init div.scrollHbar, div.scrollContainer.init div.scrollVbar {visibility: hidden;}

/*-----------------------------------------------------------------------------------
	We need width:100% below for correct width sizing - to match the menu items
	they drop down from.  It eliminates the possibility of a horizotal scroll bar.
	But we do not want a horizontal scroll bar anyway.
-------------------------------------------------------------------------------------*/
div.scroll {position:absolute; width:100%; }
div.scrollCorner {
	background-color:#567c96;
	width:8px;
	height:8px;
	position:absolute;
	bottom:0;
	right:0;
}

div.scrollHBar {
    background: none repeat scroll 0 0 #567c96;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 8px;
}

div.scrollVBar {
    background: none repeat scroll 0 0 #567c96;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 8px;
}

.scrollVBar *,
.scrollHBar *
{
	margin: 0;
	padding: 0;
}

.scrollTrack {
	background: none repeat scroll 0 0 #567c96;
	position: relative;
}
div.ftext .scrollTrack {
	background-color:#dddddc;
}
div.scrollVBar .scrollTrack {/*background: url("D_web.png") repeat scroll 0 0 #DDDDEE;*/}
.scrollDrag {
	background: none repeat scroll 0 0 #165377;
	cursor: pointer;
	left: 0;
	position: relative;
	top: 0;
}
div.ftext .scrollDrag {
	background-color:#c6c5c5;
}
div.scrollVBar .scrollDrag {/*background: url("D_web.png") repeat scroll 0 0 #e7bb38;*/}

.scrollCap {
    display: none;
}

.scrollArrow {
	background: none repeat scroll 0 0 #50506D;
	cursor: pointer;
	display: block;
	text-indent: -20000px;
}

.scrollVBar .scrollArrow.scrollArrowUp {
	display:none;
	height: 16px;
	/*background:url("ArrowU_web.png");*/
}
.scrollVBar .scrollArrow.scrollArrowUp:hover, .scrollVBar .scrollArrow.scrollArrowDown:hover {
	background-color:black; background-position:-16px, 0;
}

.scrollVBar .scrollArrow.scrollArrowDown {
	display:none;
	height: 8px;
	/*background:url("ArrowD_web.png");*/
}

.scrollVBar .scrollArrow:focus {
	/*outline: medium none;*/
}

.scrollHBar .scrollArrow,  
.scrollHBar .scrollTrack, 
.scrollHBar .scrollDrag {
	width: 8px;
	height: 100%;
	float:left;
}

.scrollHBar .scrollArrow.scrollArrowUp {/*background:url("smArrowL_web.png");*/}
.scrollHBar .scrollArrow.scrollArrowDown {/*background:url("smArrowR_web.png");*/}
.scrollHBar .scrollArrow.scrollArrowDown:hover, .scrollHBar .scrollArrow.scrollArrowUp:hover {background-position:0 -8px; background-color:black; }

.scrollHBar .scrollArrow:focus {
	/*outline: medium none;*/
}


/*---------------------------------------------------------------------------
			---Style for Left Menu Bar---
---------------------------------------------------------------------------*/
@keyframes slide-in {
	from {
		left : -175px;
	}
	to {
		left:0px;
	}
}
@keyframes slide-out {
	from {
		left:0px;
		
	}
	to {
		left : -175px;
	}
}

.slide-out {
	-webkit-animation: slide-out .8s forwards; /* Safari 4+ */
	-moz-animation:    slide-out .8s forwards; /* Fx 5+ */
	-o-animation:      slide-out .8s forwards; /* Opera 12+ */
	animation:         slide-out .8s forwards; /* IE 10+, Fx 29+ */
}
.slide-in {
	-webkit-animation: slide-in .8s forwards; /* Safari 4+ */
	-moz-animation:    slide-in .8s forwards; /* Fx 5+ */
	-o-animation:      slide-in .8s forwards; /* Opera 12+ */
	animation:         slide-in .8s forwards; /* IE 10+, Fx 29+ */
}


div.left-bar {margin-left:65px; width:175px; 
		background-color:#567c96; /*height:700px;*/ float:left; height:auto;
		font-family:roboto_condensed, Georgia, Times, serif; color:#ffffff; 
		
}

body.mobile div.left-bar{ margin-left:0px; 
	font-family:roboto_condensed, Georgia, Times, serif; color:#ffffff;
	background-color: transparent; float: none; 
	position:absolute; top:auto; width:175px;
	z-index:2; margin-top:64px;
	left:-175px; 
	background-color:#567c96;
	transition:0.8s;
	display:none; 
}

body.mobile div.left-bar.on {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -8px);
	left:175px; 
}

div.left-bar span.italic {font-family:roboto_condensed_italic, Georgia, Times, serif; }
div.left-bar ul li table td + td > div{height:13px; vertical-align: middle; width:13px; cursor: pointer;}
div.left-bar ul li[isexpandable] table td + td > div{
	background-repeat: no-repeat; background-position:3px -13px; background-image: url('https://contactquarterly.com/images/elements/menu/amber-arrow2.png');
}
	
div.left-bar ul li.menuOpen[isexpandable] table td + td > div{
	background-repeat: no-repeat; background-position:1px 0px;
}
div.left-bar ul li table{border-collapse: collapse;}
div.left-bar ul li, div.tail td,
div.sub-banner ul li {
	transition:background-color .3s ease 0s;
	-moz-transition:background-color .3s ease 0s;
	-webkit-transition:background-color .3s ease 0s;
	-o-transition:background-color .3s ease 0s;	
	
	transition:background-image .3s ease 0s;
	-moz-transition:background-image .3s ease 0s;
	-webkit-transition:background-image .3s ease 0s;
	-o-transition:background-image .3s ease 0s;	
	
	transition:color .3s ease 0s;
	-moz-transition:color .3s ease 0s;
	-webkit-transition:color .3s ease 0s;
	-o-transition:color .3s ease 0s;	
}
div.sub-banner, div.left-bar {white-space: nowrap;}
div.sub-banner > ul > div[menuboxes] li a, div.left-bar li a {display:inline-block; line-height:16px; }


/*--------------------Left Menu Bar - Corner---------------------------------------------------------------*/
div.left-bar-corner {height:64px; border-bottom:1px solid #567c96; }
	
body.mobile div.left-bar-corner {display:none; margin-top:233px; 
	height:64px; border-bottom:1px solid #567c96; }
		
/*--------------------Left Menu Bar - Upper----------------------------------------------------------------*/
div.left-bar div.left-bar-upper {font-size:14px; /*padding-top:4px;*/ padding-bottom:10px;}
body.mobile div.left-bar div.left-bar-upper {background-color:#567c96;}
div.left-bar div.left-bar-upper ul {width:150px; margin: 0 auto; }
body.mobile div.left-bar div.left-bar-upper ul {padding-top:10px; }
div.left-bar div.left-bar-upper ul li { margin-top:8px; padding:4px 0; 
	background-color:#165377;  
}
div.left-bar div.left-bar-upper ul li:first-child {	margin-top:0px; }
div.left-bar div.left-bar-upper ul li:first-child table td > a:hover {color:#da8918; }
div.left-bar div.left-bar-upper ul li[isexpandable]{padding-bottom:8px; }


div.left-bar div.left-bar-upper ul li.menuHover {color:#da8918; }
div.left-bar div.left-bar-upper ul li table{width:100%; float:right; }
div.left-bar div.left-bar-upper ul li table td {text-align:center; }
div.left-bar div.left-bar-upper ul li table td + td{width:13px; }

div.left-bar div.left-bar-upper ul.sublink {background-color:#165377; }
div.left-bar div.left-bar-upper ul.sublink > li:first-child {margin-top:0px; }
div.left-bar div.left-bar-upper ul.sublink.menuOpen {display:block;}
div.left-bar-upper ul li table td + td > div{margin-right:6px; }
div.left-bar-upper ul li table td  > a{padding-left:19px; /*display:inline-block; line-height:16px; */ }

div.left-bar div.left-bar-upper ul li.special-notice {background-color:#da8918;}
div.left-bar div.left-bar-upper ul li.special-notice table td > a,
div.left-bar div.left-bar-upper ul li.special-notice.menuHover table td > a {color:#ffffff;}

/*--------------------Left Menu Bar - Sub menu generals----------------------------------------------------
	Sub-menu:	Refers to the both the menu panel that drops down from the top horizontal bar
				as well as the panel that appears inside the left bar, under the upper options.
				
				These specification are valid for both or these manifestations.
-----------------------------------------------------------------------------------------------------------*/
ul.sub-menu {font-family:roboto_condensed, Georgia, Times, serif; font-size:16px; background-color:#567c96;
	color:#ffffff;
}
ul.sub-menu li {padding-bottom:8px; }
ul.sub-menu span.italic {font-family:roboto_condensed_italic, Georgia, Times, serif; }
ul.sub-menu li table {float:right;}
ul.sub-menu ul.sublink {color:#0b3a4b; font-family:roboto_condensed_bold, Georgia, Times, serif; 
	margin-bottom:11px; }
ul.sub-menu ul.sublink li.sub-category {color:#e3f5ff; /*#f9e785;*/ font-size:13px; }
ul.sub-menu ul.sublink li.sub-category a {line-height: 1; }
ul.sublink {display:none;}
ul.sub-menu ul.sublink span.italic {font-family:roboto_condensed_bold_italic, Georgia, Times, serif; }
ul.sub-menu ul.sublink li {padding:0px; margin:0; line-height:1.1; }
ul.sub-menu ul.sublink li.menuHover {color:#da8918; }

ul.sub-menu li.covid-19 {color:#f6eb14; }
ul.sub-menu li.menuHover.covid-19 {color:#ffff00; }



/*--------------------Left Menu Bar - Middle----------------------------------------------------------------*/
div.left-bar div.left-bar-middle {/*padding-top:60px;*/ /*margin-top:40px;*/ text-align:right; top:0px; }
body.mobile div.left-bar div.left-bar-middle {background-color:#567c96;}
div.left-bar div.left-bar-middle.floating {position:fixed; width:175px; top:0px; }
div.left-bar div.left-bar-middle.bottom {position:absolute; width:175px; top:auto; }
div.left-bar div.left-bar-middle ul.sub-menu {/*padding-top:20px;*/ }
div.left-bar div.left-bar-middle > div.left-bar-middle-bar {
	position:relative; font-size:16px; color:#165377;
	width:100%; /*visibility:hidden;*/
	padding-bottom:10px; /*border-bottom:1px solid #afafb0;*/
	/*box-shadow:0 1px 2px #afafb0;*/
	background-repeat: no-repeat; background-position:10px bottom; background-image: url('https://contactquarterly.com/images/elements/menu/underscore2.png');
}

div.left-bar div.left-bar-middle > div.left-bar-middle-bar.show,
div.left-bar div.left-bar-middle.floating > div.left-bar-middle-bar,
div.left-bar div.left-bar-middle.bottom > div.left-bar-middle-bar {/*visibility:visible;*/ cursor: pointer; }
/*div.left-bar div.left-bar-middle > div.left-bar-middle-bar > div:first-child {background-color:#da8918; height:8px;}*/
div.left-bar div.left-bar-middle > div.left-bar-middle-bar > div {font-family:roboto_condensed, Georgia, Times, serif; 
margin-top:3px; margin-right:27px; 
}
div.left-bar div.left-bar-middle > div.left-bar-middle-bar > div > span{display:none;/*display:block; font-family: arial, san-serif; font-size:11px;
margin-top:-3px;*/
}

div.left-bar div.left-bar-middle > div.left-bar-middle-bar > div + div{
	position:absolute; left:0px; top:7px; height:12px; width:24px;
	background-image: url('https://contactquarterly.com/images/elements/back-to-top-working-sm.png');
	margin:0; background-position:0px 14px;
}
div.left-bar div.left-bar-middle > div.left-bar-middle-bar > div + div:hover {
	background-position:0px 0px;
}


div.left-bar div.left-bar-middle ul.sub-menu li table {margin-right:14px; margin-bottom:3px; }


div.left-bar div.left-bar-middle div.scroll ul.sub-menu  > li.menuHover  {overflow:visible;
	background-repeat: no-repeat; background-position:22px bottom; 
	background-image: url('https://contactquarterly.com/images/elements/menu/underscore2.png');
}
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------
div.left-bar div.left-bar-middle div.scroll ul.sub-menu > li.menuOpen {overflow:visible;
	background-repeat: no-repeat; background-position:22px bottom; background-image: url('https://contactquarterly.com/images/elements/menu/underscore2.png');
}

Note:  When we click a caret the menu system installs the class "menuOpen" on the <li> elt and on the <ul> submenu.  When we click it again
it removes this class.  If we install the class "pageOpen" instead on an <li> elt the underline will always show. With "menuOpen" on <li> elts
disabled the underline will never stay on a clicked caret.
-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
div.left-bar div.left-bar-middle div.scroll ul.sub-menu > li.pageOpen {overflow:visible;
	background-repeat: no-repeat; background-position:22px bottom; background-image: url('https://contactquarterly.com/images/elements/menu/underscore2.png');
}

div.left-bar div.left-bar-middle ul.sublink.menuOpen {display:block;}

/*----------We place init on the left-bar to calcalulate the maximum left bar expanded height------*/
div.left-bar.init {visibility:hidden;}
body.mobile div.left-bar.init {left:-175px; }
div.left-bar.init div.left-bar-upper ul.sublink,
div.left-bar.init div.left-bar-middle ul.sublink {display:block; visibility: hidden;}


/*--------------------Left Menu Bar - Lower----------------------------------------------------------------*/
div.left-bar-lower > div {
	background-color:#da8918; margin:0 auto 8px auto; height:30px; width:145px;
}
div.left-bar-lower > div.blue {
	background-color:#165377;
}

div.left-bar-lower > div > a {
	color:#ffffff; font-size:14px; font-family:'roboto_condensed_bold', Georgia, Times, serif; display:block; text-align:center; padding-top:5px; 
}
div.left-bar-lower > div.blue > a {
	color:#ffffff; font-size:14px; font-family:'roboto_condensed', Georgia, Times, serif; display:block; text-align:center; padding-top:5px; 
}
div.left-bar-lower > div:first-child > a {margin-top:10px;/*margin-top:60px;*/ /*font-weight:bold; */}
div.left-bar-lower table {margin:12px auto 0 auto; padding-bottom:12px; border-bottom-width:1px; border-bottom-color: transparent; 
border-bottom-style: solid;}
div.left-bar-lower table td {padding: 0 2px; }

/*-----------------------Banner----------------------------------------------------------------------------*/
div.banner {/*height:270px;*/ position:relative; width:100%; top:0; left:0; overflow:visible; /*outline:1px solid green; outline-offset:0px;*/ }

/*-----------------------Top Quick Links-------------------------------------------------------------------*/
div.banner div.top-quick-links {float:right; margin-top:20px;  margin-bottom:9px; margin-right:76px;
	color:#165377; font-size:16px; font-family:roboto_condensed_bold, Georgia, Times, serif;
}
div.banner > div.left-bar-top {
	position:absolute; top:0px; left:65px; width:175px; bottom:0px; background-color:#567c96;
}

body.mobile div.banner div.top-quick-links {font-size:20px; margin-right:10px; }

div.banner div.cq-site {display:none; }
div.banner div.cq-clone {position:absolute; color:white; font-size:48px; opacity:.4; background-color:transparent; bottom:0px; right:10px; }


div.banner div.top-quick-links table {border-collapse: collapse;}
div.banner div.top-quick-links ul {margin:0px; list-style-type: none; text-align:right}
div.banner div.top-quick-links ul li {display: inline-block; padding:1px 7px;}

/*
div.banner div.top-quick-links td {padding:1px 7px;}
div.banner div.top-quick-links li td {padding:0px;} */

div.banner div.top-quick-links ul li.cart a {display:block; width:20px; height:20px; 
	background-repeat: no-repeat; background-image:url('https://contactquarterly.com/images/elements/cart-sm-black-amber-clean.png');}
	
div.banner div.top-quick-links ul li.covid-19 a {display:inline-block; padding:4px 6px; color:red; font-weight:bold; 
	background-color:#f6eb14; }
div.banner div.top-quick-links ul li.covid-19.menuHover a {background-color:#ffff00; }


div.left-bar div.left-bar-upper ul li.covid-19 {color:red; background-color:#f6eb14;}
div.left-bar div.left-bar-upper ul li.covid-19.menuHover {background-color:#ffff00; }

div.left-bar div.left-bar-upper ul li.lower-left-orange {color:#ffffff; background-color:#da8918; }
div.left-bar div.left-bar-upper ul li.lower-left-orange.menuHover {background-color:#da8918; }



div.banner div.top-quick-links ul li.cart.menuHover a{
	background-position: 0 -20px; 
}

div.banner div.top-quick-links ul li.menuHover { color:#da8918; }

div.main.subscription div.top-quick-links ul li.subscription,
div.main.donate div.top-quick-links ul li.donate,
div.main.store div.top-quick-links ul li.store { color:#da8918; }

/*-----------------------Banner Image----------------------------------------------------------------------*/
div.banner-image {position:relative; 
	margin-top:9px; /*height:180px; background-color:#f39301;*/
	clear:right;
}
	/*--Force image to be correct dimension? or */
div.banner-image div.picture {max-width:1100px;  height:auto; line-height:0px; overflow: hidden; position:relative}

div.banner-image div.picture img {width:100%; }

div.banner-image div.picture img#banner-img2 {position:static; }
div.banner-image div.picture img#banner-img1 {position:absolute; top:0; left:0; opacity:0;}


div.banner-image a.banner-cover-logo {cursor:pointer; }
div.banner-image div.banner-cover,
div.banner-image a.banner-cover {position:absolute; margin-top:0px; top:0; left:65px; height:100%; width:175px; }
div.banner-image div.banner-cover-1 {opacity:.66; background-color:#165377; }
div.banner-image div.banner-cover-2 {opacity:.2; background-color:#513a43; }
div.banner-image img.banner-scribble {position:absolute; top:-21.66%; left:6px; height:142.33%; width:auto;  }
body.mobile div.banner-image img.banner-scribble {width:206px; top:-30px; left:35px; }

div.banner-image h1 {font-size:45px; font-family:roboto_condensed_italic, Georgia, Times, serif; line-height:38px;
	position:absolute; font-weight:normal; text-align:center; left:9px; top:18px; color:#ffffff; margin:0;
}
body.mobile div.banner-image h1 {font-size:28px; line-height:25px; top:11px; }
div.banner-image h2 {font-size:18px; font-family:roboto_condensed, Georgia, Times, serif; line-height:1.1;
	position:absolute; font-weight:normal; text-align:left; left:17px; top:104px; color:#ffffff; margin:0;
}
body.mobile div.banner-image h2{font-size:11px; top:66px; }
div.banner-image h3 {font-size:21px; text-align:right; font-weight:normal; color:#ffffff; font-family:roboto_condensed_bold_italic, Georgia, Times, serif; position:absolute; right:16px; top:37%; white-space:nowrap; margin:0;}


body.mobile div.banner-image h3{font-size:13px; top:42px; }
div.banner-image h3 span {font-family: arial, san-serif; font-size:14px; display:block; font-weight:normal; margin-top:-4px;}
body.mobile div.banner-image h3 span {font-size:10px;  margin-top:-2px; }

/*-----------------------Sub Banner - Top menu Links-------------------------------------------------------*/
div.sub-banner {
	float:left; 
	width:860px; 
	height:64px; text-align:right;
	font-size:18px; font-family:roboto_condensed_bold, Georgia, Times, serif; border-bottom:1px solid #afafb0;
	box-shadow:0 1px 2px #afafb0;
}


div.sub-banner div.mobile-menu-icon {
	float:left; margin:20px 5px 0 15px; display:none;
}
div.sub-banner div.mobile-menu-icon:hover {cursor: pointer;}

div.mobile-menu-icon div.bar1,
div.mobile-menu-icon div.bar2,
div.mobile-menu-icon div.bar3 {
	width: 30px;
	height: 2px;
	background-color: #333;
	margin: 6px 0;
	transition: 0.4s;
}

.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-5px, 5px);
	transform: rotate(-45deg) translate(-5px, 5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-6px, -6px);
	transform: rotate(45deg) translate(-6px, -6px);
}




	/*------------------------------------------------------------------------------------------------------
		It is essential for the calculation of the position of the drop downs to have border-collapse:separate,
		so that there is td elements do not behave excentrically, border-spacing:0px is because we do 
		not want any separation between table cells - and also not sure our calculations will hold up.
		
		These two specification are done by default in normalize_css.php
		
		These calculations now work in FireFox, Safari, Chrome, Opera, and IE!!!
	--------------------------------------------------------------------------------------------------------*/
div.sub-banner > ul {/*margin-right:46px;*/ list-style-type:none; padding:0px; margin-top:0px; padding-left:54px;
	height:100%; width:100%;}
	
body.mobile div.sub-banner > table {float:none; margin-right:0px; }
	
div.sub-banner > table tbody {height:100%; }
div.sub-banner > table tr {
	vertical-align: top;
}
div.sub-banner > ul > li {float:left; vertical-align:top; padding:0; border-left:1px solid transparent; border-right:1px solid transparent; height:100%; }
div.sub-banner > ul > li table {width:100%;}
/*div.sub-banner > table td a { float:right; padding:7px 35px 0px 19px;  display:block; }*/
div.sub-banner > ul > li a {text-align:right;  padding:7px 35px 0px 19px; /*margin-top:18px;*/ display:block; }
div.sub-banner > ul > li > div {position:relative; height:100%; }
div.sub-banner > ul > li div.bar {position:absolute; width:100%; top:0; height:8px; background-color:#da8918; display:none;}
div.sub-banner > ul > li.menuHover {box-shadow:1px 0px 2px #afafb0, -1px 0px 2px #afafb0; 
   border-left:1px solid #afafb0; 
   border-right:1px solid #afafb0; 
}
div.sub-banner > ul > li.menuHover div.bar {display:block; }
div.sub-banner > ul > li[selected] div.bar {display:block; }

div.sub-banner > ul > li span { display:block; font-family: arial, san-serif; font-size:12px; }
div.sub-banner > ul > li.menuHover {background-color:#567c96; color:#ffffff;}

/*-----------------------Sub Banner - menuBoxes (drop downs)-----------------------------------------------*/
div.sub-banner > ul > div[menuboxes] > div[menu~=container] {margin-top:1px; }
div.sub-banner > ul > div[menuboxes] > div[menu~=container] > ul[menu] {
	z-index:1; padding-top:10px; padding-bottom:8px;
	border-left:1px solid #afafb0; 
	border-right:1px solid #afafb0;
	border-bottom:1px solid #afafb0;
	box-shadow:1px 0px 2px #afafb0, -1px 0px 2px #afafb0;
	overflow:hidden;
}
div.sub-banner > ul > div[menuboxes] > div[menu~=container] > ul[menu] li {margin-left:24px; margin-right:32px; padding-bottom:12px; }
div.sub-banner > ul > div[menuboxes] > div[menu~=container] > ul[menu] li.menuHover {color:#da8918; }
div.sub-banner > ul > div[menuboxes] > div[menu~=container] > ul[menu] li.menuHover.covid-19 {color:#ffff00;  }
div.sub-banner > ul > div[menuboxes] > div[menu~=container] > ul[menu] ul.sublink {display:none; }


/*-------------------------------------------------------------------------------------------------
					---Content Area---
					
Note: The current scheme for handling z-index is the one that works in all browsers.
-------------------------------------------------------------------------------------------------*/
div.content {float:left; position:relative; width:860px; }

div.content > div.fixed-matter {width:100%; overflow: hidden;  }
div.content > div.fixed-matter > div.grey-box {position:absolute; width:100%; bottom:0px; background-color:#ededed; height:6in; z-index:-1;}
div.content > div.fixed-matter > div.scribble {
		width:100%; height:350px; position:absolute; bottom:0px; 
   		background-image:url('https://contactquarterly.com/images/elements/bottom-scribble.png'); 
		background-position:300px 0px; 
		background-repeat: no-repeat; z-index:-1;}
div.content > div.fixed-matter > div.return-to-top {
	position:absolute; width:65px; height:30px; bottom:20px; right:80px;
	background-image:url('https://contactquarterly.com/images/elements/back-to-top.png');
	background-position:0px 30px;
	z-index:2; font-size:12px; font-style:italic; overflow:visible;
}

div.content > div.fixed-matter > div.return-to-top:hover {
	background-position:0px 0px;
}

div.content > div.fixed-matter > div.return-to-top > div{/*position:relative; top:24px;*/ margin:24px auto 0 auto;
}

/*-----------------------User matter content area general specs------------------------------------*/
div.user-matter {
	margin-bottom:52px; line-height:1.5; 
}

div.user-matter div.seo{display:none;}

div.user-matter p {
	margin:20px auto 20px 0;
	padding:0px 0;
}

/*-------------------------------------------------------------------------------------------------
					---Site Wide Links---
-------------------------------------------------------------------------------------------------*/
div.user-matter a,
div.user-matter input[type=button],
div.user-matter input[type=submit],
div.user-matter button {
	color:#c46702; border-width:0px; background-color: transparent; padding:0px;
}

div.user-matter a:hover,
div.user-matter input[type=button]:hover,
div.user-matter input[type=submit]:hover,
div.user-matter button:hover {
	color:#da8918;
}








div.user-matter a.no-link,
div.user-matter input[type=button].no-link,
div.user-matter input[type=submit].no-link,
div.user-matter button.no-link {
	color:inherit;
}

div.user-matter a.no-link:hover,
div.user-matter input[type=button].no-link:hover,
div.user-matter input[type=submit].no-link:hover,
div.user-matter button.no-link:hover {
	color:inherit;
}


div.user-matter img,
.box-shadow {
	box-shadow:0px 1px 1px 1px #afafb0;
}


/*-----------------------Tail Area-------------------------------------------------------------------------*/
div.tail {clear:left; width:1100px; background-color:#165377; color:#ffffff; 
	font-family:Arial; font-size:12px; line-height:18px;}

div.tail a {color:#ffffff; }
div.tail a:hover {color:#da8918;}


/*-------------------------------------------------------------------------------------------------
	---Style for fluid view version of tail
-------------------------------------------------------------------------------------------------*/
div.tail.fluid > div {display:inline-block; vertical-align:top; width:48%;}
div.tail.fluid > div.line-box-size {height:190px; width:1px; vertical-align:middle; }
div.tail.fluid > div.line-box-size + div {max-width:350px; }
div.tail.fluid span.divider {display:inline-block; vertical-align:top; height:136px; width:1px; border-right:1px solid #567c96; }

div.tail.fluid {text-align:center; line-height:normal; padding-top:27px; padding-bottom:8px; }
div.tail.fluid div.tail-section {display: inline-block; text-align:left; vertical-align:top; margin-bottom:20px; }
div.tail.fluid div.tail-section.logo{font-family:roboto_condensed_italic, Georgia, Times, serif; font-size:103px; 
	color:#567c96; padding-right:14px; padding-top:0px; margin-top:-12px; }
	
div.tail.fluid  div.tail-section.address {padding:0 7px 0 14px; }
div.tail.fluid  div.tail-section.center-text{padding:0 14px 0 17px; width:65%; }

div.tail.fluid  div.tail-section.center-text div.mass-council{display:inline-block; vertical-align:top; margin-bottom:10px; margin-right:15px; margin-left:4px; margin-top:10px; max-width:80px; width:25% }
div.tail.fluid  div.tail-section.center-text div.mass-council a{display:block; font-size:6px; text-align: justify; width:100%; margin:-8px 0 0 0; vertical-align:top; text-decoration:none;  letter-spacing: 0.5px }
div.tail.fluid  div.tail-section.center-text div.mass-council img {width:100%;}

div.tail.fluid  div.tail-section.center-text div.mass-council + div {display:inline-block; vertical-align:top; margin-right:0; width:65%;}
div.tail.fluid  div.tail-section.menu{padding-left:21px; }
div.tail.fluid  div.tail-section.menu ul {margin-top:-2px; }
div.tailv  div.tail-section.menu ul li {margin-bottom:0px; }
	
@media only screen and (max-width: 740px){
	div.tail.fluid > div {display:block; vertical-align:top; width:100%; margin:0 auto; }
	div.tail.fluid > div.line-box-size {display:none; height:190px; width:1px; vertical-align:middle; }	
		
	div.tail.fluid span.divider.first {display:none;}
	
	div.tail.fluid div.tail-section.center-text{width:60%; }
	
	div.tail.fluid div.tail-section.logo{font-size:75px; }
	
}
	
	

/*-------------------------------------------------------------------------------------------------------
						---Logged in schemeas NOTIFICATION---
body.logged-out:	When user is not logged in
body.logged-in:		When user has an account (is in ci_users table) and is logged in but is not a current subscriber
body.subscriber:	When user has an account (is in ci_users table) and is logged in and  is a current subscriber 

When an elt within the body has class:

logged-in: 'text for when a user needs to log in' - User is not logged in
subscriber:	'text for when a user needs to subscribe' - User is logged in but not a current subscriber
logged-out: 'text for when a user is all the the way logged in - (often nothing)'
-------------------------------------------------------------------------------------------------------*/
body .logged-out,
body .subscriber {display:none;}
body.logged-out span.logged-in,
body.logged-out a.logged-in {display:inline;}
body.logged-out li.logged-in {display: list-item;}
body.logged-out .logged-in {display:inline-block;}

body.logged-in .logged-in,
body.logged-in .logged-out {display:none;}
body.logged-in span.subscriber,
body.logged-in a.subscriber {display:inline;}
body.logged-in li.subscriber {display:list-item;}
body.logged-in .subscriber {display:inline-block;}

body.subscriber .logged-in,
body.subscriber .subscriber {display:none;}
body.subscriber span.logged-out,
body.subscriber a.logged-out {display:inline;}
body.subscriber li.logged-out {display:list-item;}
body.subscriber .logged-out {display:inline-block;}

/*---------------------logged_in_as NOTIFICATION------------------------------------------------------*/
div.logged_in_as {position:absolute; height:auto; width:auto; display:none;  color:blue; z-index:1;
   background-color:#b0b0b0; font-size:8pt; right:0px; top:0px; border:1px solid #7d7d7d; }
div.logged_in_as > div {padding:1pt 4pt 1pt 4pt; }
div.logged_in_as > div:first-child {border-bottom:1px solid #c0c0c0; }
div.logged_in_as > div:first-child + div {text-align:center; }
div.logged_in_as span {font-weight:normal; color:black}
div.logged_in_as span.view-width {color:blue; }
div.logged_in_as div.view_type_toogle_over {background-color:#cd3c2c;}

/*---------------------------------------------------------------------------
			---Style for Price Quote Table---
---------------------------------------------------------------------------*/
div.price.price-group {
	margin-top:10px; margin-bottom:6px; padding:6px 2px;
	background-color:#165377; color:#ffffff; 
}
div.price > div:first-child,
div.price > div.dollar {font-weight:bold; clear:left; }
div.price > div.label:first-child {font-weight:normal; font-style: normal;}
div.price > div.clear_left {float:none; width:1px; display:block; }
div.price  div {float:left; display:inline; }
div.price div + div {margin-left:7px;}
div.price div.dollar + div {width:auto; margin-left:0px; margin-right:0px; }
div.price div + div.dollar {width:auto; margin-left:0px; margin-right:0px; }
div.price + *{clear:left; }
div.price.quantity + p.addToCartButton {clear:left; }

div.price-listing {line-height:normal;}

div.user-matter div.price-listing p { margin:0; }

	/*-----------------------------------------------------------------------
				---Special Styling for download-instit---
	-----------------------------------------------------------------------*/
div.price.download_instit-xx-video div + div,
div.price.download_instit-zz-video div + div,
div.price.download_instit-en-video div + div,
div.price.download_instit-fr-video div + div,
div.price.download_instit-pt-video div + div,
div.price.download_instit-es-video div + div
{margin-left:0px; }

div.price.download_instit-xx-video div.strike_through,
div.price.download_instit-zz-video div.strike_through,
div.price.download_instit-en-video div.strike_through,
div.price.download_instit-fr-video div.strike_through,
div.price.download_instit-pt-video div.strike_through,
div.price.download_instit-es-video div.strike_through
{text-decoration: none; display:none;}

div.price.download_instit-xx-video div.strike_through + div,
div.price.download_instit-zz-video div.strike_through + div,
div.price.download_instit-en-video div.strike_through + div,
div.price.download_instit-fr-video div.strike_through + div,
div.price.download_instit-pt-video div.strike_through + div,
div.price.download_instit-es-video div.strike_through + div
{font-style:italic; }

div.price-listing p.addToCartButton input { margin-bottom:4px; }
div.price-listing p.addToCartButton a,
div.user-matter div.price-listing p.addToCart { /*margin-bottom:6px;*/ margin-bottom:0px; margin-right:8px; margin-top: 2px; display:inline-block;}
div.price-listing p.addToCartButtonOut input { color:#989898; text-decoration:line-through; margin-bottom:6px; }
div.price-listing p.addToCartButtonOut a { color:#989898; text-decoration:line-through; margin-bottom:8px; display:inline-block; }



div.price-listing p.price-listing-note{
	margin:1em 0;
}

div.price-listing span.out-of-print,
div.price-listing span.not-available {color:red;}

div.price-listing span.not-available.download_instit-zz-video,
div.price-listing span.not-available.download_instit-xx-video,
div.price-listing span.not-available.download_instit-en-video,
div.price-listing span.not-available.download_instit-fr-video,
div.price-listing span.not-available.download_instit-pt-video,
div.price-listing span.not-available.download_instit-es-video
{color: #000000; }

div.price-listing span.available {color: inherit;}



/*---------------------------------------------------------------------------
			---Special Styling for Video Price Quote Table---
---------------------------------------------------------------------------*/
div.price-listing.video div.price-listing-container {
	margin:1em auto;
}
div.price-listing.video div.price-listing-container div.price.price-group {
	display: inline-block; margin-right:1em;
	margin-top:0px; margin-bottom:0px; padding:0px 2px;
	background-color: transparent; color:#000000;
	vertical-align:top;
}
div.price-listing.video div.price-listing-container select {
	display: block; font-size:12px; padding-bottom:0px;
	border-radius: 0px;
	background-color: #efefef;
}
div.price-listing.video div.price-listing-container select:hover {background-color: #ffffff; }

div.user-matter div.price-listing.video div.price-listing-container div.price.price-group + select ~ p.addToCartButton,
div.user-matter div.price-listing.video div.price-listing-container div.price.price-group + select ~ p.addToCart {display:none; }



div.user-matter div.price-listing.video div.price-listing-container.rent-zz-video div.price.price-group + select ~ p.addToCartButton.rent-zz-video,
div.user-matter div.price-listing.video div.price-listing-container.rent-zz-video div.price.price-group + select ~ p.addToCart.rent-zz-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.rent-zz-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.rent-zz-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.lease-zz-video div.price.price-group + select ~ p.addToCartButton.lease-zz-video,
div.user-matter div.price-listing.video div.price-listing-container.lease-zz-video div.price.price-group + select ~ p.addToCart.lease-zz-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.lease-zz-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.lease-zz-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.download-zz-video div.price.price-group + select ~ p.addToCartButton.download-zz-video,
div.user-matter div.price-listing.video div.price-listing-container.download-zz-video div.price.price-group + select ~ p.addToCart.download-zz-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.download-zz-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.download-zz-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.download-xx-video div.price.price-group + select ~ p.addToCartButton.download-xx-video,
div.user-matter div.price-listing.video div.price-listing-container.download-xx-video div.price.price-group + select ~ p.addToCart.download-xx-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.download-xx-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.download-xx-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.download-en-video div.price.price-group + select ~ p.addToCartButton.download-en-video,
div.user-matter div.price-listing.video div.price-listing-container.download-en-video div.price.price-group + select ~ p.addToCart.download-en-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.download-en-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.download-en-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.download-fr-video div.price.price-group + select ~ p.addToCartButton.download-fr-video,
div.user-matter div.price-listing.video div.price-listing-container.download-fr-video div.price.price-group + select ~ p.addToCart.download-fr-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.download-fr-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.download-fr-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.download-pt-video div.price.price-group + select ~ p.addToCartButton.download-pt-video,
div.user-matter div.price-listing.video div.price-listing-container.download-pt-video div.price.price-group + select ~ p.addToCart.download-pt-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.download-pt-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.download-pt-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.download-es-video div.price.price-group + select ~ p.addToCartButton.download-es-video,
div.user-matter div.price-listing.video div.price-listing-container.download-es-video div.price.price-group + select ~ p.addToCart.download-es-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.download-es-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.download-es-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.download_instit-zz-video div.price.price-group + select ~ p.addToCartButton.download_instit-zz-video,
div.user-matter div.price-listing.video div.price-listing-container.download_instit-zz-video div.price.price-group + select ~ p.addToCart.download_instit-zz-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.download_instit-zz-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.download_instit-zz-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.download_instit-xx-video div.price.price-group + select ~ p.addToCartButton.download_instit-xx-video,
div.user-matter div.price-listing.video div.price-listing-container.download_instit-xx-video div.price.price-group + select ~ p.addToCart.download_instit-xx-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.download_instit-xx-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.download_instit-xx-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.download_instit-en-video div.price.price-group + select ~ p.addToCartButton.download_instit-en-video,
div.user-matter div.price-listing.video div.price-listing-container.download_instit-en-video div.price.price-group + select ~ p.addToCart.download_instit-en-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.download_instit-en-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.download_instit-en-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.download_instit-fr-video div.price.price-group + select ~ p.addToCartButton.download_instit-fr-video,
div.user-matter div.price-listing.video div.price-listing-container.download_instit-fr-video div.price.price-group + select ~ p.addToCart.download_instit-fr-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.download_instit-fr-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.download_instit-fr-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.download_instit-pt-video div.price.price-group + select ~ p.addToCartButton.download_instit-pt-video,
div.user-matter div.price-listing.video div.price-listing-container.download_instit-pt-video div.price.price-group + select ~ p.addToCart.download_instit-pt-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.download_instit-pt-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.download_instit-pt-video {display:block;}
div.user-matter div.price-listing.video div.price-listing-container.download_instit-es-video div.price.price-group + select ~ p.addToCartButton.download_instit-es-video,
div.user-matter div.price-listing.video div.price-listing-container.download_instit-es-video div.price.price-group + select ~ p.addToCart.download_instit-es-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCartButton.download_instit-es-video,
div.user-matter div.price-listing.video div.price-listing-container p.addToCart.download_instit-es-video {display:block;}



/*-------------------------------------------------------------------------------------------------
	--Adjustments for screen widths:
	Note on a desktop the screen width is 16px bigger than the viewport because the 
	screen width seems to include the scroll bar.
-------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1118px){
div.content {width:100%; }
div.left-bar{ margin-left:0px; 
	font-family:roboto_condensed, Georgia, Times, serif; color:#ffffff;
	background-color: transparent; float: none; 
	position:absolute; top:auto; width:175px;
	z-index:2; margin-top:64px;
	left:-175px; 
	background-color:#567c96;
	transition:0.8s;
	/*display:none;*/
}

div.left-bar.on {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -8px);
	left:175px; 
}

div.left-bar-corner {display:none; margin-top:233px; 
	height:64px; border-bottom:1px solid #567c96; }
		

div.left-bar div.left-bar-upper {background-color:#567c96;}

div.left-bar div.left-bar-upper ul {padding-top:10px; }

div.left-bar div.left-bar-middle {background-color:#567c96; position:static; }
div.left-bar div.left-bar-middle.floating {position:static; }
div.left-bar div.left-bar-middle.bottom {position:static; }

div.left-bar.init {left:-175px; }

div.sub-banner {width:100%; }

div.sub-banner div.mobile-menu-icon {display:block;  }

div.tail {width:100%; }
div.tail > table {margin: 0px auto 0px auto; }
div.tail > table td.tail-col3 { border-right-width:0px; }
div.tail td.tail-col4 {display:none; }

}

@media only screen and (max-width: 995px){
	div.banner-image h1 {font-size:35px; line-height:32px; top:10px; }
	div.banner-image h2 {font-size:16px; top:85px; }
}


@media only screen and (max-width: 890px){
	div.banner-image h3 {font-size:16px;}
}
@media only screen and (max-width: 800px){
	div.sub-banner {height:auto;}
	div.sub-banner > ul {width:243px; padding-left:64px; }
	div.sub-banner > ul> li {
		float:none;
		/*padding-left:40px; 
		max-width:200px;
		min-width:200px;*/
	}
	
	body.init div.sub-banner > ul > div[menuboxes] > div[menu~="container"] > ul[menu] {
		max-height:1000px;
		padding-top:10px; padding-bottom:8px;
		border-left:1px solid #afafb0; 
		border-right:1px solid #afafb0;
		border-bottom:1px solid #afafb0;
		box-shadow:1px 0px 2px #afafb0, -1px 0px 2px #afafb0;
	}
	div[menuboxes] div[menu~="container"] {padding:0px 0px; }
	
	/*--------------------No Transition while page is initializing-------------------------------*/
	body.init div.sub-banner > ul > div[menuboxes] > div[menu~="container"] > ul[menu],
	body.init div.sub-banner ul.menuType {
		margin:0 auto; position:static; max-height:0px; padding-top:0px; padding-bottom:0px; border-bottom-width:0px;
		transition-property: none;
		transition-duration: 0s;
	}
	
	
	div.sub-banner > ul > div[menuboxes] > div[menu~="container"] > ul[menu],
	div.sub-banner ul.menuType {margin:0 auto; position:static; max-height:0px; padding-top:0px; padding-bottom:0px; border-bottom-width:0px;
		transition-property: max-height, padding-top, padding-bottom;
		transition-duration: .75s;
	}
	div.sub-banner > ul > li[ismenu].menuHover + div[menuboxes] > div[menu~=container] > ul.menuType {
		max-height:500px;
		padding-top: 10px;
		padding-bottom: 8px;
		border-bottom-width: 1px;
	}
	
	/*body.init div.sub-banner > ul > li[ismenu] + div[menuboxes] > div[menu~=container] > ul.menuType {height:1px; padding-top:0px; padding-bottom:0px; border-top-width:0px; border-bottom-width:0px;
		overflow:hidden; } */
	
	div.sub-banner ul div[menuboxes] div[menu~=container] {position:static; /*margin-left:39px;*/ }
	body.init div.sub-banner li[ismenu] table.menuTable td:first-child,
	div.sub-banner li[ismenu] table.menuTable td:first-child {width:180px; min-width:180px; }
	body.init div.sub-banner li[ismenu] table.menuTable td.arrow > div, 
	div.sub-banner li[ismenu] table.menuTable td.arrow > div{
		background-repeat: no-repeat;
		background-position: 10px -11px;
		background-image: url('https://contactquarterly.com/images/elements/menu/amber-arrow2.png');
		height:13px; vertical-align: middle; width:24px; cursor: pointer;
	}
	div.sub-banner ul li.menuOpen table td + td > div{
		background-repeat: no-repeat; background-position:1px 0px;
	}
	div.sub-banner > ul > li a {padding-right:7px; }
	div.sub-banner > ul > li.menuHover {background-color: transparent; color: inherit; 
		border-left: 0px solid #afafb0;
		border-right: 0px solid #afafb0;
		border-bottom: 0px solid #afafb0;
		box-shadow:none;}
	div.sub-banner > ul > li[ismenu].open  table.menuTable,
	div.sub-banner > ul > li[ismenu].menuHover table.menuTable
	 {background-color: #567c96;
		border-left: 1px solid #afafb0;
		border-right: 1px solid #afafb0;
		border-bottom: 1px solid #afafb0;
		box-shadow: 1px 0px 2px #afafb0, -1px 0px 2px #afafb0;
		color:#ffffff; 
	}
	div.sub-banner > ul > li[ismenu] table.menuTable td.arrow {cursor: pointer;}
	div.sub-banner > ul > li[ismenu].menuHover  table.menuTable td.arrow > div {background-position-y: 5px;}
	div.sub-banner > ul > li[ismenu] + div[menuboxes] > div[menu~=container] { display:block; visibility:visible; }
	
	div.banner-image h2 {display:none; }

}

@media only screen and (max-width: 820px){
	div.banner > div.left-bar-top {/*top:53px;*/ top:89px; }
	div.banner div.top-quick-links {margin-right:0px;}
}

@media only screen and (max-width: 500px){
	div.banner-image h1 {font-size:24px; line-height:22px; }
	div.banner div.top-quick-links {font-size:15px;}
}