/* ===========================
    ABOVE 550px  
============================= */

/* ===========================
    STRUCTURE 
============================= */

.content-span5 {
    width: 53%;
    margin: 0 5% 0 0;
}

.content-span4 {
    width: 42%;
}

/*--- 
• Grid system for photosales and magazine page 
• They share alot of same features
---*/

.preview-col > a > figure {
    padding: 1em;
    float: left;
}


.preview-descrip {
    padding: 2em 3%;
    margin: 0;
    overflow: hidden;
}

/*--- Full preview image ---*/

.full-image .preview-descrip > ul {
    float: left;
}

.full-image .preview-descrip > ol, .full-image .preview-descrip > h3 {
    clear: none;
    float: none;
}

.full-image .preview-descrip > ul > li {
    margin-left: 0.5em;
    margin-right: 0;
}

/*--- homepage introduction ---*/

.intro-top-append {
    display: none;
}

.intro-bot-append {
    display: block;
}

.introduction {
    width: 100%;
}

.text-section{
    width: 100%; 
     padding:20px; 
}

/*--- Boxes of delight ---*/

.boxes-of-delight {
   margin: 0 -0.625em 2em;
}

.boxes-of-delight > li {
    width: 33.33333333333%;
    padding: 0 0.625em;
    float: left;
}

/*--- Action boxes ---*/

.action-boxes > li:last-child {
    margin: 0 0 2.250em 0;
}

.action-boxes img {
    width: 40%;
    float: left;
}

.action-details {
    padding: 4% 5%;
    display: block;
    overflow: hidden;
}

/*--- Library Archive ---*/

.search-box-wrap {
    background: rgb(232,232,232);
    margin: 0 10% 2em 0;
    padding: 4%;
    border-radius: 4px;
}

/*--- Branches Section ---*/

.branch-map {
    float: left;
    margin-right: 2.5em;
}

.branch-chairman-wrap {
    overflow: hidden;
}

.branch-chairman-wrap a  {
    border-bottom: 1px solid #E8E8E8;
    display: block;
    padding: 1em 0;
    text-decoration: none;
}

/*--- Contact Form ---*/

.contact-wrap {
    margin: 0 0 2em 0;
}

.contact-wrap label {
    width: 20%;
    float: left;
}

.contact-wrap input[type="text"], .contact-wrap textarea {
    width: 70%;
    float: right;
}
/*--- Membership Form ---*/

.membership-wrap {
    margin: 1em 0 2em 0;
}

.membership-wrap label {
    width: 25%;
    float: left;
}

.membership-wrap input[type="text"], select, .membership-wrap textarea {
    width: 70%;
    float: right;
}

.membership-wrap-membership label {
    width: 90%;
    float: left;
}

.membership-wrap-membership input[type="checkbox"] {
    
    float: right;
}
.membership-wrap-membership input[type="text"] {
    width: 20%;
    float: right;
}

.membership-wrap-branches input[type="checkbox"] {
    margin-right: 5%;
    float: right;
}

.membership-wrap-branches, bulletin label {
    width: 85%;
}

.membership-wrap-branches div {
    float:left;
}

.branch {
   width:55%; 
}

.age {
   width:18%; 
   float:left;
}
.occupation {
   width:38%; 
   float:left;
   padding-left: 2%;
}
.interests {
   width:28%; 
   float:left;
   padding-left: 2%;
}

.membership-wrap-osmart label {
    width: 47%;
    float: left;
}

.membership-wrap-donations label {
    width: 15%;
    float: left;
}

.membership-wrap-donations input[type="text"] {
    width: 20%;   
    float: left;
    margin-right:10%;
}

.membership-wrap-our-records input[type="checkbox"], input[type="radio"] {    
    float: right;
    margin:0;
}

.membership-membertype{
    width:100%;
}

.radio-renew{
    width:50%;
}

.renewal-emailYN label{
    width:20% !important;
    padding-right: 8px;
}

.membership-membertype table td{
    padding:10px 20px 10px 0;
}

.membership-membertype label{
    padding:0 8px 0 0;
}

