/***********the ultimate modular template is available at http://www.small-business-website-designz.com ***************/

/*********set global properties and values ***********/

body{
margin:auto;
padding:0;
background-color:#ffffff;
background-image:url(../image-files/body.jpg);
background-position:top center;
background-repeat: repeat-x;
background-attachment:fixed;
font-family: verdana, Arial, san-serif;
font-size: 99%;
color:#666666;
line-height: 25px;
 
}

div.fullwidth-head{ 
width:960px;
height:220px; /*this should be set to the height of your header */
border:transparent;
background-image:url(../image-files/sacc-header-960-2b.gif);
background-position:top left;
background-repeat: no-repeat;
margin:0;
padding:0;
}

div.fullwidth-head img{
text-decoration:none; /*gets rid of any border around the hyperlinked header image */
}


.mobile-links{
display:none;
}
.mobile-footer-links{
display:none;
}
.theme-default #slider {
    margin:20px auto 0 auto;
    width:800px; /* Make sure all your images are the same height as each other */
    height:300px; 
}
 
/*this is for the area above the header, if you want to add sitewide or an image */
.pagetop-text{
width: 100%;
margin:0;
position:relative;
top:-30px;
text-align:left;
}
.pagetop-text h1{
font-size:85%;
font-weight:bold;
color:#c0c0c0;
text-decoration:none;
text-align:left;
margin-bottom:-35px;
margin-top:0px;
float:left;
padding-left:5px;
}

.pagetop-text p{
font-size:85%;
font-weight:normal;
color:#c0c0c0;
text-decoration:italic;
padding-right:5px;
float:right;
margin-top:2px;
}

.toplinks{ /* these are the 5 links along the top right of the header */
float:right; 
position:relative; 
top:-15px; 
margin-right:10px; 
clear:both;
}
.toplinks a:link {
color: #9999ff; 
text-decoration: underline;
}
.toplinks a:visited {
color: #9999ff; 
text-decoration: underline;
}
.toplinks a:hover {
color: #6666ff;
text-decoration: underline;
}

p.pagetop a:link{color:blue;}
p.pagetop a:visited{color:blue;}
p.pagetop a:hover{color:black;}



/********this is the clearing div, which should be used after each module to ensure following ones break to a new line.
There are various heights, so you can choose how much space you add between modules*********/
div.clear{clear:both;}div.clear10{clear:both;height:10px;}div.clear20{clear:both;height:20px;}div.clear30{clear:both;height:30px;}div.clear40{clear:both;height:40px;}div.clear50{clear:both;height:50px;}div.clear60{clear:both;height:60px;}div.clear70{clear:both;height:70px;}div.clear80{clear:both;height:80px;}div.clear90{clear:both;height:90px;}div.clear100{clear:both;height:100px;}


