/* general */

    body {
  	margin: 0px;
  	padding: 0px;
  	border: 0;
  	background-color: #cc0001;	/* to improve the Canadian flag perception with an improved colour of red for the background */
/*	background-color: #da4646;*/
/*	background-color: #2B65EC;*/
/*	background-color: #ADA96E;*/
	overflow-x:hidden;
/*	font-family: QuanSlimLight;*/
	font-family: Calibri;
/*	font-family: verdana,tahoma,sans-serif;*/
	font-size:12pt;
	color:#333333;
	}
   h2,h3 {
 	text-align: left;
	font-weight: bold;
	}
   h2 {
	font-size: 24px;
	}
   h3 {
	font-size: 20px;
	}

   p,li,blockquote {
 	text-align: justify;
	}
   p {						/* p inherits the properties of p listed above and adds the indentation as specified */
	line-height: 1.25;
	}

img {
  border: 0;
  max-width: 100%;
  outline:none;
}

#container {
	max-width:1124px;
	margin: 0 auto;
	overflow: hidden;
	background-color: #fff;
	-webkit-box-shadow: 5px 5px 5px 0px #444;
	-moz-box-shadow: 5px 5px 5px 0px #444;
	box-shadow: 5px 5px 5px 0px #444;
	}
#banner {
	margin: 0 auto;
	position: relative;
	line-height: 0;
	float: left;
	width: 100%;
	height: auto;
	}

#main_content {
	float: left;
/*	background-color:#ffffff;*/
	max-width:1124px;
	background-image:URL('../images/background_global.png');
	background-size:contain; 
	}
#bio_content {
	background-color:#ffffcc;
	font-size:11pt;
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	font-family:Arial,helvetica;
	}


