/***********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/full-width-header-bg.jpg);
background-position:top center;
background-repeat: repeat-x;
background-attachment:scroll;
font-family: Verdana, Arial, san-serif;
font-size: 90%;
color:#000;
}

div.fullwidth-head{ 
width:960px;
height:220px; /*this should be set to the height of your header */
border:transparent;
background-image:url(../image-files/header.jpg);
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 */
}

div.formblock {
max-width: 70%;
padding:0 5px 20px 10px;
background-color:#f7f7f7;
margin:30px auto;
border:1px solid #9f9f9f;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
}

div.formblock2 {
width: 95%;
padding:0 5px 20px 10px;
background-color:#f7f7f7;
margin:30px 0;
border:1px solid #9f9f9f;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
}

div.formblock2 ul{
margin-left: -20px;
list-style:inside;
}

div.formblock2 li{
margin-top:4px;
}

.calloutbox, .calloutbox-y {
padding: 10px;
color: black;
font-size: 92%;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
}

.calloutbox {
	float:right;
	width: 60%;
	margin: 20px 0 8px 15px;
	background-color: #F7F7F7;
	border: 1px solid #9F9F9F;
}

.calloutbox-y {
	margin:20px auto;
	text-align:center;
	background-color: #FEF0AF;
	width: 75%;
	border: 1px solid #BF4801;
}

.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; 
}
 
.red {
color:#B3001F;
}

.toplinks{ 
float:right; 
position:relative; 
top:158px; 
margin-right:0px; 
clear:both;
}

.toplinks ul { 
	margin: 0;
	list-style-type: none;
	padding: 0;
}

.toplinks ul li {
	display: inline;
	background-color: transparent;
	margin-left: 15px;
}

.toplinks a {
font-size: 13px;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
}

.toplinks a:link {
color: #000; 
text-decoration: none;
}
.toplinks a:visited {
color: #000; 
text-decoration: none;
}
.toplinks a:hover {
color: #BF4700;
text-decoration: underline;
}

/* Highlighted top links when on the same page */
.toplinks .samepagelink a
{
	background-color:#000;
	color:#fff;
	padding: 0 2px;
}



ul, ol {
line-height:1.5em;
margin-top: 10px;
margin-bottom: 10px;
}



/********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:#101010;
margin:5px auto;
padding:0;
background:transparent;
}
/********set global headings*************/
h1{font-size:200%; text-align:center;}
h2{font-size:170%; text-align:center;}
h3{font-size:150%; text-align:center;}
h4{font-size:120%; text-align:center;}



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

a:link{color:#BF4700;}
a:visited{color:#8D006A;}
a:hover{color:#000099;}

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;
margin:1px 0 8px 15px;
}

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

.center {
text-align:center;
}

.published_date {
color:#9f9f9f;
}

.entry_title h3 {
text-size: 90%;
}

hr{
width:100%;
margin:20px auto;
color:#9f9f9f;
}

.print-area{
width:500px; 
margin:0 auto; 
border:1px solid #666666; 
padding:10px; 
background-color:#ffffff;
}
/*****************the main container to hold everything**********/
.container{
position:relative;
width:960px;
margin:0 auto 15px auto; /*sets the gap at the top and bottom, and centers the page */
background-color:#ffffff;
}


/***********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;
}



/*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:210px; 
background-image:url(../image-files/full-width-footer-bg.jpg);
background-position:top center;
background-repeat: repeat-x;
background-attachment:scroll;
}

.footerbox1{
height:180px;
width:22%;
float:left;
padding:10px 10px 10px 30px;
line-height:20px;
background-image:url();
margin-bottom:5px;
}
.footerbox4{
height:150px;
width:21%;
float:right;
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;
}

.sub-footer {
text-align:center;
}
.sub-footer a:link{color:#000099;}
.sub-footer a:visited{color:#8D006A;}
.sub-footer a:hover{color:#BF4700;}






/* 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:670px;
float:left;
background-color: #c2d2ba;
}
.inner650{/*this is the inner liner for wider of the two column layout */
width:650px;
margin:10px auto;
}
.inner650 h2, .inner650 h3, .inner650 h4{
color:#990000;
}



/* 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:transparent;
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 transparent;
}

.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:transparent;
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:290px;
float:left;
background-color: #c6b5c0;
}
.inner270{/*this is the inner liner for the narrower side of the two column layout */
width:270px;
margin:10px auto;
}
.inner270 h2, .inner270 h3{
color:red;
}








/*******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:#fff;
position:relative;
left:200px;
}


.inner740{/* this is the inner for the shell-right760 */
width:740px;
margin: 0 auto;
text-align:left;
color:#000;
}
.inner740 h2, .inner740 h3 {
color:#000;
}
.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;
}




/******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{
font-size: 95%;
color: #000;
width:280px;
float:left;
background-image:url(../image-files/widget-header.jpg);
background-repeat:repeat-x;
font-family: arial, san-serif;
background-color:#f7f7f7;
margin:20px 40px;
border:1px solid #9f9f9f;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
}


.sub-inner270{
width:260px;
margin:8px auto 0 auto;
color:#000;
}
.sub-inner270 h2, .sub-inner270 h3 {
color:#ffffff;
font-weight:normal;
margin-bottom: 5px;
}

/*SUB MODULES FOR THE CENTER 560PX COLUMN THREE OF THESE SIT SIDE BY SIDE */
.sub-shell170{
font-size: 95%;
color: #000;
width:165px;
float:left;
background-image:url(../image-files/widget-header.jpg);
background-repeat:repeat-x;
font-family: arial, san-serif;
background-color:#f7f7f7;
margin:20px 0 20px 25px;
border:1px solid #9f9f9f;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
}


.sub-inner160{
width:155px;
margin:8px auto 0 auto;
color:#000;
text-align:center;
}
.sub-inner160 h2, .sub-inner160 h3 {
color:#ffffff;
font-weight:normal;
margin-bottom: 5px;
}

.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: 12px 0 0 0;
float:left;
background-color:#ffffff;
position:relative;
left:-580px;
}

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

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


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

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


/*SUB MODULES FOR THE CENTER 600PX COLUMN TWO OF THESE SIT SIDE BY SIDE */
.sub-shell300{
width:290px;
float:left;
background-color:white;
margin:20px auto;
}
.inner280{
width:270px;
margin:0 auto;
}
.inner280 h2, .inner280 h3 {
color:#666666;
}


.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:12px auto 0 auto;
float:right;
background-color:#fff;
text-align:center;
}

.shell180-right3col .inner170 {
width:170px;
margin: 0 5px;
}

.shell180-right3col .inner170 h4 {
margin-top: 30px;
}






/******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:#000;
}








.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:#fff;
}








/*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:#f7f7f7;
}
.inner310a{
width:310px;
margin:0 auto;
border:1px solid #000000;
padding:2px;
}
.inner310a h3, .inner310a h4{
color:#000;
}


/*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;
margin:10px auto;
}


/*These are for the four equal width footer boxes */
.shell240-1{
width:225px;
min-height:170px;
max-height:170px;
float:left;
color:#000;
background-color:#f7f7f7;
margin:15px 17px 20px 0;
border:1px solid #9f9f9f;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
}

.shell240-4{
width:225px;
min-height:170px;
max-height:170px;
float:left;
color:#000;
background-color:#f7f7f7;
margin:15px 0px 20px 0;
border:1px solid #9f9f9f;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
}

.inner220{
width:210px;
margin:10px auto;
}
.inner220 h2, .inner220 h3, .inner220 h4{
color:#000;
margin-bottom: -4px;
font-size:120%;
}

.inner220 p{
font-size: 90%;
padding:0;
}

.inner220 ul{
list-style-type: none;
text-align:left;
}

.inner220 li{
margin-top: 8px;
margin-left:-30px;
font-size: 90%;
}

.inner220 a:link{
color:#B3001F;
text-decoration:none;
}
.inner220 a:visited{
color:#B3001F;
}
.inner220 a:hover{
color:#BF4700;
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:transparent;
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 FLYOUT NAV *****************/

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


#nav h3{
margin:0;
padding:10px 0 10px 10px;
text-align:left;
color:#fff;
font-size:16px;
background-image: url(../image-files/left-nav-heading-bg.jpg);
background-position: left;
background-repeat: no-repeat;
background-color:#b3001f;
position: relative;
left:0px;
}



/* 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; 
width:180px; 
font-size:14px; 
font-weight:bold; 
color:#000; 
height:40px; 
line-height:40px; 
text-decoration:none; 
text-indent:10px;
text-align:left;
}



/* Set up the sub level borders */

#pmenu li ul li a, #pmenu li ul li a:visited {
border-left: 1px solid #000;
font-size: 10px;
width:191px;
text-indent:5px;
height:24px;
line-height:24px;
}

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



/* Set up the list items */

#pmenu li {
float:left; 
background: #fff;
background-image: url(../image-files/left-nav-bg.jpg);
z-index:200;
}





#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/left-nav-hover-bg.jpg); 
color:#fff;
}/*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 { /*this color, styling and positioning of third level*/
display:block; 
position:absolute; 
top:33px; 
left:10px; 
height:24px; 
line-height:24px; 
text-decoration:none; 
text-align:left;
width:191px;
}

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

#pmenu > li:hover > ul {
left:10px; 
top:33px;
}



/* 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:#fff;
}



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

#pmenu li a:active, #pmenu li a:focus {
background-color:none; 
color:#e6e6e6;
}

/* 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:40px; 
left:10px; 
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:10px; 
top:40px; 
lef\t:-11px; to\p:-41px;

}



/* 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:40px; 
left:10px;

}

/* 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;

}

/* Highlighted T2 link when on the same child T3 page */
#pmenu li.samepagelink>a
{
	color:#fff;
	background-color:#000;
}

/* Highlighted T3 link when on the same page */
#pmenu li.samepagelink li.samepagelink a:first-child
{
	color:#fff;
	background-color: #6B6B6B;
}


#rss {
width:178px;
min-height:178px;
max-height:178px;
float:left;
background-color:#f7f7f7;
margin:30px 0 20px 0;
border:1px solid #9f9f9f;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
}

#rss-liner {
width: 158px;
margin: 10px auto;
font-size: 12px;
color:#000;
text-align:center;
}

#rss-liner ul{
list-style:none;
text-align:left;
}

#rss-liner li img{
margin-left:-9px;
padding-top: 5px;
}

#subscribebox{
width:178px;
float:left;
background-color:#f7f7f7;
margin:0 0 20px 0;
border:1px solid #9f9f9f;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
}

#subscribebox-liner {
width: 158px;
margin: 10px auto;
font-size: 80%;
color:#000;
text-align:center;
}

#subscribebox h3 {
color: #b3001f;
margin-top:0;
}

.colbox{
width:178px;
float:left;
background-color:#f7f7f7;
margin:20px 0 20px 0;
border:1px solid #9f9f9f;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
}

.colbox-liner {
width: 158px;
margin: 10px auto;
font-size: 80%;
color:#000;
text-align:center;
}

.colbox h3 {
color: #b3001f;
margin-top:0;
}

.mobile-only {
display: none;
}


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


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

	html, body {
		font-size: 90%;
		background: #ffffff;
		padding: 2px;
		color: #000000;
		margin: 0;
		}
		
		/*h1, h2, h3, h4, h5, h6 {
		font-weight: normal;
		}*/
		
	
		
		.desktop-only{
		display:none;
		}
							
		
		.fullwidth-footer, .sub-footer {
		background-image: none;
		float:none;
		width:100%;
		height:100%;
		clear:both;
		}
				
	.header-mobile{
	display:block;
	width:100%;
	height:63px;	
	margin:0;
	background-image: url(../image-files/mobile-header.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	}	
	
	.mobile-links{
	display:inline;
	}
	.mobile-footer-links{
	display:inline;
	clear:both;
	}
	
	#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;
margin:20px auto;
float:none;
}

.sub-shell170{
width:170px;
margin:20px auto;
float:none;
}

.shell180-right3col{
width:180px;
margin:20px auto;
float:none;
background-color:#ffffff;
position:relative;
}

.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, .shell200-right3col, .shell200-center3col, 
	.shell200-right3col, .shell192a, .shell180-left3col, .shell160, .print-area {
	
	float:none;
	display:block;	
	width:100%;
	margin:10px auto;
	padding:0;
	background-color:#ffffff;
	clear:both;
	}
	
	.inner740, .inner650, .inner580, .inner540, .inner495a, .inner495b, .inner460, .inner450, .inner405a, .inner405b, 
	.inner300, .inner310a, .inner280, .inner270, .inner265,
	.inner220a, .inner190, .inner180, .inner180a, .inner170, .inner150{
	width:95%;
	padding: 0 5px;
	background-color:#ffffff;
	} 
	
	.sub-shell380,  .sub-shell325, .sub-shell300, .sub-shell250, .sub-shell245, .sub-shell215, .sub-shell215{
	display:block;
	width:80%;
	margin:20px auto;
	padding:0;
	background-color:#ffffff;
	clear:both;
	float:none;
	}
	
	.sub-inner360, .sub-inner300, sub-inner240, .sub-inner235, .sub-inner205{
	width:95%;
	padding: 0 5px;
	background-color:#ffffff;
	}
	
	.sub-inner270 {
	width:95%;
	padding: 0 5px;
	}
	
	.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;
	}
	
	
	.shellfooter{
	max-width:320px;
	margin:10px auto;
	}
		
	.shell240-1, .shell240-4{
	display:block;
	float:none;
	width:225px;
	max-height:225px;
	margin:20px auto;
	}
	
	
	.theme-default #slider {
    margin:20px auto 0 auto;
    width:380px; /* Make sure your images are the same size */
    height:180px; /* Make sure your images are the same size */
  }
  
div.formblock, div.formblock2 {
width: 100%;
padding:2px;
background-color:#fff;
margin:30px 0 30px -10px;
border:transparent;
-webkit-border-radius:none;
-moz-border-radius: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

.calloutbox, .calloutbox-y {
display: block;
float:none;
width: 225px;
margin: 20px auto;
}


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

}