/* ie 5 and below specific styles */

@import url("/EasySiteWeb/EasySite/StyleData/alfred_squire_master/CSS/lib.nav.css");
@import url("/EasySiteWeb/EasySite/StyleData/alfred_squire_master/CSS/lib.generics.css");
@import url("/EasySiteWeb/EasySite/StyleData/alfred_squire_master/CSS/lib.forms.css");
@import url("/EasySiteWeb/EasySite/StyleData/alfred_squire_master/CSS/lib.grists.css");
@import url("/EasySiteWeb/EasySite/StyleData/alfred_squire_master/CSS/lib.panels.css");
@import url("/EasySiteWeb/EasySite/StyleData/alfred_squire_master/CSS/lib.promotion.css");
@import url("/EasySiteWeb/EasySite/StyleData/alfred_squire_master/CSS/lib.apps.css");

@media screen, all {

/*-------------------------------------------------------
 LAYOUT
---------------------------------------------------------*/

/* whole page container */
#sx-wrapper { }
.sx-wo { }
.sx-wi { width: 960px; background: #fff; margin: auto; }

/* masthead */

#sx-masthead
{
    width: 100%;
    height: 0;
    padding-bottom: 7%;
    background: #ffffff;
    margin-bottom:-10px;
}

.sx-mo
{
    width: 100%;
    height: 0;
    padding-bottom: 7%;
    
}

#sx-masthead .title
{
    width: 50%;
    max-height: 128px;
}

#sx-masthead .title img
{

    width: 50%;
    max-width: 411px;
    max-height: 128px;
    margin-left: 30%;
    margin-right: auto;
    display: block;
}

#sx-masthead .nav-menu
{
    float: left;
    width: 100%;
    margin-top: 1%;
    margin-bottom: -10px;
}

/*-------------------------------------------------------
 Horizontal navigation
---------------------------------------------------------*/

nav.hori
{
    height: 40px;
    width: 70%;
    margin: 0 auto;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Sans-Serif;
    position: relative;
    background-color: #f1f0fe;
}

nav.hori ul
{
    padding: 0;
    margin: 0 auto;
    width:100%;
    height: 40px;
}

nav.hori li
{
    display: inline;
    float: left;
    width: 10%;
    height: 40px;
    margin: 0 0.6% 0 0.6%;
}

nav.hori li.big
{
    display: inline;
    float: left;
    width: 14%;
    height: 50px;
    margin: 0 2.5% 0 2.5%;
}

nav.hori a {
    color: #541b52;
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
    padding-top: 5px;
}

nav.hori li a {
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}



nav.hori a#pull {
    display: none;
}   

.clearfix:before,
.clearfix:after
{
    content: " ";
    display: table;
}

.clearfix:after
{
    clear: both;
}

.clearfix
{
    *zoom: 1;
}

/*-------------------------------------------------------
 Top row
---------------------------------------------------------*/

#top-row 
{
    width: 100%;
    height: 0;
    padding-bottom: 30%;
    background-color: #623961;

}

/*-------------------------------------------------------
 Search box
---------------------------------------------------------*/
#sx-search {  }
#sx-search { border: 1px solid #193B12; height: 40px;  }
#sx-search fieldset { border: 0; padding: 0; margin: 0; width: 100%; }
#sx-search fieldset legend, #sx-search fieldset .question { display: none; }
#sx-search fieldset .fields { float: left; width: 75%; height: 40px; }
#sx-search fieldset .buttons { float: left; width: 25%; background-color: #B42489; text-align: right; }
#sx-search .textbox { border: 0; height: 40px; padding-left: 5px; }
#sx-search .button { display: inline-block; float: right;  }
#sx-search .button { border: 0; height: 40px; width: 100%; background-color: #B42489; color: #fff; cursor: pointer; }
#sx-search .element { margin: 0; height: 40px; }

/* nav + content */
#sx-body { clear: both; background: #fff; margin: auto; }
.sx-bdo { background: #fff; padding: 0 0 0 0; width: 70%; margin: auto; }
.sx-bdi { width: 100%; margin: auto; padding: 0 0 20px 0; }

/* content */
#sx-content { float: right; width: 75%; }
.sx-co { padding: 0; }
.sx-ci {}

/* generator */
#sx-generator {}

/*-------------------------------------------------------
 USABILITY
---------------------------------------------------------*/
/* accessibility links */
#sx-help { position: relative; font-size: .9em; float: right; }
#sx-help ul, #sx-help li { list-style-type: none; margin: 0; padding: 0 0; }
#sx-help li { float: left; display: block; padding: 0 0; }
#sx-help li.text-larger { padding: 0; }
#sx-help a:link, #sx-help a:visited { padding: 0 10px 0 0; }

/*-------------------------------------------------------
 BREADCRUMB 
---------------------------------------------------------*/
#sx-bct { clear: both; padding: 0 20px 15px; }
.style-bi { }

/*-------------------------------------------------------
 FOOTER
---------------------------------------------------------*/
#sx-extras { clear: both; background-image: url('../Images/footer.png'); background-size: 100%; background-repeat: no-repeat; display: block; width: 70%; min-height: 201px; margin: 0 auto; font-size: 11px; color: #fff; }
#sx-extras .sx-eo { width: 94%; margin: auto; padding-top: 12%; padding-left: 3%; padding-right: 3%; }
#sx-extras .sx-ei { }

#sx-extras .copyright .footer-column1 { float: left; width: 16%; color: #fff; }
#sx-extras .copyright .footer-column1 ul { list-style-type: none; }

#sx-extras .copyright .footer-column2 { float: left; width: 16%; color: #fff; }
#sx-extras .copyright .footer-column2 ul { list-style-type: none; padding-left: 10px; }

#sx-extras .copyright .footer-column3 { float: left; width: 16%; color: #fff; }
#sx-extras .copyright .footer-column3 ul { list-style-type: none; padding-left: 10px; }

#sx-extras .copyright .footer-column4 { float: left; width: 5%; color: #fff; }

#sx-extras .copyright .footer-column5 { float: left; width: 5%; color: #fff; }

#sx-extras .copyright .footer-column6 { float: left; width: 16%; color: #fff; }
#sx-extras .copyright .footer-column6 ul { list-style-type: none; padding-left: 10px; }

#sx-extras .copyright .footer-column7 { float: left; width: 21%; color: #fff; padding-right: 20px; }
#sx-extras .copyright .footer-column7 ul { list-style-type: none; }
#sx-extras .copyright .footer-column7 img { float: right; }

#sx-extras .flinks { float: right; width: 49%; text-align: right; }
#sx-extras .flinks ul, #sx-extras .flinks li { list-style-type: none; margin: 0; padding: 0; display: inline; }
#sx-extras .flinks li { padding: 0 10px; border-left: 1px solid #fff; }
#sx-extras .flinks li:first-child { border: 0; }
#sx-extras .flinks li a:link, #sx-extras .flinks li a:visited { color: #fff; }
#sx-extras .flinks li a:hover, #sx-extras .flinks li a:active { color: #fff; text-decoration: underline; }
#sx-generator { background: #fff; text-align: center; color: #ccc; padding: 10px 0; }

/*-------------------------------------------------------
 COLUMNS
---------------------------------------------------------*/


/*-------------------------------------------------------
Homepage top row
--------------------------------------------------------*/
div.pel-outer.columns-outer.columns-alpha:first-child
{
    width: 100%;
    height: 0;
    padding-bottom: 25%;
    background-color: #623961; 
}

div.pel-outer.columns-outer.columns-alpha:first-child .columns-alpha .column-inner
{
    margin-right: 0; 
}

div.pel-outer.columns-outer.columns-alpha:first-child div.column-outer.column-alpha .column-inner
{
    width: 90%;
    height: 0;
    padding-bottom: 31%;
    margin-left: 5%;
    margin-top: 2%;
    margin-bottom: 2%;
}

div.pel-outer.columns-outer.columns-alpha:first-child div.column-outer.column-beta .column-inner
{
    width: 80%;
    height: 0;
    padding-bottom: 73%;
    margin: 5%;
    background-color: #ffffff;
    position: relative;
}

div.pel-outer.columns-outer.columns-alpha:first-child div.column-outer.column-beta .justify-left
{
    margin-bottom: 0;
}

div.pel-outer.columns-outer.columns-alpha:first-child div.column-outer.column-beta .contenteditor p
{
    margin-left: 3%;
    margin-right: 3%;
    font-size: 12px;
}

div.pel-outer.columns-outer.columns-alpha:first-child div.column-outer.column-beta .contenteditor h4
{
    font-size: 1.2em;
    color: #669933;
    font-weight: bold;
    display: block;
    margin: 0;
    width: 200px;
    margin-bottom: 10px;
}

div.pel-outer.columns-outer.columns-alpha:first-child div.column-outer.column-beta .contenteditor h5
{
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 14px;
}

div.pel-outer.columns-outer.columns-alpha:first-child div.column-outer.column-beta .contenteditor h6
{
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 12px;
}

div.pel-outer.columns-outer.columns-alpha:first-child div.column-outer.column-beta .contenteditor:nth-of-type(4n)
{
    font-size: 14px;
}

div.pel-outer.columns-outer.columns-alpha:first-child .pel-o
{
    background-color: #669933;
    color: #fff;
    text-align: center;
    padding: 5px;
    margin-right: 7%;
    margin-left: 7%;
    margin-bottom: 3%;
    position: absolute;
    bottom: 0;
    font-size: 16px;
}


/*-------------------------------------------------------
Homepage main body
--------------------------------------------------------*/
#main-body
{
    margin-top: 3%;
    width: 100%;
}

/*---- left side (icons) ----*/
#main-body .left
{
    width: 70%;
    float: left;
}

#main-body .left .box1
{
    float: left;
    width: 28%;
    height: 0;
    padding-bottom: 25%;
    background-color: #DFDFDF;
    margin-left: 4%;
    position: relative;
    border: 1px solid #EDD1EC;
}

#main-body .left .box1 .sub
{
    width: 100.5%;
    background-color: #663366;
    position: absolute;
    bottom: 0;
    margin-bottom: 0;
    height: 38px;
    display: table;
}

#main-body .left .box1 .sub p
{
    color: #fff;
    font-family: Arial;
    font-size: 13px;
    padding-top: 2px;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 3px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
/*-----------------------------------*/

/*---- right side (contact number and Twitter) ----*/
#main-body .right
{
    width: 30%;
    float: right;
}

#main-body .right .contact-box
{
    width: 80%;
    margin-left: 5%;
    height: 0;
    padding-bottom: 20%;
    background-color: #669933;
    padding-left: 3%;
}

#main-body .right .contact-box img
{
    float: left;
    margin-top: 3%;
    margin-bottom: 3%;
}

#main-body .right .contact-box p
{
    color: #fff;
    font-family: Arial;
    padding-top: 4%;
    padding-bottom: 4%;
    padding-left: 50px;
    font-size: 18px;
}

#main-body .right .twitter
{
    
    width: 80%;
    margin-left: 5%;
    height: 0;
    padding-bottom: 100%;
    background-color: #669933;
    padding-left: 3%;
    margin-top: 25px;
}

#main-body .right .twitter img
{
    float: left;
    margin-top: 3%;
    margin-bottom: 3%;
}

#main-body .right .twitter p
{
    color: #fff;
    font-family: Arial;
    padding-top: 4%;
    padding-bottom: 4%;
    padding-left: 50px;
    font-size: 18px;
}

}

@media (max-width: 1500px) 
{

#main-body .right .contact-box p
{
    font-size: 16px;
}
 
}

@media (max-width: 1350px)
{
    
div.pel-outer.columns-outer.columns-alpha:first-child .pel-o
{
    font-size: 14px;
}
    
}
/*-----------------------------------*/



@media print {
/* print friendly */
#sx-help, sx-masthead, #sx-extras, #sx-bct { display: none; }
#sx-nav { width: 0; display: none; }
#sx-content { margin-left: 0px; }

}

/*-------------------------------------------------------
 Scrolling images
---------------------------------------------------------*/
.scrolling {
	float: left;
	margin: 0 2% 0 0;
    width: 62%;
    margin-bottom: 20px;
}


.scrolling img {
	height: auto;
	display: block;
}


.scrolling iframe {
	width: 100%;
	display: block;
}



/*-------------------------------------------------------
 homepage rows
---------------------------------------------------------*/
.onerow {
	clear: both;
	padding: 0 10px;

}

.mainrow {
	clear: both;
	padding-top: 30px;

}