.gov_divider {width:100%;height:10px;border:0;box-shadow:inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);}
.bgred		{color: white; background-color: #c80203; font-size: 16px;} /* #c80203 = dark red */
.bggreen	{color: white; background-color: green; font-size: 16px;} /* #c80203 = dark red */
.bggray		{color: white; background-color: gray; font-size: 16px;} /* #c80203 = dark red */

/* smartphone oriented e.g. portrait on iPhone 6+ */
@media only screen and (max-width: 480px) {
/* BEGIN:  post-it related */
.div_main_postit {float:left; padding-bottom:12px;margin-top:15px;width:50%;margin-bottom:30px;}
.quote-container {margin-top: 50px; position: relative;	float:left;	margin-left:15%;}
/* END:  post-it related */

.main_patrons {margin:auto;width:95%;}
.main_arms {float:left;margin:0 auto;max-width:50%;}
.main_knight {float:left;margin:0 auto;width:50%;}
.about_rhsc_arms {float:left;margin-bottom:25px; width:100%;}
.about_cha_arms {float:left;padding-bottom:25px; width:100%;}
.contact_branch_name {text-align:right;margin-top:5%;}

.gov_portrait {float:left;width:40%;margin-right:20px;}
.gov_arms {float:left;width:40%;}
.gov_bio {float:left;width:100%;margin-top:15px;}
.gov_dir_box {float:left;width:98%;margin-left:2%;}
.gov_dir_arms {float:left;width:15%;margin-right:10px;}
.gov_dir_name {width:100%;margin-top:7%;}
.gov_comm_box {float:left;width:95%;margin-left:3%;margin-bottom:10px;}
.gov_comm_arms {float:left;width:12%;margin-right:5%;margin-top:3%;}
.gov_comm_name {float:left;width:80%;}
.gov_comm_subs {float:left;width:80%;}

.founders_left_image {float:left;width:100%;margin-bottom:25px;}
.founders_middle_image {float:left;width:100%;margin-bottom:25px;}
.founders_right_image {float:left;width:100%;margin-bottom:15px;}

.branch_dir_name {width:100%;margin-top:4%;}
.branch_badge_image {float:left;width:40%;margin-right:15px;}
.branch_president {float:left;width:40%;padding-top:14%;}
.branch_desc {float:left;width:95%;padding-top:2%;}
.branch_entry_gray {float:left;width:100%;background-color:#E5E4E2;margin-bottom:15px;}
.branch_entry {float:left;width:100%;margin-bottom:15px;}

.login_image {float:left; margin-right:15px; margin-bottom:15px; width:35%;}
.login_badge_wireframe {float:left;width:100%;}
.login_image {float:left; margin-right:15px; margin-bottom:15px; max-width:15%;}
.login_panel_wireframe {float:left;width:100%;}
.login_panel {float:left;position:relative;width:90%;margin-left:5%;margin-top:30px;margin-bottom:30px;border-style:solid;border-width:1px;border-radius:10px;background-color:#E5E4E2;padding-top:12px;}

.event_image{max-width:100%;}
.event_text{float:left;max-width:100%;margin-top:25px;margin-bottom:30px;}

.calendar_image{float:left; padding-right:30px;padding-bottom:10px; max-width:30%;}

.tabard_image{float:left;width:100%;}
.tabard_image2{float:right;width:100%;margin-bottom:20px;}

.hart_house_image{float:left;width:100%;}
.hart_house_image2{float:left;padding-bottom:10px;width:100%;}
.hart_house_image3{float:left;padding-bottom:10px;width:100%;}
.hart_house_image4ab{margin:0 auto;width:100%;}

.st_barts_shield {float:left;margin-bottom:30px;width:50%;}

.membership_form_left {float:left;width:100%;padding-bottom:10px;margin-right:15px;}
.membership_form_right {float:right;width:100%;}
.membership_benefits_images{width:100%;margin-top:15px;margin-bottom:15px;}

.shoppe_listing {float:left;border:1px solid;border-radius:25px;margin-bottom:5%;}
.shoppe_item_image {float:left;width:80%;margin-left:10%;margin-top:3%;}
.shoppe_item_desc {float:left;width:80%;margin-left:10%;}
.shoppe_item_price {float:left;width:80%;margin-left:10%;margin-bottom:3%;}

.donate_images {float:left;margin-right:15px;margin-bottom:15px;width:25%;}

.heraldry_knight {float:left;width:100%;}
.heraldry_statement {float:left;color:red;font-size:1.5em;width:100%;margin-top:20px;}
.heraldry_crest {float:left;width:100%;margin-bottom:15px;}
.heraldry_coa {float:right;width:100%;margin-bottom:15px;}
.heraldry_achievement {float:left;width:100%;margin-bottom:15px;}
.heraldry_history {float:left;width:100%;margin-bottom:15px;}

.primer_images {float:left;width:48%;margin-right:1%;margin-bottom:15px;}

.canada_left_image {float:left;width:30%;margin-right:15px;margin-bottom:15px;}
.canada_right_image {float:right;width:30%;margin-left:15px;margin-bottom:15px;}
.canada_arms {float:left;width:60%;margin-left:20%;margin-bottom:15px;}
.canada_arms_table {float:left;width:100%;}

.roll_blazon_name {display:none;}  /* do not display the name of the grantee in the entry's navigation strip */
.roll_blazon_nav {float:left;}
.roll_arms_350h {float:left;max-height:350px;margin-left:15%;margin-bottom:70px;}
.roll_arms_blazon {float:left;width:90%;margin-left:3%;}

.admin_changepw {float:left;margin:auto;width:100%;border:1px solid;border-radius:25px;background-color:#e5e5e5;margin-bottom:50px;}
.utilities_chgpwd_fields {float:left;width:90%;margin-left:3%;}
.utilities_chgpwd_icon {float:left;width:90%;}

} /* @media (max-width: 480px) */

/* smartphone and other small mobile devices oriented e.g. landscape on iPhone 6+ */
@media only screen and (min-width: 481px) and (max-width: 750px) {
/* BEGIN:  post-it related */
.div_main_postit {float:left;margin-bottom:30px;width:60%;}
.quote-container {margin-top: 50px;	position: relative;	float:left;	margin-left:15%;}
/* END:  post-it related */
.main_patrons {margin:auto;width:95%;}
.main_arms {float:left;margin:0 auto;max-width:40%;margin-left:10%;}
.main_knight {float:left;margin:0 auto;width:40%;}
.about_rhsc_arms {float:left; padding-right:30px;padding-bottom:10px; max-width:30%;}
.about_cha_arms {float:right; padding-left:15px;padding-bottom:10px; max-width:30%;}
.contact_branch_name {text-align:right;margin-top:10%;}

.gov_portrait {float:left;width:20%;margin-right:10px;}
.gov_arms {float:left;width:20%;margin-right:10px;}
.gov_bio {float:right;width:55%;}
.gov_dir_box {float:left;width:98%;margin-left:2%;}
.gov_dir_arms {float:left;width:15%;margin-right:10px;}
.gov_dir_name {width:100%;margin-top:7%;}
.gov_comm_box {float:left;width:90%;margin-left:5%;margin-bottom:10px;}
.gov_comm_arms {float:left;width:15%;margin-right:3%;}
.gov_comm_name {float:left;width:80%;}
.gov_comm_subs {float:left;width:80%;}

.founders_left_image {float:left;width:18%;margin-right:10px;margin-left:2%;}
.founders_middle_image {float:left;width:38%;margin-right:10px;}
.founders_right_image {float:left;width:37%;}

.branch_dir_name {width:100%;margin-top:4%;}
.branch_badge_image {float:left;width:20%;margin-right:15px;}
.branch_president {float:left;width:20%;padding-top:4%;margin-right:15px;}
.branch_desc {float:left;width:50%;padding-top:2%;}
.branch_entry_gray {float:left;width:100%;background-color:#E5E4E2;}
.branch_entry {float:left;width:100%;}

.login_image {float:left; margin-right:15px; margin-bottom:15px; max-width:20%;}
.login_badge_wireframe {float:left;width:100%;}
.login_image {float:left; margin-right:15px; margin-bottom:15px; max-width:15%;}
.login_panel_wireframe {float:left;width:100%;}
.login_panel {float:left;position:relative;width:80%;margin-left:10%;margin-top:30px;margin-bottom:30px;border-style:solid;border-width:1px;border-radius:10px;background-color:#E5E4E2;padding-top:12px;}

.event_image{float:left; padding-right:30px;padding-bottom:10px; max-width:40%;}
.event_text{float:left;max-width:50%;margin-bottom:30px;}

.tabard_image{float:left; padding-right:30px;padding-bottom:10px; max-width:40%;}
.tabard_image2{float:right; padding-left:30px;padding-bottom:10px; max-width:30%;}
.tabard_image3{float:left; padding-right:30px;padding-bottom:10px; max-width:30%;}
.tabard_image4{float:left; width:100%;padding-bottom:15px;}

.calendar_image{float:left; padding-right:30px;padding-bottom:10px; max-width:20%;}

.hart_house_image{float:left; padding-right:30px;padding-bottom:10px; max-width:40%;}
.hart_house_image2{float:right; padding-left:30px;padding-bottom:10px; max-width:35%;}
.hart_house_image3{float:left; padding-right:30px;padding-bottom:10px; max-width:35%;}
.hart_house_image4ab{margin:0 auto;width:80%;}

.st_barts_shield {float:left;margin-bottom:30px;width:33%;}

.membership_form_left {float:left;width:20%;padding-bottom:10px;margin-right:15px;}
.membership_form_right {float:right;width:75%;}
.membership_benefits_images{float:right;width:60%;margin-left:15px;margin-bottom:15px;}

.shoppe_listing {float:left;border:1px solid;border-radius:25px;margin-bottom:5%;}
.shoppe_item_image {float:left;width:20%;margin-top:20px;margin-left:3%;}
.shoppe_item_desc {float:left;width:45%;padding-left:20px;}
.shoppe_item_price {float:left;width:22%;padding-left:20px;}

.donate_images {float:left;margin-right:15px;margin-bottom:15px;width:25%;}

.heraldry_knight {float:left;width:50%;}
.heraldry_statement {float:left;padding-left:25px;color:red;font-size:2em;width:45%;}
.heraldry_crest {float:left;width:30%;margin-right:15px;}
.heraldry_coa {float:right;width:35%;margin-left:15px;}
.heraldry_achievement {float:left;width:45%;margin-right:15px;}
.heraldry_history {float:right;width:30%;margin-left:15px;margin-bottom:15px;}

.primer_images {float:left;width:23%;margin-right:1%;}

.canada_left_image {float:left;width:25%;margin-right:15px;margin-bottom:15px;}
.canada_right_image {float:right;width:25%;margin-left:15px;margin-bottom:15px;}
.canada_arms {float:left;width:60%;margin-left:20%;margin-bottom:15px;}
.canada_arms_table {float:left;width:100%;}

.roll_blazon_nav {float:right;}
.roll_blazon_name {font-size:12px;font-weight:bold;}
/*.roll_arms_350h {float:left;max-height:350px;margin-left:3%;margin-bottom:15px;}*/
.roll_arms_350h {float:left;width:30%;margin-left:3%;margin-bottom:15px;}
.roll_arms_blazon {float:right;width:65%;}

.utilities_chgpwd_fields {float:left;width:50%;margin-left:8%;}
.utilities_chgpwd_icon {float:left;width:20%;}
.admin_changepw {float:left;margin:auto;width:100%;border:1px solid;border-radius:25px;background-color:#e5e5e5;margin-bottom:50px;}

} /* @media (min-width: 481px) and (max-width: 750px) */

/* tablets/desktops oriented landscape e.g XPS8700, iPad 3 landscape & portrait */
@media only screen and (min-width: 751px) {
/* BEGIN:  post-it related */
.div_main_postit {float:left;margin-left:5%;padding-bottom:3%;width:55%;}
.quote-container {margin-top: 50px;	position: relative;	float:left;	margin-left:3%;}
/* END:  post-it related */
.main_patrons {margin:auto;width:85%;}
.main_arms {float:left;margin:0 auto;max-width:35%;margin-left:15%;}
.main_knight {float:left;margin:0 auto;width:33%;}
.about_rhsc_arms {float:left; padding-right:30px;padding-bottom:10px; max-width:20%;}
.about_cha_arms {float:right; padding-left:15px;padding-bottom:10px; max-width:20%;}
.contact_branch_name {text-align:right;margin-top:12%;}

.gov_portrait {float:left;width:15%;margin-right:15px;}
.gov_arms {float:left;width:15%;margin-right:15px;}
.gov_bio {float:left;width:65%;}
.gov_dir_box {float:left;width:60%;margin-left:20%;margin-bottom:10px;}
.gov_dir_arms {float:left;width:15%;margin-right:15px;}
.gov_dir_name {width:100%;margin-top:7%;}

/*
.gov_dir_box {float:left;width:60%;margin-left:20%;margin-bottom:10px;background-color:orange;}
.gov_dir_arms {float:left;width:15%;margin-right:15px;background-color:green;}
.gov_dir_name {width:100%;margin-top:7%;background-color:brown;}
*/

.gov_comm_box {float:left;width:90%;margin-left:7%;margin-bottom:10px;}
.gov_comm_arms {float:left;width:15%;margin-right:5%;}
.gov_comm_name {float:left;width:80%;}
.gov_comm_subs {float:left;width:80%;}

.founders_left_image {float:left;width:18%;margin-right:10px;margin-left:2%;}
.founders_middle_image {float:left;width:38%;margin-right:10px;}
.founders_right_image {float:left;width:37%;}

.branch_dir_name {width:100%;margin-top:4%;}
.branch_badge_image {float:left;width:15%;margin-right:15px;}
.branch_president {float:left;width:25%;padding-top:4%;margin-right:15px;}
.branch_desc {float:left;width:55%;padding-top:2%;}
.branch_entry_gray {float:left;width:100%;background-color:#E5E4E2;}
.branch_entry {float:left;width:100%;}

.login_badge_wireframe {float:left;width:100%;}
.login_image {float:left; margin-right:15px; margin-bottom:15px; max-width:15%;}
.login_panel_wireframe {float:left;width:100%;}
.login_panel {float:left;position:relative;width:70%;margin-left:15%;margin-top:30px;margin-bottom:30px;border-style:solid;border-width:1px;border-radius:10px;background-color:#E5E4E2;padding-top:12px;}

.event_image{float:left; padding-right:30px;padding-bottom:10px; max-width:40%;}
.event_text{float:left;max-width:55%;margin-bottom:30px;}

.tabard_image{float:left; padding-right:30px;padding-bottom:10px; max-width:40%;}
.tabard_image2{float:right; padding-left:30px;padding-bottom:10px; max-width:25%;}
.tabard_image3{float:left; padding-right:30px;padding-bottom:10px; max-width:30%;}
.tabard_image4{float:right; padding-left:30px;padding-bottom:10px; max-width:35%;}

.calendar_image{float:left; padding-right:30px;padding-bottom:10px; max-width:20%;}

.hart_house_image{float:left; padding-right:30px;padding-bottom:10px; max-width:30%;}
.hart_house_image2{float:right; padding-left:30px;padding-bottom:10px; max-width:35%;}
.hart_house_image3{float:left; padding-right:30px;padding-bottom:10px; max-width:35%;}
.hart_house_image4ab{margin:0 auto;width:50%;}

.st_barts_shield {float:left;width:25%;}

.membership_form_left {float:left;width:25%;padding-bottom:10px;margin-right:15px;}
.membership_form_right {float:right;width:70%;}
.membership_benefits_images{float:right;width:50%;margin-left:15px;margin-bottom:15px;}

.shoppe_listing {float:left;border:1px solid;border-radius:25px;margin-bottom:5%;}
.shoppe_item_image {float:left;width:20%;margin-top:20px;margin-left:3%;}
.shoppe_item_desc {float:left;width:45%;padding-left:20px;}
.shoppe_item_price {float:left;width:20%;padding-left:20px;}

.donate_images {float:left;margin-right:15px;margin-bottom:15px;width:15%;}

.heraldry_knight {float:left;width:50%;}
.heraldry_statement {float:left;padding-left:25px;color:red;font-size:2.5em;width:45%;}
.heraldry_crest {float:left;width:25%;margin-right:15px;margin-bottom:15px;}
.heraldry_coa {float:right;width:30%;margin-left:15px;}
.heraldry_achievement {float:left;width:35%;margin-right:15px;}
.heraldry_history {float:right;width:30%;margin-left:15px;margin-bottom:15px;}

.primer_images {float:left;width:23%;margin-right:1%;}
.pp_intro_hashing {float:left;width:100%;}

.canada_left_image {float:left;width:15%;margin-right:15px;}
.canada_right_image {float:right;width:15%;margin-left:15px;}
.canada_arms {float:left;width:20%;margin-left:2%;}
.canada_arms_table {float:left;width:75%;}

.roll_blazon_nav {float:right;}
.roll_blazon_name {font-size:12px;font-weight:bold;}
.roll_arms_350h {float:left;max-height:350px;margin-left:3%;margin-bottom:15px;}
.roll_arms_blazon {float:left;width:60%;}

.utilities_chgpwd_fields {float:left;width:50%;margin-left:8%;}
.utilities_chgpwd_icon {float:left;width:20%;}
.admin_changepw {float:left;margin:auto;width:80%;margin-bottom:50px;margin-left:10%;border:1px solid;border-radius:25px;background-color:#e5e5e5;padding:20px;}

} /* @media (min-width: 751px) */

/* disable the presentation of the left navigation panel for screens less than 940px wide  */
@media only screen and (max-width: 939px) {
#main_content {float:left;width:100%;background-image:URL('../images/background_global_white.png');height:100vh;}
#main_content_mo_login {float:left;width:100%;background-image:URL('../images/background_global_mo_yellow.png');}
#main_content_mo {float:left;width:100%;background-image:URL('../images/background_global_mo_yellow.png');}
#main_content_left_nav {display:none;}
#main_page_content {float:left;width:100%;background-image:URL('../images/background_main_parchment.png');height:100vh;}
#main_content_right {float:left;position:relative;width:90%;margin-left:5%;margin-right:5%;height:100%;overflow-y:auto;}
.trailer_arms {float:left;width:90%;margin-left:3%;margin-right:5%;}
}
/* display the left navigation panel for screens greater than and equal to 940px wide only!!  */
@media only screen and (min-width: 940px) {
#main_page_content {float:left;max-width:1124px;background-image:URL('../images/background_main.png');background-size:contain;height:100vh;}
#main_content {float:left;max-width:1124px;background-image:URL('../images/background_global.png');background-size:contain;height:100vh;}
#main_content_mo_login {float:left;width:1124px%;background-image:URL('../images/background_global_mo.png');background-size:contain;}
#main_content_mo {float:left;width:1124px%;background-image:URL('../images/background_global_mo_yellow.png');background-size:contain;}
#main_content_right {float:right;position:relative;width:80%;margin-right:3%;height:100%;overflow-y:auto;}
#main_content_left_nav {float:left;position:relative;width:15%;}
.trailer_arms {float:left;width:90%;margin-left:3%;margin-right:5%;}
}

/* begin CSS styling for tabs presentations, sourced from http://www.w3schools.com/howto/howto_js_tabs.asp */
ul.tab {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius:6px;		/* radius of the ends of the tab bar */
    background-color: #f1f1f1;
    width:100%;
    float:left;
/*    margin-top:10px;*/
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 8px 10px;		/* configures the height of the tab bar, space above and below the text */
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active { background-color: #ccc; }

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
/*    border: 1px solid #ccc;*/
    border-top: none;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
.tabcontent:nth-of-type(1){display:block;}
/* end CSS styling for tabs presentations, sourced from http://www.w3schools.com/howto/howto_js_tabs.asp */

/* begin roll of arms elements characteristics */
.armoury_label {				/* text characteristics below the arms on each directory page of the armoury */
	text-align: center;
	font-size: 16px;
	}
.armoury_entry {				/* text characteristics of the roll of arms entry in the armoury */
	text-align: left;
	font-size: 18px;
	}
.armoury_entry_titles {				/* text characteristics of the roll of arms entry titles (arms, crest, etc.) in the armoury */
	text-align: right;
	font-size: 18px;
	font-weight: bold;
	}
.armoury_grad_red 	{
	font-family: verdana,tahoma,sans-serif; 
	font-size: 8.5pt; 
	color: white; 
	font-weight: bold; 
	background-image:url('../images/redbar_grad.jpg')
	}
.armoury_grad_gold 	{
	font-family: verdana,tahoma,sans-serif; 
	font-size: 8.5pt; 
	color: black; 
	font-weight: bold; 
	background-image:url('../images/goldbar_grad.jpg')
	}
.armoury_grad_blue 	{
	font-family: verdana,tahoma,sans-serif; 
	font-size: 8.5pt; 
	color: white; 
	font-weight: bold; 
	background-image:url('../images/bluebar_grad.jpg')
	}
.armoury_grad_green 	{
	font-family: verdana,tahoma,sans-serif; 
	font-size: 8.5pt; 
	color: white; 
	font-weight: bold; 
	background-image:url('../images/greenbar_grad.jpg')
	}
.armoury_grad_gray 	{
	font-family: verdana,tahoma,sans-serif; 
	font-size: 8.5pt; 
	color: black; 
	font-weight: bold; 
	background-image:url('../images/graybar_grad.jpg')
	}
.armoury_grad_turq 	{
	font-family: verdana,tahoma,sans-serif; 
	font-size: 8.5pt; 
	color: black; 
	font-weight: bold; 
	background-image:url('../images/turqbar_grad.jpg')
	}


/* end roll of arms elements characteristics */

.blink {
	animation: blink 1s steps(5, start) infinite;
	-webkit-animation: blink 1s steps(5, start) infinite;
	}
	@keyframes blink {
	to {
		visibility: hidden;
		}
	}
	@-webkit-keyframes blink {
	to {
		visibility: hidden;
		}
	}

/* change your password panel */
.change_pwd {
	float:left;
	background-color:#ffffcc;
	padding:8px;
	width:80%;
	margin-left:8%;
	margin-top:15px;
	font-style:italic;
	text-align:left;
	border-width:thin;
	border-style:solid;
	border-radius:10px;
	margin-bottom:15px;
	}

/* original
#main_content {
	float: left;
	position: relative;
	background-color: #ffffff;
	max-width:905px;
	padding-left:20px;
	padding-right:30px;
	}

#main_content_left_nav {
	float:left;
	position: relative;
	width:15%;
	height:100%;
	background-image:URL('../images/indexFrame_red_grad.jpg');
	-webkit-box-shadow: 5px 5px 5px 0px #444;
	-moz-box-shadow: 5px 5px 5px 0px #444;
	box-shadow: 5px 5px 5px 0px #444;
	z-index:100;
	}
#main_content_right {
	float:right;
	position: relative;
	width:80%;
	margin-right:3%;
	background-color:orange;
	}
*/

#footer {
	background: linear-gradient(to left, #fff -80%, #333333 45%);
	margin: 0 auto;
	position: relative;
	line-height:0;
	float: left;
	width: 100%;
	height: 30px;
	}

/* on small devices of less than 878px wide, hide the left navigation panel due to limited screen real estate available */
/*
@media (max-width:878px) {
	.div_left_nav {
		display:none;
	}
}*/
/*
.div_left_nav {
	position:relative;
	float:left;
	left:0px;
	top:0px;
	max-width:15%;
	height:100%;
	z-index:100;
	background-image:URL('../images/indexFrame_red_grad.jpg');
	-webkit-box-shadow: 5px 5px 5px 0px #444;
	-moz-box-shadow: 5px 5px 5px 0px #444;
	box-shadow: 5px 5px 5px 0px #444;

	}
*/
.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.fade:hover {
   opacity: 0.45;
   }

.box {
  box-shadow: 5px 5px 5px 0px #444;
}

.text_transparent {
  display: none;
  z-index: -1;
}

.caption {
 	text-align: left;
	font-size: 14px;
	font-style: italic;
	}

.armoury_alphabet_list {display:inline-block;cursor:pointer;width:80%;margin-left:10%;};

.mainpagetext {font-family: verdana,tahoma,sans-serif; font-size: 11px; color:black}

.Label	{
	color:blue;
	font-weight:bold;
	text-align:right;
	padding-right:3px;
	}

A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:active {text-decoration: none;}
A:hover {text-decoration: underline; color: green;}

/* end of general */

/* coloured bar specifics */
.bluebar {font-family: verdana,tahoma,sans-serif; font-size: 9pt; color: white; font-weight: bold; background-image: url("../images/bluebar_grad.jpg")}
.goldbar {font-family: verdana,tahoma,sans-serif; font-size: 9pt; color: black; font-weight: bold; background-image: url("../images/goldbar_grad.jpg")}
.greenbar {font-family: verdana,tahoma,sans-serif; font-size: 9pt; color: white; font-weight: bold; background-image: url("../images/greenbar_grad.jpg")}
.graybar {font-family: verdana,tahoma,sans-serif; font-size: 9pt; color: black; font-weight: bold; background-image: url("../images/graybar_grad.jpg")}
.redbar {font-family: verdana,tahoma,sans-serif; font-size: 9pt; color: white; font-weight: bold; background-image: url("../images/redbar_grad.jpg")}
/*.redbar {font-family: verdana,tahoma,sans-serif; font-size: 9pt; color: white; font-weight: bold; background-color: #CC0000}*/
.chalkbar {font-family: verdana,tahoma,sans-serif; font-size: 9pt; color: black; font-weight: bold; background-color: #FFFFCC}
.chalk {font-family: verdana,tahoma,sans-serif; font-size: 9pt; color: black; background-color: #FFFFCC}
/* end coloured bar specifics */



.linksgray_disabled {
	font-family: verdana,tahoma,sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: gray;
	text-decoration: none;
	}	

A.linksgray

{
	font-family: verdana,tahoma,sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
}	
A.linksgray:hover
{
	font-family: verdana,tahoma,sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: black;
	text-decoration: none;
}

A.linksred
{
/*	font-family: verdana,tahoma,sans-serif;
	font-size: 11px;*/
/*	font-weight: bold; */
	color: black;
	text-decoration: underline;
}
A.linksred:hover
{
/*	font-family: verdana,tahoma,sans-serif;
	font-size: 11px;*/
/*	font-weight: bold; */
	color: red;
	text-decoration: underline;
}

A.linksredgreen
{
	font-family: verdana,tahoma,sans-serif;
	font-size: 11px;
	color: red;
	text-decoration: underline;
}
A.linksredgreen:hover
{
	font-family: verdana,tahoma,sans-serif;
	font-size: 11px;
	color: green;
	text-decoration: underline;
}

A.linksredmem
{
	font-family: verdana,tahoma,sans-serif;
	font-size: 11px;
/*	font-weight: bold; */
	color: grey;
	text-decoration: underline;
}
A.linksredmem:hover
{
	font-family: verdana,tahoma,sans-serif;
	font-size: 11px;
/*	font-weight: bold; */
	color: red;
	text-decoration: underline;
}

A.linksyellow

{
	font-family: verdana,tahoma,sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: yellow;
	text-decoration: none;
}	
A.linksyellow:hover
{
	font-family: verdana,tahoma,sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: black;
	text-decoration: none;
}
A.linksproject

{
	font-family: verdana,tahoma,sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: blue;
	text-decoration: none;
	line-height:150%;
}	
A.linksproject:hover
{
	font-family: verdana,tahoma,sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: green;
	text-decoration: none;
}

/* the google search input field in the left navigation bar */
.searchField  {	 
/*		background: transparent url (../images/graphicStructures/form_input_background_grey.gif) no-repeat left top;	*/
		background-position: 0 0px;	
		_background-position: 0 2px;	
		border:none; 
		height: 16px;	 
		padding: 3px 0 0 3px; 
		color: #686868;
		font-size:11px;	
		width:100%;		   
}	

.footer
{
	font-family:verdana,tahoma,sans-serif;
	font-size: 7pt;
	color: white;
}

/* begin CSS code for standardized buttons */
.button_delete{
 border:1px solid #822121; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:13px;font-family:arial, helvetica, sans-serif; padding: 5px 5px 5px 5px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;cursor:pointer;
 background-color: #ff3131; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff6666), to(#de3434));
 background-image: -webkit-linear-gradient(top, #ff6666, #de3434);
 background-image: -moz-linear-gradient(top, #ff6666, #de3434);
 background-image: -ms-linear-gradient(top, #ff6666, #de3434);
 background-image: -o-linear-gradient(top, #ff6666, #de3434);
 background-image: linear-gradient(to bottom, #ff6666, #de3434);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff6666, endColorstr=#de3434);
}

.button_delete:hover{
 border:1px solid #822121; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:13px;font-family:arial, helvetica, sans-serif; padding: 5px 5px 5px 5px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #a41e1e; background-image: -webkit-gradient(linear, left top, left bottom, from(#a41e1e), to(#572525));
 background-image: -webkit-linear-gradient(top, #a41e1e, #572525);
 background-image: -moz-linear-gradient(top, #a41e1e, #572525);
 background-image: -ms-linear-gradient(top, #a41e1e, #572525);
 background-image: -o-linear-gradient(top, #a41e1e, #572525);
 background-image: linear-gradient(to bottom, #a41e1e, #572525);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a41e1e, endColorstr=#572525);
}

.button_delete.disabled:hover {
 border:1px solid #7d99ca; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:13px;font-family:arial, helvetica, sans-serif; padding: 5px 5px 5px 5px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #a5b8da; background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
 background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
 background-image: linear-gradient(to bottom, #a5b8da, #7089b3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a5b8da, endColorstr=#7089b3);
}

.button_delete[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events:none;
}

.button_blue{
 border:1px solid #822121; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:13px;font-family:arial, helvetica, sans-serif; padding: 5px 5px 5px 5px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;cursor:pointer;
 background-color: #0825bd; background-image: -webkit-gradient(linear, left top, left bottom, from(#4a55de), to(#222e71));
 background-image: -webkit-linear-gradient(top, #4a55de, #222e71);
 background-image: -moz-linear-gradient(top, #4a55de, #222e71);
 background-image: -ms-linear-gradient(top, #4a55de, #222e71);
 background-image: -o-linear-gradient(top, #4a55de, #222e71);
 background-image: linear-gradient(to bottom, #4a55de, #222e71);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4a55de, endColorstr=#222e71);
}

.button_blue:hover{
 border:1px solid #822121; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:13px;font-family:arial, helvetica, sans-serif; padding: 5px 5px 5px 5px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #191f63; background-image: -webkit-gradient(linear, left top, left bottom, from(#191f63), to(#2b2f65));
 background-image: -webkit-linear-gradient(top, #191f63, #2b2f65);
 background-image: -moz-linear-gradient(top, #191f63, #2b2f65);
 background-image: -ms-linear-gradient(top, #191f63, #2b2f65);
 background-image: -o-linear-gradient(top, #191f63, #2b2f65);
 background-image: linear-gradient(to bottom, #191f63, #2b2f65);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#191f63, endColorstr=#2b2f65);
}

.button{
 border:1px solid #7d99ca; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:13px;font-family:arial, helvetica, sans-serif; padding: 5px 5px 5px 5px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 cursor:pointer;
 background-color: #a5b8da; background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
 background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
 background-image: linear-gradient(to bottom, #a5b8da, #7089b3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a5b8da, endColorstr=#7089b3);
}

.button:hover{
 border:1px solid #5d7fbc;color:gold;text-decoration:none;
 background-color: #819bcb; background-image: -webkit-gradient(linear, left top, left bottom, from(#819bcb), to(#536f9d));
 background-image: -webkit-linear-gradient(top, #819bcb, #536f9d);
 background-image: -moz-linear-gradient(top, #819bcb, #536f9d);
 background-image: -ms-linear-gradient(top, #819bcb, #536f9d);
 background-image: -o-linear-gradient(top, #819bcb, #536f9d);
 background-image: linear-gradient(to bottom, #819bcb, #536f9d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#819bcb, endColorstr=#536f9d);
}

.button.disabled:hover {
 border:1px solid #7d99ca; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:13px;font-family:arial, helvetica, sans-serif; padding: 5px 5px 5px 5px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #a5b8da; background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
 background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
 background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
 background-image: linear-gradient(to bottom, #a5b8da, #7089b3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a5b8da, endColorstr=#7089b3);
}

.button[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events:none;
}
/* end CSS code for standardized buttons */


/* begin: post-it note CSS statements */
/* smartphone oriented e.g. portrait on iPhone 6+ */
@media only screen and (max-width: 480px) {
.quote-container {
	margin-top: 50px;
	position: relative;
	float:left;
	margin-left:15%;
	}
} /* (max-width: 480px) */
/* smartphone and other small mobile devices oriented e.g. landscape on iPhone 6+ */
@media only screen and (min-width: 481px) and (max-width: 750px) {
.quote-container {
	margin-top: 50px;
	position: relative;
	float:left;
	margin-left:15%;
	}
} /* (min-width: 481px) and (max-width: 750px) */
/* tablets/desktops oriented landscape e.g XPS8700, iPad 3 landscape & portrait */
@media only screen and (min-width: 751px) {
.quote-container {
	margin-top: 50px;
	position: relative;
	float:left;
	margin-left:3%;
	}
} /* (min-width: 751px) */

.note {
 	text-align: left;
	color: #333;
	position: relative;
	width: 625px;
	/*width: 100%;*/
	margin: 0 auto;
	padding: 20px;
	font-family: QuanSlimLight;
	font-size: 24px;
	box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
	}
.note .author {
	display: block;
	margin: 40px 0 0 0;
	text-align: right;
	}
.yellow {
	background: #eae672;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
	}
.pin {
	background-color: #aaa;
	display: block;
	height: 32px;
	width: 2px;
	position: absolute;
	left: 50%;
	top: -16px;
	z-index: 1;
	}
.pin:after {
	background-color: #A31;
	background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
		inset 3px 3px 3px hsla(0,0%,100%,.2),
		inset -3px -3px 3px hsla(0,0%,0%,.2),
		23px 20px 3px hsla(0,0%,0%,.15);
	content: '';
	height: 12px;
	left: -5px;
	position: absolute;
	top: -10px;
	width: 12px;
	}
.pin:before {
	background-color: hsla(0,0%,0%,0.1);
	box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
	content: '';

	height: 24px;
	width: 2px;
	left: 0;
	position: absolute;
	top: 8px;

	transform: rotate(57.5deg);
	-moz-transform: rotate(57.5deg);
	-webkit-transform: rotate(57.5deg);
	-o-transform: rotate(57.5deg);
	-ms-transform: rotate(57.5deg);

	transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	}
/* end: post-it note CSS statements */