/*********set global headline properties and values Setting these means we override the browser default settings. 
That stops IE giving different margins and paddings than Firefox***********/
h1, h2, h3, h4 {
font-family: Arial, san-serif;
color:#34347C;
margin:5px auto;
padding:0;
background:transparent;
}
/********set global headings*************/
h1{font-size:190%; color:#34347C; text-align:center; line-height:32px;}
h2{font-size:130%; color:#34347C; text-align:center;}
h3{font-size:120%; color:#34347C; text-align:center;}
h4{font-size:110%; color:#cccccc; text-align:center;}
/* This is for the heading background color....your H1, H2, and H3 tags*/
.hbg{
background-color:#fff; 
color: #34347C;
width: auto;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #34347C;
margin-top: 10px;
margin-right: 0;
margin-bottom: 2px;
margin-left: 0;
text-align:left;
}



/***********set global link properties and values ***********/

a:link {
color: blue; 
text-decoration: underline;
}
a:visited {
color: purple;
text-decoration: underline;
}
a:hover {
color: #435A8C;
text-decoration: underline;
}
a:link img { /*this gets rid of the blue border around any image that is used as a link*/
border: 0;
}
.outlink{
background-image: url(../image-files/linkout.png);
background-position:right;
background-repeat: no-repeat;
padding: 0 13px 0 0;
}



.right{/*for adding some padding and a float to an image */
float:right;
padding:0 0 5px 5px;
}

.left{/*for adding some padding and a float to an image */
float:left;
padding:0 5px 5px 0;
}

hr{
width:95%;
margin:8px auto;
color:#cccccc;
}

.print-area{
width:500px; 
margin:0 auto; 
border:1px solid #666666; 
padding:10px; 
background-color:#ffffff;
}
/******** SBI BLOG CSS *********/
.blogItItem {
margin:30px 0;
border-bottom:1px solid #ccc;
}

.blogItItem .blogItReadMore {
clear: both;
}

.blogItItem {
margin:30px 0;
padding:0 12px;
border:1px solid #ccc;
background:#ffffff;
box-shadow:4px 4px 4px #ccc;
border-radius:4px;
}

/**** DATE ***/
/*.blogItItem h6 {
font-family: Verdana, Arial, san-serif;
font-size:100%;
color: #144963;
font-weight:bold;
}*/

.blogItItem h3 {
font-family: Arial, Verdana, san-serif;
font-size:155%;
color: #706752;
font-weight:bold;
margin:18px 0;
line-height: 30px;
}

.blogItItem .blogItThumbnail {
float:left;
margin-right:10px;
margin-bottom:10px;
}

.blogItItem p {
font-family: Verdana, Arial, san-serif;
font-size:90%;
text-align:justify;
}
.blogItReadMore a {
color: blue;
}

.blogItReadMore a:hover {
color: #9BA6C2;
}

/*****************the main container to hold everything**********/
.container{
position:relative;
width:960px;
margin:25px auto 15px auto; /*sets the gap at the top and bottom, and centers the page */
background-color:#ffffff;
background-image:url(../image-files/main-container-bg.jpg);
background-position:top center;
background-repeat:repeat-y;
border:1px solid #cccccc; /**** remove this line of css, if you don't want a border around the whole template ****/
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 -webkit-box-shadow: 2px 6px 7px 2px #cccccc;
}


/***********the fullwidth, used for header and footer and any other area that you want the full 960px width *************/
.shell960{
width:960px;
margin:0 auto;
padding:0;
background-color:white;
}
.inner950{/* this is the inner for the shell960 */
width:950px;
margin: 0 auto;
text-align:left;
color:relative;
background-color:#ffffff;
}


/*this is for the option of having a footer spanning the full width of the page, independent of the actual template width */
.fullwidth-footer{ 
width:100%; 
height:200px; 
background-color:transparent; 
border-top:2px solid #e4e4e4; 
}

.footerbox1{
height:180px;
width:22%;
float:left;
border-right:1px solid #e4e4e4;
padding:10px 10px 10px 30px;
line-height:20px;
background-image:url();
margin-bottom:5px;
}
.footerbox4{
height:150px;
width:21%;
float:right;
border-right:1px solid #e4e4e4;
padding:10px;
background-image:url();
margin-bottom:5px;
}
.footerbox1 img, footerbox4 img{
text-decoration:none;
border:transparent;
}
.footerbox1 a, .footerbox4 a {
color:#666666;
margin-bottom:6px;
}
.footerbox1 a:visited, .footerbox4 a:visited {
color:#666666;
}
.footerbox1 a:hover, .footerbox4 a:hover {
color:#333333;
}
.footerbox1 h3, .footerbox4 h3{
color:#666666;
}




/* TWO COLUMN EQUAL WIDTH MODULES, SHELLS AND INNERS*/

.shell465{
width:465px;
float:left;
margin:0 0 0 9px;
background-color: #ffcccc;
border:1px solid #000000; /****remember that a border is added in addition to the width of the div. So if you don't want a border, keep the 1px property but change color to transparent*/
}

.inner450{
width:450px;
margin:0 auto;
} /* this is the inner liner for the above shell */

.inner450 h2, .inner450 h3{
color:red;
}


/**********TWO COLUMN UNEQUAL MODULES This first pair has the wider left column, and narrower right column************************/
.shell505a{
width:505px;
margin-left:9px;
float:left;
background-color: #ffd1b8;
border:1px solid #666666; /****remember that a border is added in addition to the width of the div. So if you don't want a border, keep the 1px property but change color to transparent*/
}
.inner495a{
width:495px;
margin:0 auto;
}
.inner495a h2, .inner495a h3{
color:black;
}
  
.shell425a{
width: 425px;
margin-right:9px;
float:right;
background-color: yellow;
border:1px solid #000000; /****remember that a border is added in addition to the width of the div. So if you don't want a border, keep the 1px property but change color to transparent*/
}
.inner405a{
width:405px;
margin:0 auto;
}
.inner405a h2, .inner405a h3{
color:green; 
}



/**********TWO COLUMN UNEQUAL MODULES 
This second pair has the narrower left column, and wider right column. It is a mirror image of the pair above************************/
.shell425b{
width:425px;
margin-left:9px;
float:left;
background-color: yellow;
border:1px solid #000000; /****remember that a border is added in addition to the width of the div. So if you don't want a border, keep the 1px property but change color to transparent*/
}
.inner405b{
width:405px;
margin:0 auto;
}
.inner405b h2, .inner405b h3{
color:red; 
}

  
.shell505b{
width: 505px;
margin-right:9px;
float:right;
background-color: green;
border:1px solid #000000; /****remember that a border is added in addition to the width of the div. So if you don't want a border, keep the 1px property but change color to transparent*/
}
.inner495b{
width:495px;
margin:0 auto;
}
.inner495b h2, .inner495b h3{
color:yellow;
}

.sub-shell245{/*this is designed to be a pair of columns that sit side by side within the .shell505*/
width:245px;
float:left;
background-color:white;
margin-left:5px;
}
.sub-inner235{
width:235px;
margin:0 auto;
}




/*The standard 2 column widths, with a narrower right column. 
Generally this module is used when you want a traditional 2 column layout WITHOUT a left navigation.
As both the wider and narrower columns are both floated left, you can choose which order to place them.
So that means this works just fine with the wide column on either the left or right side of the page. */

.shell670{/*this is the wider of the two column layout */
width:729px;
float:left;
background-color: #ffffff;
border-right:1px solid #FFFFFF;
}
.inner650{/*this is the inner liner for wider of the two column layout */
width:649px;
margin:10px auto;
}
.inner650 h2, .inner650 h3, .inner650 h4{
color:#34347C;
}



/* the above  column can be sub divided into two sections. The classes below are for this sub division.
They sit inside of the inner650. Any class that starts with the word sub, is one designed to sit within another shell.
It is a "sub" module*/
.sub-shell325{
width:325px;
float:left;
background-image:url(../image-files/shellbox-bg.jp);
background-repeat:repeat-x;
font-family: arial, san-serif;
color:#330033;
background-color:#ffffff;
margin:10px 5px 10px 5px;
padding-top:5px;
border:1px solid blue;
}

.sub-inner300{/* inner liner for the above shell*/
width:300px;
margin:10px auto;
}
.sub-inner300 img{ /*this is to put an automatic border around any image within this class. If you don't want a border, simply deleter this entire class */
padding:2px;
border:1px solid #cccccc;
margin-right:5px;
}
.sub-inner300 h3, .sub-inner300 h4{/*set the headline color for the inner */
color:white;
margin-top:-5px;
}


/*TRIPLE BOXES TO GO INSIDE THE SHELL670 */
.sub-shell215{
width:215px;
float:left;
background-image:url(../image-files/shellbox-bg.jpg);
background-repeat:repeat-x;
font-family: arial, san-serif;
color:#330033;
background-color:#ffffff;
margin:10px 0 10px 5px;
padding-top:5px;
border:1px solid #330033;
}
.sub-inner205{
width:205px;
margin:0px auto;
}
.sub-inner205 h3, .sub-inner205 h4{
color:white;
}


.shell290{/*this is the narrower side of the two column layout */
width:230px;
float:left;
background-color: #ffffff;
}
.inner270{/*this is the inner liner for the narrower side of the two column layout */
width:200px;
margin:10px auto;
}
.inner270 h2, .inner270 h3{
color:blue;
}



/*******FOLLOWING TWO MUODULES ARE FOR A STANDARD 2 COL LAYOUT WITH A LEFT NAV*/
/************this is the 200px wide left nav column. Styling for the left nav is at the bottom of the stylesheet***********************/
.shell-left200{
width:200px;
margin:0 auto;
float:left;
background-color:white;
position:relative;
left:-760px;
}
.inner180{/*this is the inner for the left nav column module */
width:180px;
margin:5px auto;
}



/***************this is the 760px wide right container*******************/
.shell-right760{
width:760px;
margin:0 auto;
float:left;
background-color:#e0e0e0;
position:relative;
left:200px;
}


.inner740{/* this is the inner for the shell-right760 */
width:740px;
margin: 0 auto;
text-align:left;
color:#333333;
}
.inner740 h2, .inner740 h3 {
color:green;
}
.sub-shell380{/*two of these sit side by side between an inner740 closing div, and the shell-right760 closing div */
width:380px;
float:left;
font-family: 'comic sans ms', san-serif;
color:#666600;
background-color:#ffe0b1;
}
.sub-inner360{
width:360px;
margin:0 auto;
}
.sub-inner360 h3{
color:gray;
}

.sub-shell250{/*three of these sit side by side between an inner740 closing div, and the shell-right760 closing div */
width:250px;
margin:0 0 0 2px;
background-color:white;
float:left;
}
.sub-inner240{
width:240px;
margin: 0 auto;
}

.sub-shell185{/*four of these sit side by side between an inner740 closing div, and the shell-right760 closing div */
width:185px;
margin:5px 15px 5px 5px;
    -webkit-box-shadow: 0px 5px 5px 0px #c0c0c0;
    -moz-box-shadow: 0px 5px 5px 0px #c0c0c0;
    box-shadow: 3px 3px 5px 0px #bebebe;
background-color:#e9e9e9;
float:left;

}
.sub-inner175{
width:175px;
margin: 0 auto;
font-size:85%;
}


/******THE MODULES BELOW ARE FOR A STANDARD THREE COLUMN LAYOUT. COLUMN WIDTHS ARE 200-560-200.
USABLE WIDTHS WITH INNERS ADDED, ARE 190-540-190px. 	THE CENTER COLUMN CAN HAVE SUB MODULES
ADDED TO IT IF YOU WANT FURTHER DIVISIONS OF IT. SO IT COULD (FOR EXAMPLE) BE DIVIDED INTO 
TWO EQUAL WIDTH SUB-COLUMNS, EFFECTIVELY CREATING A FOUR COLUMN LAYOUT ************/

.shell200-left3col{/*this is the left column. It goes after the other 2 columns in the source code */
width:200px;
margin:0 auto;
float:left;
background-color:white;
position:relative;
left:-560px;
}

.inner190{/*this inner is used for BOTH the left and right columns of the standard three column layout */
width:190px;
margin:5px auto;
}


.shell560-center3col{/*this is the 560px wide center container. It goes ahead of the other columns, in the source code*/
width:560px;
margin:0;
float:left;
background-color:#c0dddd;
position:relative;
left:200px;
}

.inner540{/*inner for the center column */
width:540px;
margin:0 auto;
}
.inner540 h2, .inner540 h3 {
color:#660066;
}


/*SUB MODULES FOR THE CENTER 560PX COLUMN TWO OF THESE SIT SIDE BY SIDE */
.sub-shell280{
width:280px;
float:left;
background-color:white;
}
.inner270{
width:260px;
margin:0 auto;
}
.inner265 h2, .inner265 h3 {
color:#666666;
}


.shell200-right3col{/*this is the right column. It goes after the main column, and ahead of the left col, in the source code */
width:200px;
margin:0 auto;
float:right;
background-color:#ccff99;
}





/******THE MODULES BELOW ARE FOR A STANDARD THREE COLUMN LAYOUT. COLUMN WIDTHS ARE 180-600-180.
USABLE WIDTHS WITH INNERS ADDED, ARE 170-580-170px. 	THE CENTER COLUMN CAN HAVE SUB MODULES
ADDED TO IT IF YOU WANT FURTHER DIVISIONS OF IT. SO IT COULD (FOR EXAMPLE) BE DIVIDED INTO 
TWO EQUAL WIDTH SUB-COLUMNS, EFFECTIVELY CREATING A FOUR COLUMN LAYOUT ************/

.shell180-left3col{/*this is the left column. It goes after the 600px column in the source code */
width:180px;
margin:0;
float:left;
background-color:#ffffff;
position:relative;
left:-600px;
}

.inner170{/*this inner is used for BOTH the left and right columns of the standard three column layout */
width:170px;
margin:5px auto;
}

.inner170-1{/*this inner is used for BOTH the left and right columns of the standard three column layout */
width:190px;
margin:0 auto;
float:left;
font-size: 90%;
background-color:transparent;
border:1px solid #cccccc;
padding: 12px;
background-image: url(../image-files/boxbg.png);
background-repeat: repeat-x;

}
.inner170-1 h2, .inner170-1 h3 {
color:#34347C;
}

.shell600-center3col{/*this is the 560px wide center container. It goes ahead of the other columns, in the source code*/
width:598px;
margin:2;
float:left;
background-color:#ffffff;
position:relative;
left:180px;
border-right:0px solid #cccccc;
border-left:1px solid #cccccc;
}

.inner580{/*inner for the center column */
width:578px;
margin:0 auto;
}
.inner580 h2, .inner580 h3 {
color:#34347C;
}


/*SUB MODULES FOR THE CENTER 600PX COLUMN TWO OF THESE SIT SIDE BY SIDE */
.sub-shell300{
width:298px;
float:left;
background-color:white;
}
.inner280{
width:260px;
margin:0 auto;
background-color:transparent;
border:1px solid #cccccc;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-box-shadow: 2px 6px 7px 2px #cccccc;
padding: 5px;
background-image: url(../image-files/boxbg.png);
background-repeat: repeat-x;
}
.inner280 h2, .inner280 h3 {
color:#101010;
text-align:center;
}


.shell180-right3col{/*this is the right column. It goes after the main column, and ahead of the left col, in the source code */
width:180px;
margin:10 auto;
float:right;
background-color:#FFFFFF;
}


/******THE MODULES BELOW ARE FOR A BLOG STYLE THREE COLUMN LAYOUT. COLUMN WIDTHS ARE 560-200-200.
USABLE WIDTHS WITH INNERS ADDED, ARE 190-540-190px. 	THE CENTER COLUMN CAN HAVE SUB MODULES
ADDED TO IT IF YOU WANT FURTHER DIVISIONS OF IT. SO IT COULD (FOR EXAMPLE) BE DIVIDED INTO 
TWO EQUAL WIDTH SUB-COLUMNS, EFFECTIVELY CREATING A FOUR COLUMN LAYOUT ************/

.shell560-left3col{/*this is the 560px wide left container. It goes ahead of the other columns, in the source code*/
width:560px;
margin:0;
float:left;
background-color:#c0dddd;
}


.shell200-center3col{/*this is the center column. */
width:200px;
margin:0;
float:left;
background-color:#ffcccc;
}

.shell200-right3col{/*this is the right column. It goes after the other 2 columns in the source code */
width:200px;
margin:0;
float:left;
background-color:yellow;
}

.inner190{/*this inner is used for BOTH the left and right columns of the blog style three column layout */
width:190px;
margin:5px auto;
}



.inner540{/*inner for the main content column */
width:540px;
margin:0 auto;
}
.inner540 h2, .inner540 h3 {
color:#660066;
}



/*SUB MODULES FOR THE MAIN 560PX COLUMN TWO OF THESE SIT SIDE BY SIDE */
.sub-shell280{
width:280px;
float:left;
background-color:white;
}
.inner270{
width:260px;
margin:0 auto;
}
.inner265 h2, .inner265 h3 {
color:#666666;
}


.shell200-right3col{/*this is the right column. It goes after the main column, and ahead of the left col, in the source code */
width:200px;
margin:0 auto;
float:right;
background-color:#ccff99;
}


/*THREE EQUAL WIDTH PRODUCT BOXES*/
.shell320a{/*these sit side by side, in a fullwidth shell960. The a suffix is to distinguish this class from the 3 column in the footer */
width:320px;
float:left;
font-family: 'comic sans ms', san-serif;
color:#666600;
background-color:#ffdccc;
}
.inner310a{
width:310px;
margin:0 auto;
border:1px solid #000000;
padding:2px;
}
.inner310a h3, .inner310a h4{
color:brown;
}


/*FOUR EQUAL WIDTH PRODUCT BOXES*/
.shell240a{
width:240px;
float:left;
background-color:#fcceff;
}
.inner220a{
width:230px;
margin:0 auto;
}
.inner220a h3, .inner220a h4 {
color:red;
}



/* FIVE EQUAL WIDTH PRODUCT BOXES */
.shell192a{
width:192px;
float:left;
margin:0;
}
.inner180a{
width:182px;
margin:0 auto;
}

/*SIX EQUAL WIDTH PRODUCT BOXES */
.shell160{
width:160px;
float:left;
margin:0;
background-color:#e7ec8c;
}
.inner150{
width:150px;
margin:0 auto;
}
.inner150 img{
padding:2px;
border:1px solid #cccccc;
}




/* THE FOOTER CONTAINER, AND THE BOXES THAT SIT INSIDE THE CONTAINER */

.shellfooter{
width:960px;
padding-top:40px;
background-image: url(../image-files/footer-bg1.jpg);
background-repeat:repeat-x;
background-color:#ffffcc;
}


/*These are for the four equal width footer boxes */
.shell240{
width:240px;
float:left;
color:#666666;
background-color:#ffffcc;
}
.inner220{
width:220px;
padding-left:60px;
margin:10px auto;
font-size:85%;
}
.inner220 h2, h3{
color:#666666;
text-align:left;
}
.inner220 ul{
list-style-type: none;
}
.inner220 a:link{
color:#666666;
text-decoration:none;
}
.inner220 a:visited{
color:purple;
}
.inner220 a:hover{
color:blue;
text-decoration:underline;
}



/*These are for the three equal width footer boxes */
.shell320{
width:320px;
float:left;
color:#ffffff;
background-color:#777777;
}
.inner300{
width:300px;
margin:10px auto;
}
.inner300 h2, .inner300 h3{
color:white;
}
.inner300 ul{
list-style-type: none;
}
.inner300 a:link{
color:#ffffff;
text-decoration:none;
}
.inner300 a:visited{
color:#ffffff;
}
.inner300 a:hover{
color:black;
text-decoration:none;
}


/*These are for the two equal width footer boxes*/
.shell480{
width:480px;
margin:0;
float:left;
color:#ffffff;
background-color:#777777;
}
.inner460{
width:460px;
margin:10px auto;
}
.inner460 h2, .inner460 h3{
color:white;
}
.inner460 ul{
list-style-type: none;
}
.inner460 a:link{
color:#ffffff;
text-decoration:none;
}
.inner460 a:visited{
color:#ffffff;
}
.inner460 a:hover{
color:black;
text-decoration:none;
}


.shell315{/* three styles boxes - these sit side by side, in a fullwidth shell960 */
width:311px;
float:left;
background-image:url(../image-files/shellbox-bg.jpg);
background-repeat:repeat-x;
font-family: arial, san-serif;
color:#330033;
background-color:#ffffff;
margin:10px 0 10px 5px;
border:1px solid #330033;
}


/*********THIS IS FOR THE LEFT NAV LINKS  *****************/
.left-nav {
width: 100%;
font-family:  Arial, sans-serif;
background-color: transparent;
font-weight: normal;
font-size:90%;
}

.left-nav h3{
text-align:left;
color:#34347C;
font-size:120%;
margin-bottom:15px;
text-decoration:none;
width: 155px;
position:relative;
left:5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #435A8C;
}

.left-nav ul {
list-style-type: none;
padding: 0 0 8px 5px;
margin: -6px 0 0 0;
}

.left-nav li {
background-color: transparent;       
border-bottom: 1px dotted #cccccc;
margin-bottom: 5px;
}



/* -- Navigation Link styles -- */

.left-nav a {
padding: 3px 3px 3px 20px;
text-decoration: none;
display: block;
background-color: transparent;
border: transparent;
position: relative;
left: -10px;
color: #435A8C;
}

.left-nav a:visited {
color: purple;
background-color: transparent;
text-decoration: none;
}

.left-nav a:hover {
color: #9BA6C2;
background-color: transparent;
text-decoration: none;
/*background-image: url(../image-files/nav-icon.png);*//*make replacement icon around 10px square */
background-position: left center;
background-repeat: no-repeat;
}












/*********THIS IS FOR THE TOP DROP NAV *****************/

.topnav-position{ /*this is to move the topnav from the bottom of the page, to below the header. Set the top value to suit. */
width:960px;
padding:0;
height:47px; 
position:absolute; 
top:193px;
background-image: url(../image-files/navbg-1.gif);
}


#nav {
width:960px;
position:relative; 
z-index:100; 
margin:2px 0 2px 0;
}






/* Get rid of the margin, padding and bullets in the unordered lists Dont touch*/

#pmenu {
padding:0; 
margin:0 auto; 
list-style-type: none; 
display:table;
}

#pmenu ul {
padding:0; 
margin:0; 
list-style-type: none; 
display:block;
}



/* Hide the sub levels Dont touch*/

#pmenu li ul {
display:none;
}