.membership-member-renewal-notice{   
   padding-top:20px;
}

.membership-member-renewal-notice label{   
    width:70%;
}

.membership-member-renewal-notice table td{
    padding:0px 20px 0 0;
}

/*--- Footer nav ---*/

.small-logo-wrap {
    width: 10.625em;
    height: 11.75em;
    background-color: rgb(204,91,88);
    position: relative;
    display: block;
}

.small-logo-wrap a {
    position: absolute;
    width: 8.5em;
    height: 4.8125em;
    display: block;
    background: url(../sitepix/structural/logo.svg) no-repeat left top;
    background-size: 8.5em 4.8125em;
    bottom: 1em;
    left: 50%;
    margin: 0 0 0 -4.4em;
}

.no-svg .small-logo-wrap a {
              background-image: url(../sitepix/structural/red-logo-small.png);
            }

.footer-nav > li {
    float: left;
    width: 23%;
    margin: 0 2.66666666667% 0 0;
}

.footer-nav > li:last-child {
    margin: 0;
}

            
 

/* ===========================
	ABOVE 767px  
============================= */

@media screen and (min-width: 47.9375em) {

            /* ===========================
                GLOBAL  
            ============================= */

            /* ===========================
                CLASSES  
            ============================= */

            /*--- Hide for mobile ---*/

            .hide-mobile {
                display: block;
            }

            /* ===========================
                STRUCTURE
            ============================= */

            /*--- 
            • Grid system for photosales and magazine page 
            • They share alot of same features
            ---*/           
            .preview-sys {
                margin: 0 -0.625em;
            }

            .preview-col {
                width: 50%;
                margin: 0 0 1em 0;
                padding: 0 0.625em;
                float: left;
            }

             .preview-col:nth-child(odd) {
                clear: left;
             }

            .preview-col > a > figure {
                padding: 1em;
                float: none;
            }

            .preview-descrip {
                padding: 0.75em;
                margin: 0;
                float: none;
            }

            /*--- mobile menu ---*/            

            .mobile-menu-wrap { 
                display: none;     /* hide mobile menu */
            }
            .mobile-dropdown-nav{ 
                display: none;     /* hide mobile ddl */
            }

            .content-wrap {
                position: absolute;
                z-index: 100;
                width: 100%;
                background-color: rgb(255,255,255);
                top: 0;
            }

            .left-side {
                width: 14.575em; /*230px*/
                float: left;
                margin: -3em 0 2em 0;
                display: block;
            }
            .left-side a {
                text-decoration:none;
            }

            .main {
                 /*width: 74%; 888px*/
                overflow: hidden;
                padding: 0 0 0 2%;
                margin: 0 0 2em 0;
            }

            .content-span6 {
                width: 65%;
                margin: 0 3% 0 0;
            }

            .content-span5 {
                width: 53%;
                margin: 0 5% 0 0;
            }

            .content-span4 {
                width: 42%;
            }

            .content-span3 {
                width: 32%;
            }


            /*--- Sign in box ---*/

            .login-in-wrap {
                margin: 0;
                background: url(../sitepix/structural/login-bg.png) repeat-y left top;
                background-size: 233px auto;
            }

            .hide-login {
                display: block;
                position: absolute;
                top: 0.5em;
                right: 0.5em;
                margin: 0 0 1em 0;
            }

            .login-in-wrap > fieldset {
                 float: right;
                 margin: 2.5em 0;
            }

            .login-in-wrap > fieldset > label {
                float: left;
                margin: 0.4em;
            }

            .login-in-wrap > fieldset > input[type="text"] {
                float: left;
                width: 11.875em;
            }

            .login-in-wrap > fieldset > input[type="submit"] {
                clear: both;
            }

            .forget-text {
                clear: left;
                margin: 0 0 0 16%;
            }

            /*--- Main Menu ---*/

            .main-nav-horz {
                display: none;
            }

            .main-nav-vert {
                display: block;
            }

            .main-nav {
                margin: 0 0 1em 0;
            }

            .main-nav > ul {
                margin: 0;
                list-style-type: none;
            }

            .main-nav > ul > li {
                width: 100;
                background-color: rgb(51,51,51);
                text-align: left;
                border-bottom: 1px solid rgb(0,0,0);
            }

            .main-nav > ul > li:last-child {
                border-radius: 0 0 4px 4px;
            }

            .main-nav > ul > li:hover {
                background-color: rgb(163,197,204);
            }

            .main-nav > ul > li > a {
                border-top: 1px solid rgb(102,102,102);
                font-size: 1.125em;
                font-weight: 700;
                text-decoration: none;
                color: rgb(255,255,255);
                display: block;
                line-height: 0.8em;
                padding: 0.761904em 0 0.761904em 0.761904em;
            }

            /*--- Right Hand Side ---*/

            .logo-wrap {
                background-color: rgb(204,91,88);
                height: 10.625em;
                width: 100%;
                position: relative;
                margin: 0 0 1em 0;
            }

            .logo-wrap a {
                width: 11.6875em;
                height: 6.4375em;
                display: block;
                background: url(../sitepix/structural/logo.svg) no-repeat left top;
                position: absolute;
                bottom: 2em;
                left: 50%;
                margin: 0 0 0 -6em;
            }
            
            .no-svg .logo-wrap a {
              background-image: url(../sitepix/structural/red-logo.png);
            }

			.news-button {
                background-color: rgb(51,51,51);
                color: rgb(255,255,255);
                border-radius: 4px;
                font-size: 1.4375em;
                font-weight: 800;
                padding: 0.8695652em 15% 0.8695652em 5%;
                margin-bottom: 15px;
                cursor: pointer;
            }		

            .choose-branch-link, .choose-group-link {
                background-color: rgb(51,51,51);
                color: rgb(255,255,255);
                border-radius: 4px 4px 0 0;
                font-size: 1.4375em;
                font-weight: 800;
                padding: 0.8695652em 15% 0.8695652em 5%;
                margin-bottom: 1px;
                cursor: pointer;
            }			

            .news-button.active, .news-button:hover, .choose-branch-link:hover, .choose-branch-link.active, .choose-group-link:hover, .choose-group-link.active  {
                background-color: rgb(163,197,204);
            }

            .arrow {
                width: 0; 
                height: 0; 
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-top: 8px solid rgb(255,255,255);
                float: right;
                margin: 0.35em 0 0 0;
            }

            .choose-branch-menu, .choose-group-menu {
                margin: 0 0 1px 0;
                display: none;
            }

            .choose-branch-menu > ul, .choose-group-menu > ul {
                list-style-type: none;
                margin: 0;
            }

            .choose-branch-menu > ul > li, .choose-group-menu > ul > li {
                border-top: 1px solid rgb(204,91,88);
            }

            .choose-branch-menu > ul > li > a, .choose-group-menu > ul > li > a {
                font-size: 1.125em;
                color: rgb(255,255,255);
                font-weight: 400;
                text-decoration: none;
                /*border-bottom: 1px solid rgb(143,47,52);*/
                border-bottom: 1px solid #a2353b;
                display: block;
                /*background: rgb(156,57,63);
                background:#bd4b52;*/
                background:#af4047;
                
                padding: 0.55555em 0.888888em;
            }

            .choose-branch-menu > ul > li:last-child > a, .choose-group-menu > ul > li:last-child > a {
                 border-radius: 0 0 4px 4px;
            }

            .choose-branch-menu .active, .choose-group-menu .active {
                font-weight: 700;
            }

            .sub-branch-menu {
                display: none;
            }

             .sub-branch-menu > ul,.sub-sub-branch-menu > ul {
                list-style-type: none;
                margin: 0;
             }

            .sub-branch-menu > ul > li,.sub-sub-branch-menu > ul > li {
                border-top: 1px solid rgb(106,38,40);
            }

            .sub-branch-menu > ul > li:last-child > a,.sub-sub-branch-menu > ul > li:last-child > a {
                border-bottom: 0;
            }

            .sub-branch-menu > ul > li a,.sub-sub-branch-menu > ul > li a {
                background: rgb(137,49,53);
                display: block;
                color: rgb(255,255,255);
                text-decoration: none;
                border-bottom: 1px solid rgb(178,66,73);
                padding: 0.55555em 0.888888em;
            }

            .sub-branch-menu > ul > li a:before {
                content: "- "
            }

           .sub-sub-branch-menu > ul > li a:before {
                content: "- - "
            }
            /*--- Side news ---*/

            .side-meeting-wrap h3 {
                font-size: 1.4375em;
                font-weight: 700;
                color: rgb(55,57,57);
                border-bottom: 1px solid rgb(232,232,232);
                padding: 0 0 0.5em 0;
            }

            .side-meeting-link {
                text-decoration: none;
                border-bottom: 1px solid rgb(232,232,232);
                display: block;
                padding: 1em 0;
            }

            .side-meeting-header {
                color: rgb(55,57,57);
                font-size: 1.1875em;
                font-weight: 700;
                display: block;
                padding: 0 0 0.5em 0;
            }

            .side-meeting-date {
                display: block;
                color: rgb(204,90,88);
                font-size: 1.125em;
                font-weight: 700;
                font-style: italic;
            }

            .side-meeting-destination {
                font-size: 1.125em;
                color: rgb(51,51,51);
                font-style: italic;
            }

            .view-all-events-but {
                background: rgb(232,232,232);
                display: block;
                color: rgb(51,51,51);
                font-size: 1.1875em;
                padding:  0.526315em 0 0.526315em 0.78947em;
                text-decoration: none;
                font-weight: 700;
                border-radius: 0 0 4px 4px;
            }
            
            /*--- action-boxes ---*/

            .action-boxes {
                margin: 0 -0.625em 2em;
            }

            .action-boxes > li {
                width: 50%;
                float: left;
                padding: 0 0.625em;
                margin: 0 0 2.250em;
            }

            .action-boxes img {
                float: none;
                width: 100%;
            }          
           
           
            
             /*--- Library Archive ---*/

            .search-box-wrap {
                margin: 0 10% 2em 0;
            }

            /*--- Branch Section ---*/

            .branch-map {
                float: none;
           } 
           .add-to-basket select {  
                width: 45%;      
            }
 
            
}


