/*-----------------------------Colonial Sense Button Styles----------------------------*/

/****** timeline info button----------------------------*/

.tlInfoButton{
	height: 16px;
	width: 16px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/TLInfoButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.tlInfoButton:hover{
	background-position: -16px 0;
}

/****** main article Button Styles----------------------------*/

/*div.mainArticleItem{
	width:100%;
	height:100%;
  overflow: hidden;
}
*/
div.mainArticleItem{
	width:100%;
	height:100%;
  overflow: hidden;
}

a.mainArticleItem{
	border: 0px;
  -webkit-transition: all .6s ease;
     -moz-transition: all .6s ease;
       -o-transition: all .6s ease;
      -ms-transition: all .6s ease;
          transition: all .6s ease;
}

a.mainArticleItem:hover{
 	width:100%;
	height:100%;
 overflow: hidden;
  background-color: white; 
  opacity: 0.4;
/*-webkit-filter: blur(5px);*/
}

img.mainArticleItem{
	border: 0px;
  -webkit-transition: all .6s ease;
     -moz-transition: all .6s ease;
       -o-transition: all .6s ease;
      -ms-transition: all .6s ease;
          transition: all .6s ease;
}

img.mainArticleItem:hover{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  background-color: white; 
  opacity: 0.4;
 /*-webkit-filter: blur(5px);*/

}

input.mainArticleItem{
	border: 0px;
  -webkit-transition: all .6s ease;
     -moz-transition: all .6s ease;
       -o-transition: all .6s ease;
      -ms-transition: all .6s ease;
          transition: all .6s ease;
}

input.mainArticleItem:hover{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  background-color: white; 
  opacity: 0.4;
}

/****** main bar Button Styles----------------------------*/

.navButton{
	height: 48px;
	width: 48px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/NavButtons.jpg') 0 0 no-repeat;
	
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 3px ridge peru;
}

.navButton:hover{
	background-position: -48px 0;
	border: 3px groove peru;
}

.searchButton{
	height: 24px;
	width: 24px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/SearchButtons.png') 0 0 no-repeat;
	display:inline-block;
	
	cursor:pointer; 
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 2px ridge peru;
}

.searchButton:hover{
	background-position: -24px 0;
	border: 2px groove peru;
}

.homeButton{
	height: 24px;
	width: 24px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/HomeButtons.png') 0 0 no-repeat;
	display:inline-block;
	
	cursor:pointer; 
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 2px ridge peru;
}

.homeButton:hover{
	background-position: -24px 0;
	border: 2px groove peru;
}
.gotoTopButton{
	height: 24px;
	width: 24px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/GotoTopButtons.png') 0 0 no-repeat;
	display:inline-block;
	
	cursor:pointer; 
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 2px ridge peru;
}

.gotoTopButton:hover{
	background-position: -24px 0;
	border: 2px groove peru;
}

.signupButton{
	height: 48px;
	width: 48px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/SignupButtons.jpg') 0 0 no-repeat;
	float:right;
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 3px ridge peru;
	margin-right:8px;
}

.signupButton:hover{
	background-position: -48px 0;
	border: 3px groove peru;
}

.findMembersButton{
	height: 48px;
	width: 48px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/SearchMembersButtons.jpg') 0 0 no-repeat;
	float:right;
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 3px ridge peru;
	margin-right:8px;
}

.findMembersButton:hover{
	background-position: -48px 0;
	border: 3px groove peru;
}

.accountButton{
	height: 48px;
	width: 48px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/AccountButtons.jpg') 0 0 no-repeat;
	float:right;
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 3px ridge peru;
	margin-right:8px;
	overflow: hidden;
}

.accountButton:hover{
	background-position: -48px 0;
	border: 3px groove peru;
}

.avatar{
	position: fixed;
	top: 50%;
	left: 50%;
  /* bring your own prefixes */
	transform: translate(-50%, -50%);
}

.loginNeeded{
	text-align:left;
	padding:4px; 
	color:darkred;
}

.loginNeeded:hover{
	color:firebrick;
}

.loginButton{
	height: 48px;
	width: 48px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/LoginButtons.jpg') 0 0 no-repeat;
	float:right;
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 3px ridge peru;
	margin-right:8px;
}

.loginButton:hover{
	background-position: -48px 0;
	border: 3px groove peru;
}

.logoutButton{
	height: 48px;
	width: 48px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/LogoutButtons.jpg') 0 0 no-repeat;
	float:right;
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 3px ridge peru;
	margin-right:8px;
}

.logoutButton:hover{
	background-position: -48px 0;
	border: 3px groove peru;
}

/****** title bar Button Styles----------------------------*/

.navChapButton{
	height: 36px;
	width: 36px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/NavChapButtons.png') 0 0 no-repeat;
	
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 2px ridge peru;
}

.navChapButton:hover{
	background-position: -36px 0;
	border: 2px groove peru;
}

.reasons10Button{
	height: 36px;
	width: 36px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/10ReasonsButtons.png') 0 0 no-repeat;
	
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

}

.reasons10Button:hover{
	background-position: -36px 0;
}

.pirateShipsButton{
	height: 36px;
	width: 36px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/PirateShipsButtons.png') 0 0 no-repeat;
	
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

}

.pirateShipsButton:hover{
	background-position: -36px 0;
}

.slideshowButton{
	height: 36px;
	width: 36px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/SlideshowButtons.png') 0 0 no-repeat;
	
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;

}

.slideshowButton:hover{
	background-position: -36px 0;
}

.linkButton{
	height: 24px;
	width: 24px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/LinkOpenButton.jpg') 0 0 no-repeat;
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 2px ridge royalblue;
}

.linkButton:hover{
	background-position: -24px 0;
	border: 2px groove firebrick;
}

.mailButton{
	height: 24px;
	width: 24px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/MailSendButton.jpg') 0 0 no-repeat;
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 2px ridge royalblue;
}

.mailButton:hover{
	background-position: -24px 0;
	border: 2px groove firebrick;
}

.postButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/PostButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.postButton:hover{
	background-position: -36px 0;
}

.postXButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/PostXButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.postXButton:hover{
	background-position: -36px 0;
}


.editButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/EditItemButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.editButton:hover{
	background-position: -36px 0;
}

.guideButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/GuideButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.guideButton:hover{
	background-position: -36px 0;
}

.forgotLoginButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/ForgotLoginButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.forgotLoginButton:hover{
	background-position: -36px 0;
}

.resendButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/ResendButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.resendButton:hover{
	background-position: -36px 0;
}

.membersInfoButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/MembersButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.membersInfoButton:hover{
	background-position: -36px 0;
}

.infoButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/InfoButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.infoButton:hover{
	background-position: -36px 0;
}

.remarksButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/RemarksButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.remarksButton:hover{
	background-position: -36px 0;
}

.videoButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/VideoBtns.png') 0 0 no-repeat;
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.videoButton:hover{
	background-position: -36px 0;
}

.glossaryButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/GlossaryBtns.png') 0 0 no-repeat;
	cursor:pointer;
}

.glossaryButton:hover{
	background-position: -36px 0;
}

.goBackButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/GoBackButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.goBackButton:hover{
	background-position: -36px 0;
}

.adminButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/AdminButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.adminButton:hover{
	background-position: -36px 0;
}

.accountEditButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/AccountEditButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.accountEditButton:hover{
	background-position: -36px 0;
}

.printFormatButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/PrintFormatButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.printFormatButton:hover{
	background-position: -36px 0;
}

.growingHerbsButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/GrowingHerbsButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.growingHerbsButton:hover{
	background-position: -36px 0;
}

.tosButton{
	height: 36px;
	width: 36px;
	float:right;
	text-align:right;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/ToSButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.tosButton:hover{
	background-position: -36px 0;
}

/* Census Contemporaries button  */
.contemporariesButton{
	display:inline-block;
	height: 25px;
	width: 25px;
	text-align:center;
	vertical-align: middle;
	margin-top:4px;
	background: url('http://colonialsense.com/Colonial/Pix/ContemporariesBtns.png') 0 0 no-repeat;
	cursor:pointer;
}

.contemporariesButton:hover{
	background-position: -25px 0;
}

/* Census Dictionary button  */
.dictionaryButton{
	display:inline-block;
	height: 25px;
	width: 25px;
	text-align:center;
	vertical-align: middle;
	margin-top:4px;
	background: url('http://colonialsense.com/Colonial/Pix/cenDictionaryBtn.png') 0 0 no-repeat;
	cursor:pointer;
}

.dictionaryButton:hover{
	background-position: -25px 0;
}

/* Census Quates button  */
.quotesButton{
	display:inline-block;
	height: 25px;
	width: 25px;
	text-align:center;
	vertical-align: middle;
	margin-top:4px;
	background: url('http://colonialsense.com/Colonial/Pix/cenQuotesBtn.png') 0 0 no-repeat;
	cursor:pointer;
}

.quotesButton:hover{
	background-position: -25px 0;
}


/* Company stuff  */
.compBtnDisplayListOn{
	height: 24px;
	width: 24px;
	display:inline-block;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/CompanyListIcon.png') 0 0 no-repeat;
	background-position: -0px 0;	
	cursor:default;*/
}

.compBtnDisplayListOff{
	height: 24px;
	width: 24px;
	display:inline-block;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/CompanyListIcon.png') 0 0 no-repeat;
	background-position: -24px 0;	
	cursor:pointer;
}

.compBtnDisplayPageOn{
	height: 24px;
	width: 24px;
	display:inline-block;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/CompanyPageIcon.png') 0 0 no-repeat;
	background-position: -0px 0;	
	/*cursor:pointer;*/
}

.compBtnDisplayPageOff{
	height: 24px;
	width: 24px;
	display:inline-block;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/CompanyPageIcon.png') 0 0 no-repeat;
	background-position: -24px 0;	
	cursor:pointer;
}

.compBtnDisplayListOff:hover, .compBtnDisplayPageOff:hover{
	background-position: -48px 0;
}

/* Infinity button -- Event Post */
.infinityBtnOff{
	height: 24px;
	width: 24px;
	display:inline-block;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/InfinityButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.infinityBtnOn{
	height: 24px;
	width: 24px;
	display:inline-block;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/InfinityButtons.png') 0 0 no-repeat;
	background-position: -24px 0;	
	cursor:pointer;
}

.infinityBtnOff:hover, .infinityBtnOn:hover{
	background-position: -48px 0;
}

.editButtonSmall{
	padding-top:4px;
	display:inline-block;
	height: 24px;
	width: 24px;
	text-align:center;
	vertical-align: top;
	background: url('http://colonialsense.com/Colonial/Pix/EditItemSmallButtons.png') 0 0 no-repeat;
	cursor:pointer;
}

.editButtonSmall:hover{
	background-position: -24px 0;
}

/***********************dropdown nav menu*/
/* Dropdown Button */
.dropbtn {
	height: 36px;
	width: 36px;
	text-align:center;
	vertical-align: middle;
	background: transparent;
	border: 0px;
}

/* Dropdown button on hover & focus */
/*.dropbtn:hover, .dropbtn:focus {
	background-position: -36px 0;
	border: 2px groove peru;
}
*/

/* The container <div> - needed to position the dropdown content */
.topicdropdown {
	height: 36px;
	width: 36px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/NavTopicButtons.png') 0 0 no-repeat;
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.topicdropdown:hover, .topicdropdown:focus {
	background-position: -36px 0;
}
/* Dropdown Content (Hidden by Default) */
.topicdropdown-content {
    display: none;
    position: absolute;
    	z-index:999;

    background-color: #f9f9f9;
    min-width: 160px;
   
    /*height:100%;*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.topicdropdown-content a {
    color: grey;
    text-align:left;
    padding: 4px 8px 4px 8px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.topicdropdown-content a:hover {background-color: lightgrey; font-weight:bold;}



/* The container <div> - needed to position the dropdown content */

.chapdropdown {
	height: 36px;
	width: 36px;
	text-align:center;
	vertical-align: middle;
	background: url('http://colonialsense.com/Colonial/Pix/NavChapButtons.png') 0 0 no-repeat;
	cursor:pointer;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
    z-index:999; 
}

.chapdropdown:hover, .chapdropdown:focus {
	background-position: -36px 0;
}

/* Dropdown Content (Hidden by Default) */
.chapdropdown-content {
    display: none;
    position: relative;
    z-index:999; 

    background-color: #f9f9f9;
    min-width: 160px;
   
    /*height:100%;*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.chapdropdown-content a {
    color: grey;
    text-align:left;
    padding: 4px 8px 4px 8px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.chapdropdown-content a:hover {background-color: lightgrey; font-weight:bold;}

.dropHeader {
cursor:default;
color:black;
text-align:center;
background-color:lightblue;
font-weight:bold;
}
.dropHeader:hover {
	color:white;
	background-color:pink;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}