/* Set up the link size, color and borders */

#pmenu li a, #pmenu li a:visited {
display:block; 
background-image: url();  
width:120px; 
font-size:11px; 
font-weight:normal; 
color:#ffffff; 
height:30px; 
line-height:24px; 
text-decoration:none; 
text-indent:5px; 
border:none; 
text-align:center;
}



/* Set up the sub level borders */

#pmenu li ul li a, #pmenu li ul li a:visited {

border:1px solid #cccccc;
}

#pmenu li a.enclose, #pmenu li a.enclose:visited {
border-width:0;
}



/* Set up the list items */

#pmenu li {
float:left; 
background: #435A8C;
}





#pmenu li.tc {
display:table-cell;
}



/* For Non-IE browsers and IE7 */

#pmenu li:hover {
position:relative;
}



/* Make the hovered list color persist */

#pmenu li:hover > a { 
background-image: url(../image-files/navbg-hover.jpg); 
color:#ffff00;
}/*this is the font and background color on hover*/

/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */


#pmenu li:hover > ul {
display:block; 
position:absolute; 
top:-11px; 
left:80px; 
padding:10px 30px 30px 30px; 
background:transparent url(); 
width:120px;
}

/* Position the first sub level beneath the top level links */

#pmenu > li:hover > ul {
left:-30px; 
top:15px;
}



/* get rid of the table */

#pmenu table {
position:absolute; 
border-collapse:collapse; 
top:0; 
left:0; 
z-index:100; 
font-size:1em;
}



/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */

* html #pmenu li a:hover {
position:relative; 
background-color:none; 
color:#ffff33;
}



/* For accessibility of the top level menu when tabbing */

#pmenu li a:active, #pmenu li a:focus {
background-color:none; 
color:#ffffff;
text-decoration:underline; 
}

/* Set up the pointers for the sub level indication */



/* This below is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear Dont touch*/



/* change the drop down levels from display:none; to visibility:hidden; */

* html #pmenu li ul {
visibility:hidden; 
display:block; 
position:absolute; 
top:-11px; 
left:80px; 
padding:10px 30px 30px 30px; 
background:transparent url(); 
}



/* keep the third level+ hidden when you hover on first level link */

#pmenu li a:hover ul ul{

visibility:hidden;

}

/* keep the fourth level+ hidden when you hover on second level link */

#pmenu li a:hover ul a:hover ul ul{

visibility:hidden;

}




/* make the second level visible when hover on first level link and position it */

#pmenu li a:hover ul {

visibility:visible; 
left:-30px; 
top:14px; 
lef\t:-31px; to\p:15px;

}



/* make the third level visible when you hover over second level link and position it and all further levels */

#pmenu li a:hover ul a:hover ul{ 

visibility:visible; 
top:-11px; 
left:80px;

}

/* make the fourth level visible when you hover over third level link */

#pmenu li a:hover ul a:hover ul a:hover ul { 

visibility:visible;

}







.mobile-only {
display: none;
}


/*************************THIS IS THE MOBILE SECTION***************/


@media screen and (max-width: 480px)
{

	html, body {
		font-size: 95%;
		background: #ffffff;
		padding: 2px;
		color: #000000;
		margin: 0;
		}
		
		h1, h2, h3, h4, h5, h6 {
		font-weight: normal;
		}
		
	
		
		.desktop-only{
		display:none;
		}
							
		
		.fullwidth-footer img{
		max-width:50px;
		}
		
	.header-mobile{
	display:block;
	width:100%;
	height:56px;	
	margin:0;
	background-image: url(../image-files/sacc-header-320b.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	}	
	
	.mobile-links{
	display:inline;
	}
	.mobile-footer-links{
	display:inline;
	}
	
	#pmenu li {
  display:inline;
  } 
	
	.mobile-only{
	display:block;
	width:100%;
	}
	
	/**********the floated columns are placed back into an inline position *********/
.shell-right760{
width:100%;
margin:5px auto;
float:none;
background-color:#ffffff;
position:relative;
left:0;
}

.shell600-center3col{
width:100%;
margin:5px auto;
float:none;
background-color:#ffffff;
position:relative;
left:0;
}
.shell560-center3col{
width:100%;
margin:5px auto;
float:none;
background-color:#ffffff;
position:relative;
left:0;
}

.shell200-left3col{
width:100%;
margin:5px auto;
float:none;
background-color:#ffffff;
position:relative;
left:0;
}

.sub-shell280{
width:280px;
border:1px solid #cccccc;
margin:5px auto;
float:none;
background-color:#ffffff;
}

.shell180-right3col{
width:100%;
margin:5px auto;
float:none;
background-color:#ffffff;
position:relative;
left:0;
}

.shell200-right3col{
width:100%;
margin:5px auto;
float:none;
background-color:#ffffff;
position:relative;
left:0;
}

.shell320, .shell320a{
width:320px;
margin:5px auto;
float:none;
background-color:#ffffff;
}

	
	.container, .shell960,  .shell670, .shell600-center3col, .shell560-center3col, .shell560-left3col, .shell505a, .shell505b, .shell480, 
	.shell465, .shell425a, .shell425b,  .shell315, .shell240a,  .shell290, .shell240, .shell200-right3col, .shell200-center3col, 
	.shell200-right3col, .shell192a, .shell180-right3col, .shell180-left3col, .shell160, .print-area {
	
	float:none;
	display:block;	
	width:100%;
	margin:5px auto;
	padding:0;
	background-color:#ffffff;
	clear:both;
	}
	
	.inner950, .inner740, .inner650, .inner580, .inner540, .inner495a, .inner495b, .inner460, .inner450, .inner405a, .inner405b, 
	.inner300, .inner310a, .inner280, .inner270, .inner265,
	.inner220, .inner220a, .inner190, .inner180, .inner180a, .inner170, .inner150{
	width:95%;
	padding: 0 5px;
	background-color:#ffffff;
	} 
	
	.sub-shell380,  .sub-shell325, .sub-shell300, .sub-shell300r, .sub-shell280, .sub-shell250, .sub-shell245, .sub-shell215, .sub-shell185{
	display:block;
	width:80%;
	margin:5px auto;
	padding:0;
	background-color:#ffffff;
	clear:both;
	}
	
	.sub-inner360, .sub-inner300, sub-inner240, .sub-inner235, .sub-inner205, .sub-inner175{
	width:95%;
	padding: 0 5px;
	background-color:#ffffff;
	}
	
	.sub-inner300 h4, .sub-inner205 h4{ /*as these classes had a black background on the fullsized version, the headings were white. We need to change that here to black, so that the headings show */
	color:#000000;
	}
	
	.footerbox1, .footerbox4{
	width:22%;
	}
	.footerbox1 img, .footerbox4 img{
	height:40px;
	width:40px;
	}
	
	.theme-default #slider {
    margin:20px auto 0 auto;
    width:580px; /* Make sure your images are the same size */
    height:300px; /* Make sure your images are the same size */
  }


	 img{
	 max-width:580px;
	 max-height:300px;
	 }
	
	
	
	 	

	a:link, a:visited {
		text-decoration: underline;
		color: #0000CC;
		}
	a:hover, a:active {
		text-decoration: underline;
		color: #660066;
		}

}

/*----------------------FROM EARLIER VERSION TEMPLATE ----------------*/
div.third-right-1 {
  background-color: #ffffff;
	margin: 5px 2px 5px 2px;
	border: 1px solid #000066;
	padding: 10px;
	width: 33%;
	float: right;
}
.text-1{
font-family:  times new roman, verdana, sans-serif;
font-size: 100%;
font-weight:normal;
background-color:transparent; 
text-align:center; 
padding-bottom:5px;
}

div.third-right{
width:298px;
float:right;
background-color:white;
}
.inner3{
width:260px;
margin:0 auto;
background-color:transparent;
border:1px solid #cccccc;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-box-shadow: 2px 6px 7px 2px #cccccc;
padding: 5px;
background-image: url(../image-files/boxbg.png);
background-repeat: repeat-x;
}
.inner3 h2, .inner3 h3 {
color:#144963;
text-align:center;
}
/*---------------quote-boxes-------------*/
div.quote-box{
background-color: transparent;
	margin: 5px 0px 0px 0px;
	padding: 15px;
    border-top-width: 3px;
	border-bottom-width: 3px;
	border-top: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
   height: auto;
}

div.half-right-quote {
  background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border-top-width: 3px;
	border-bottom-width: 3px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 10px;
	width: 40%;
	float: right;
}

div.half-left-quote {
  background-color: #ffffff;
	margin: 5px 5px 5px 5px;
	border-top-width: 3px;
	border-bottom-width: 3px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 10px;
	width: 40%;
	float: left;
}

.top-left-image-q{
background-image: url(../images/quote-gry-l-block-58x55-a.gif);
background-repeat: no-repeat;
background-position:top left;
}

.bottom-right-image-q{
background-image: url(../images/quote-gry-r-block-58x55-a.gif);
background-repeat: no-repeat;
background-position:bottom right;
}

.text{
font-family:  times new roman, verdana, sans-serif;
font-size: 150%;
font-weight:normal;
font-style:italic;
color:#808080;
background-color:transparent; 
border-left:transparent; 
border-right:transparent; 
text-align:left; 
padding-left:10px; 
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
line-height: 22px;
}
	/*-----------------end quote boxes-------------------*/


/***for quote boxes with two quote marks top and bottom***/
div.quote-container {
text-align:center;
font-family: verdana, sans-serif;
font-size: 110%;
font-weight:normal;
background-color:transparent; 
color:#674ea7;
width: auto;
padding:0px 0px 0px 0px;
margin: 1px;
border:0px solid #e8d2e8;

}

.top-left-image-quote{
background-image: url(../image-files/quote-gry-lft3-50.gif);
background-repeat: no-repeat;
background-position:top left;

}

.bottom-right-image-quote{
background-image: url(../image-files/quote-gry-rght3-50.gif);
background-repeat: no-repeat;
background-position:bottom right;

}

.text-q{
font-family:Times New Roman, Times, Serif;
font-size: 110%; 
font-weight:normal;
font-style: italic;
color:#666666;
background-color:transparent; 
border-left:1px solid transparent; 
border-right:1px solid transparent; 
text-align:center; 
padding-left:10px; 
padding-right:0px;
padding-top:10px;
padding-bottom:10px;
line-height:18px;

}

/***end quote boxes***/