/* ===========================
	ABOVE 1000px
============================= */

@media screen and (min-width: 62.5em) {

            /* ===========================
                STRUCTURE
            ============================= */
            
           
            .image-section{
                width: 35%;
                float: left;
                margin-left:5%;
            }
            
            .introduction img {
                display:block;               
            }
            .text-section{
                width:60%;
                float:left;  
                padding:20px;             
            }
            .content-span6 {
                width: 65%;
                margin: 0 6% 0 0;
            }

            .content-span3 {
                width: 29%;
            }

            /*--- 
            • Grid system for photosales and magazine page 
            • They share alot of same features
            ---*/

            .preview-sys {
                margin: 0 -1.125em;
            }

            .preview-col {
                width: 33.3333333333%;
                margin: 0 0 2em 0;
                padding: 0 1.125em;
                float: left;
            }

             .preview-col:nth-child(odd) {
                clear: none;
             }

             /*--- login ---*/

            .login-in-wrap {
                margin: 0;
                background: url(../sitepix/structural/login-bg.png) repeat-y left top;
            }

            .main {
                 /*width: 74%; 888px*/
                overflow: hidden;
                padding-left: 4%;
            }

	.left-side {
	    width: 17.25em; /* width: 23%; 276px*/
	    float: left;
               
	}

            /*--- desktop logo ---*/

            .logo-wrap {
                 height: 20em;
            }

            /*--- main nav ---*/

            .main-nav-horz {
                display: block;
            }

            .main-nav-vert {
                display: none;
            }

            .main-nav {
                display: table;
                border-collapse: collapse;
                margin: 0 0 1em 0;
            }

            .main-nav > ul {
                display: table-row;
                width: 100%;
                list-style-type: none;
            }

            .main-nav > ul > li {
                display: table-cell;
                background-color: rgb(51,51,51);
                vertical-align: middle;
                border-top: 1px solid rgb(255,255,255);
                border-right: 1px solid rgb(255,255,255);
                border-bottom: 0;
            }

            .main-nav > ul > li:first-child {
                border-radius: 0 0 0 4px;
            }

            .main-nav > ul > li:last-child {
                border-radius: 0 0 4px 0;
            }

            .main-nav > ul > li:hover {
                background-color: rgb(163,197,204);
                border-top: 1px solid rgb(163,197,204);
            }

            .main-nav .nav-la { width: 13%; }
            .main-nav .nav-o { width: 12%;}
            .main-nav .nav-om { width: 15%;}
            .main-nav .nav-p { width: 19%;}
            .main-nav .nav-ps { width: 12%;}
            .main-nav .nav-d { width: 10%;}
            .main-nav .nav-m { width: 19%;}

            .main-nav > ul > li a {
                font-size: 1.125em;
                text-align: center;
                text-transform: uppercase;
                border-top: 0;
                padding-left: 0;
            }

             /*--- choose menu ---*/

            .arrow {
                margin: 0.35em 0 0 0;
            }

            /*--- Boxes of delight ---*/

            .boxes-of-delight {
               margin: 0 -1.125em 2em;
            }

            .boxes-of-delight > li {
                width: 33.33333333333%;
                padding: 0 1.125em;
                float: left;
            }

            /*--- action-boxes ---*/

            .action-boxes {
                margin: 0 -1.125em 2em;
            }

            .action-boxes > li {
                width: 33.3333333333%;
                float: left;
                padding: 0 1.125em;
                margin: 0 0 2.250em;
            }

            .action-boxes > li:nth-child(4) {
                clear: left;
            }

            /*--- Hero banner ---*/

            .hero-wrapper {
                width: 100%;
                margin: 0 0 1em 0;
            }
                     
           
            /*--- Library Archive ---*/

            .search-box-wrap {
                margin: 0 30% 2em 0;
            }

            /*--- contact from ---*/

            .address-wrap {
                width: 45%;
                float: left;
            }

            .contact-wrap {
                width: 47%;
                float: right;
            }
            
             /*--- membership from ---*/

            .membership-wrap {
                width: 70%;
                float: left;
            }
            
            .border-bottom
            {
                padding-bottom:20px;
                border-bottom: 1px solid #E8E8E8;
            }
            
             .membership-wrap-membership 
             {
               
                width: 70%;
                float: left;
                padding-top: 2%;
            }
             .membership-wrap-branches {               
                border-top: 1px solid #E8E8E8;
                padding-top: 2%;
                float: left;
                width:50%;
                font-size:0.875em;
                padding-right:2%;
            }
            
             .membership-wrap-branches table td {               
                width:330px;
                padding-bottom:5px;
            }
            
            .membership-wrap-osmart{
                border-top: 1px solid #E8E8E8;
                padding-top: 2%;
                margin-top:2%;
                width: 70%;
                float: left;
            }
             .membership-wrap-donations
             {
                border-top: 1px solid #E8E8E8;
                padding-top: 2%;
                margin-top:2%;
                width: 70%;
                float: left;
            }
            
            .membership-wrap-our-records
             {
                border-top: 1px solid #E8E8E8;
                width: 70%;
                float: left;
                padding-top: 2%;
            }
              .postcard-wrapper {
                display:block;
                width: 60%;                
                margin: 0 0 1em 0;
                float:right;
            }
            
             .postcardslider {
                max-height:300px;
            }
            
            .bulletin 
            {
              border-top: 1px solid #E8E8E8;
              padding-top:2%;
              float:left;
              width:47%;  
              font-size: 0.875em;
            }

            .bulletin label
            {
                width:90%;
                padding-bottom: 2%;
            }
            
/* ===========================
    ABOVE 1100px
============================= */

@media screen and (min-width: 68.75em) {

            .main-nav > ul > li a {
                font-size: 1.3125em;
            }
            
            .postcard-wrapper {               
                width: 50%; 
            }
           
			
}
















/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */