/***********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:#325570;
background-position:top center;
background-repeat: repeat-x;
background-attachment:fixed;
font-family: arial, verdana, sans-serif;
font-size: 85%;
color:#333333;
}

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


.mobile-links{
display:none;
}
.mobile-footer-links{
display:none;
}

 
/*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:-20px;
text-align:left;
}
.pagetop-text h1{
font-size:90%;
font-weight:bold;
color:#003470;
text-decoration:none;
text-align:left;
margin-bottom:-20px;
margin-top:0px;
float:left;
padding-left:5px;
}

.pagetop-text p{
font-size:90%;
font-weight:normal;
color:#003470;
text-decoration:none;
padding-right:50px;
float:right;
margin-top:0px;
}

.toplinks{ /* these are the links along the top right of the header */
float:right; 
position:relative; 
top:10px; 
margin-right:20px; 
clear:both;
font-weight:bold;
}
.toplinks a:link {
color: #003448; 
text-decoration: underline;
}
.toplinks a:visited {
color: #003470; 
text-decoration: underline;
}
.toplinks a:hover {
color: #FF7400;
text-decoration: underline;
}

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


p.blue{
color:#000099;
font-family:arial, san-serif;
font-size:110%;
}

p.bluebold{
color:#000066;
font-family:arial, san-serif;
font-size:110%;
font-weight: bold;
}

p.bluelight{
color:#0066ff;
font-family:arial, san-serif;
font-size:20px;
}

p.bluelarge{
color:#0066ff;
font-family:arial, san-serif;
font-size: x-large;
font-weight:normal;
}

p.bluelarge2{
color:#000066;
font-family:arial, san-serif;
font-size: x-large;
font-weight:normal;
}

p.burg{
color:#660066;
font-family:arial, san-serif;
}

p.burgbold{
color:#990099;
font-family:arial, san-serif;
font-size: x-large;
font-weight:normal;
}

.bluemid{
color:#0066ff;
font-family:arial, san-serif;
font-size:20px;
}

.blueyellow{
color:#0066ff;
font-family:arial, san-serif;
font-size:20px;
background-color: #FFFF00;
}

p.small{
color:#0000A0;
font-family:arial, san-serif;
font-size:70%;
}

div.line {
background-color: #ff7400;
width: 200px;
height: 2px;
margin: 5px auto 10px auto;
}

div.line2 {
background-color: #006699;
width: 80%;
height: 2px;
margin: 5px auto 10px auto;
}

div.line3 {
background-color: #59025c;
width: 960px;
height: 10px;
margin: auto;
padding:0;
}


/********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.clear5{clear:both;height:5px;}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:#59025c;
margin:5px auto;
padding:0;
background:transparent;
}


/********set global headings*************/
h1 { font-family: arial, verdana, sans-serif; font-size: 140%;  color: #59025c; text-align:center; margin-top: 5px;}
h2 { font-family: arial, verdana, sans-serif; font-size: 126%;  color: #59025c; text-align:center;}
h3 { font-family: arial, verdana, sans-serif; font-size: 116%;  color: #006699; text-align:center;}
h4 { font-family: arial, verdana, sans-serif; font-size: 116%;  color: #006699; text-align:center;}
h5 { font-family: arial, verdana, sans-serif; font-size: 116%;  color: #006699; text-align:left;}
b { font-family: arial, verdana, sans-serif; font-size: 103%;  color: #59025c;}
strong { font-family: arial, verdana, sans-serif; font-size: 103%;  color: #5F5F5F;}



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

a:link {
color: #003399; 
text-decoration: underline;
}
a:visited {
color: purple;
text-decoration: underline;
}
a:hover {
color: #ff7400;
text-decoration: underline;
}
a:link img { /*this gets rid of the blue border around any image that is used as a link*/
border: 0;
}

a:visited img { /*this gets rid of the blue border around any image that is used as a link*/
border: 0;
}

/*--  Styling links   --*/ 
.class1 a:link {text-decoration: none;  color: #330033;}


/*--  Styling blog --*/ 
.blogItItem {
margin:18px 0;
padding:0 12px;
border:1px solid #6694ba;
box-shadow:10px 10px 6px #eff7ff;
border-radius:6px;
}

.outlink{
background-image: url(../image-files/linkout.png);
background-position:right;
background-repeat: no-repeat;
padding: 0 13px 0 0;
}

.pin{
}

.pin ul {
   list-style-type: none;
   padding-left: 20px;
   margin-left: 20px;
  }


.pin li {
  list-style-image: none;
   background-image: url(../image-files/purdot.png);
   background-repeat: no-repeat;
   background-position: left center;
   padding-left: 30px;
   margin-left: 30px;
   margin-bottom: 10px;
   }

.pin1{
}

.pin1 ul {
   list-style-type: none;
   padding-left: 20px;
   margin-left: 20px;
  }


.pin1 li {
  list-style-image: none;
   background-image: url(../image-files/bullet.gif);
   background-repeat: no-repeat;
   background-position: left center;
   padding-left: 30px;
   margin-left: 30px;
   margin-bottom: 10px;
   }


.pin2{
}

.pin2 ul {
   list-style-type: none;
   padding-left: 20px;
   margin-left: 20px;
  }


.pin2 li {
  list-style-image: none;
   background-image: url(../image-files/stargold.gif);
   background-repeat: no-repeat;
   background-position: left center;
   padding-left: 30px;
   margin-left: 30px;
   margin-bottom: 10px;
   }
   
.pin3{
}

.pin3 ul {
   list-style-type: none;
   padding-left: 10px;
   margin-left: 20px;
  }


.pin3 li {
  list-style-image: none;
   background-image: url(../image-files/redckbox.gif);
   background-repeat: no-repeat;
   background-position: left center;
   padding-left: 40px;
   margin-left: 30px;
   margin-bottom: 20px;
   }

.number ol {
list-style-type:decimal;
list-style-position: outside;
font-size:13pt;

  }

.number li {

   background-position: left center;
   padding-left: 30px;
   margin-left: 30px;
   margin-bottom: 10px;
   }


/*--  Spacing between lists   --*/       

ul.list li, ol.list li {
   padding-left: 20px;
   margin-left: 20px;
padding-bottom: 0.9em;
}

/*--  very light blue bg stripe  --*/  
.hbg{
font-family: 'Arial, MS Sans Serif4', Geneva, sans-serif;
background-color: #eff7ff;  
color:#660066;
width: 100%;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
padding: 2px;
font-weight: bold;
}


/*--  Blue line above burg header centered   --*/   
.dhbg{
font-family: 'Arial, MS Sans Serif4', Geneva, sans-serif;
color:#660066;
width: 80%;
border-top: 2px solid #006699;
border-right: 0;
border-bottom: 0;
border-left: 0;
padding: 20px 0px 0px 0px;
}

.ehbg{
font-family: 'Arial, MS Sans Serif4', Geneva, sans-serif;
color:#003448;
width: 90%;
border-top: 2px solid #ff7400;
border-right: 0;
border-bottom: 0; 
border-left: 0;
padding: 6px;
}

/*--  Sk Book sales page headline   --*/ 
.fhbg{
font-family: 'Arial, MS Sans Serif4', Geneva, sans-serif;
font-size: x-large;
font-weight:normal;
color:#990099;
}

.right{/*for adding some padding and a float to an image */
float:right;
padding:0 0 5px 5px;
margin: 5px 10px 5px 5px;
text-align: center;
}

.rightborder{/*for adding some padding and a float to an image */
float:right;
background-color:transparent; 
margin:10px;
border:0px solid;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 4px 4px 4px 4px #cccccc; 
box-shadow: 4px 4px 4px 4px #cccccc;
padding:0px;
}

.caption-right {
float:right;
background-color:transparent;
margin: 5px 10px 5px 5px;
padding: 3px;
font: 11px;
text-align:center;
border: 1px solid #ccc;
}

.caption-left {
float:left;
background-color:transparent;
margin: 5px 10px 5px 5px;
padding: 3px;
font: 11px;
text-align:center;
border: 1px solid #ccc;
}

.left{/*for adding some padding and a float to an image */
float:left;
padding:5px 10px 10px 5px;
text-align: center;
}

.leftborder{/*for adding some padding and a float to an image */
float:left;
background-color:transparent; 
margin:10px;
border:0px solid;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 4px 4px 4px 4px #cccccc; 
box-shadow: 4px 4px 4px 4px #cccccc;
padding:0px;
}

.centerborder{/*for adding some padding and a float to an image */
margin:10px auto;
display:table;
white-space:nowrap;
background-color: transparent;
    border: 0 solid;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 4px 4px 4px 4px #CCCCCC;
    padding: 0;
}


.itemright {
float: right;
margin: 2px 0 12px 18px;
text-align: center;
}

.itemright2 {
float: right;
margin: 2px 40px 12px 18px;
text-align: center;
}

.itemcenter {
margin: 2px auto 12px auto;
text-align: center;
clear: both;
}

.itemleft {
float: left;
margin: 2px 18px 12px 0;
text-align: center;
}




.t3 {
	background-color: #FFFBF4;
	width: 80%;
	border: 1px solid #C9A798;
	margin: 15px 25px 15px 15px;
	float: right;
}


hr{
width:70%;
margin:10px auto;
color:#ff7400;
}

.print-area{
width:500px; 
margin:0 auto; 
border:1px solid #666666; 
padding:10px; 
background-color:#ffffff;
}

#crumb{
font-size: 80%; 
margin-top: 20px;
margin-bottom: 10px;
height: 20px;
line-height: 20px;
color:#858585;
}

#crumb a:link{ 
color:#858585;
}
#crumb a:visited{ 
color:#006699;
}
#crumb a:hover{ 
color:#ff7400;
background:none
} 








/*****************the main container to hold everything**********/
.container{
position:relative;
width:960px;
margin:5px auto 5px 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 ****/
}


div.full-width-box {  /* thin dusk blue line around the lightblue box */
   background-color: #EFF7FF;  
	margin: 15px 0px 10px 0px;
	padding: 10px;
   border: 1px solid #ACD1E9;
}


div.full-width-box1 {  /* thin beige around the cream box */
   background-color: #fffcf7;  
	margin: 15px 0px 10px 0px;
	padding: 10px;
   border: 1px solid #B7AFA3;
}



div.full-width-box2 {  /* thin gray border around landscape image 400x178 */
width:80%;
background-image: url(../image-files/bgimage.jpg);
background-repeat:repeat-x;
background-color:transparent; 
margin: 15px 0px 10px 0px;
border:1px solid #94b1c4;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 2px 4px 4px 1px #cccccc; 
box-shadow: 2px 4px 4px 1px #cccccc;
padding: 10px;
border: 1px solid #003478;
}

div.ezine-box {   /* thin gray border around landscape image 610x272 */
   background-color: #ffffff;
   background-image: url('../image-files/bgimage-inner300.jpg');
   background-repeat: no-repeat;
   width:610px;
   margin: auto;
	 padding: 0;
   border: 1px solid #94b1c4;
}

div.half-width-box {  /* light blue bg, blue border */
width:65%;
margin:0 auto;
border:1px solid #ACD1E9;
background-color: #EFF7FF;
padding:10px;
}

div.half-width-box2 {  /* beige bg, blue border */
width:75%;
border:1px solid #B7AFA3;
background-color: #ffffcc; 
padding:10px;
margin:0 auto;
}

div.half-width-box3 {  /* white bg, grey border */
width:75%;
margin:0 auto;
border:1px solid #CCCCCC;
background-color: #FFFFFF;
padding:10px;
}

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

/* section for page width */
.inner920{/* images with border */
width:920px;
margin: 0 auto;
text-align:left;
color:#333333;
}
.inner920 h2, .inner920 h3 {
color:#660066;
text-align:left;
}
.inner920 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 */
-webkit-box-shadow: 1px 2px 5px 1px #4a4a4a;
    -moz-box-shadow: 1px 2px 5px 1px #4a4a4a;
    box-shadow: 1px 2px 5px 1px #4a4a4a;
margin-bottom:5px;
}






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

.shell465{
width:465px;
float:left;
margin:0 0 0 9px;
background-color: #fffcf7; /* cream with darker beige border */
border:1px solid #87827b; /****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{ /* sitemap columns*/
width:450px;
margin:0 auto;
} /* this is the inner liner for the above shell */

.inner450 h2, .inner450 h3{
color:#660066;
}


.inner450y{ /* height set for free video lessons*/
width:420px;
height:300px;
margin:0 auto;
} /* this is the inner liner for the above shell */

.inner450y h2, .inner450 h3{
color:#660066;
}




/**********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: #fffcf7; /* cream with darker beige border, dont change on dwg lessons */
border:1px solid #87827b; /****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:#59025c;
}
  
.shell425a{
width: 425px;
margin-right:9px;
float:right;
background-color: #fffcf7; /* cream with darker beige border, dont change on dwg lessons */
border:1px solid #87827b; /****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:#59025c; 
}






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

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

.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: #ffffff;
}
.inner650{/*this is the inner liner for wider of the two column layout */
width:640px;
margin:10px auto;
}
.inner650 h2{
color:#59025c;
}

.inner650 h3, .inner650 h4{
color:#006699;
}


/* 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 Used in drwg pencil sks good for 2 pics*/
.sub-shell325{
width:325px;
float:left;
background-image:url();
font-family: arial, verdana, san-serif;
color:#330033;
background-color:#ffffff;
margin:10px 0 10px 5px;
padding-top:5px;
border:1px solid #666666;
}

/* sub325a Used in drwg pencil sks good for 2 pics*/
.sub-shell325a{
width:310px;
float:left;
font-family: arial, verdana, san-serif;
color:#330033;
background-color:#ffffff;
margin:0px;
padding-top:5px;
border:1px transparent;
}


.sub-inner300{/* inner liner for the above shell*/
width:300px;
margin:10px auto;
border:1px transparent;
}

.sub-inner300a{/* inner liner for 300a shell325*/
width:300px;
background-color:transparent; 
margin:0 auto;
border:1px solid #94b1c4;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 2px 4px 4px 1px #cccccc; 
box-shadow: 2px 4px 4px 1px #cccccc;
padding:5px;
}



.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-inner300bg{/* inner liner for the above shell has a bg image*/
width:300px;
background-color: #ffffff;
background-image: url(../image-files/shellbox-bg.jpg);
background-repeat: no-repeat;
margin-right: 5px;
margin-left: 5px;
padding: 2px;
}

.sub-inner300 h3, .sub-inner300 h4{/*set the headline color for the inner */
color:#660066;
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, verdana, 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:#003478;
}


/*TRIPLE BOXES TO GO INSIDE THE SHELL670 no margins or color*/
.sub-shell215y{
width:215px;
float:left;
font-family: 'comic sans ms', san-serif;
font-size:120%;
color:#330033;
background-color:#ffffff;
margin:1px 0 10px 5px;
padding-top:1px;
border:1px solid #ffffff;
}

.sub-inner205y{
width:205px;
margin:0px auto;
}
.sub-inner205y h3, .sub-inner205-a h4{
color:#006699;
}




.shell290{/*this is the narrower side of the two column layout */
width:290px;
float:left;
background-color:#ffffff;
}
.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:#660066;
}


.inner270a{/*this is for narrow right side of the two column layout */
width:240px;
background-image: url(../image-files/blue2.jpg);
background-color:transparent; 
margin:0 auto;
border:1px solid #94b1c4;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 2px 4px 4px 1px #cccccc; 
box-shadow: 2px 4px 4px 1px #cccccc;
padding:5px;
}


.inner270b{/*newsletter cream bg 2 col layout */
width:240px;
background-color: #FFFFE0;
margin:0 auto;
border:1px solid #94b1c4;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 2px 4px 4px 1px #cccccc; 
box-shadow: 2px 4px 4px 1px #cccccc;
padding:5px;
}


.inner270c{/*this is for narrow side of the two column layout */
width:240px;
background-color:transparent; 
text-align:center;
margin:0 auto;
border:1px solid #94b1c4;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 2px 4px 4px 1px #cccccc; 
box-shadow: 2px 4px 4px 1px #cccccc;
padding:5px;
}

.inner270c 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 */
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
margin-bottom:5px;
}

.inner270d{/*newsletter cream bg 2 col layout */
width:240px;
color: #003478;
margin:0 auto;
border:1px solid #94b1c4;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 2px 4px 4px 1px #cccccc; 
box-shadow: 2px 4px 4px 1px #cccccc;
padding:5px;
}


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


.inner740{/* this is the inner for the shell-right760 */
width:700px;
margin: 0 auto;
text-align:left;
color:#333333;
}
.inner740 h2 {
color:#59025c;
}

.inner740 h3{
color:#006699;
}

.inner740 h4{
color:#006699;
}

/* sub-shell380 used in bw dwgs */
.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:#006699;
background-color:#ffffff;
}
.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:#ffffff;
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:260px;
float:left;
border:1px solid #94b1c4; /* light grey */
margin:10px 0 10px 15px;
background-co80plor:#FFFAF3;
}
.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:white;
}










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


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

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


/*SUB MODULES FOR THE CENTER 600PX COLUMN TWO OF THESE SIT SIDE BY SIDE */
.sub-shell300{
width:300px;
float:left;
background-color:white;
}
.inner280{
width:280px;
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:0 auto;
float:right;
background-color:#F4F4F4;
}










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

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

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








/*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: arial, verdana, sans-serif;
color:#333333; /* dark grey text */
background-color:#ffffff;
}
/*Three fixed height boxes used on Home*/
.inner310a{
height:250px;
width:280px;
margin:0 auto;
border:1px solid #94b1c4; /* light grey */
background-color: #EFF7FF; /* light blue */
padding:10px;
}
.inner310a h3, .inner310a h4{
color:#006699;
}


/*used as navigation pen sks no height*/
.inner310b{
width:280px;
margin:0 auto;

background-color: #FFFFFF; /* white */
padding:10px;
}
.inner310a h3, .inner310a h4{
color:#006699;
}

/*FOUR EQUAL WIDTH PRODUCT BOXES*/
.shell240a{
width:240px;
float:left;
background-color:#ffffff; 
}
.inner220a{ /* white bg - navbars */
width:230px;
margin:0 auto;
}

}
.inner220a h3, .inner220a h4 {
color:#660066;
}

.inner220b{ /* white bg - sketchy news */
border:1px solid #94b1c4; /* light blue grey */
width:230px;
height:125px;
margin:0 auto;


}
.inner220b h3, .inner220b h4 {
color:#660066;
}




/* FIVE EQUAL WIDTH PRODUCT BOXES */
.shell192a{
width:192px;
float:left;
margin:0;
background-color:#F1F3F5; /* light grey */
padding-bottom:5px;
font-size: 85%;
}
.inner180a{
width:182px;
height:175px;
margin:0 auto;
}

.inner180a 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;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
margin-bottom:8px;
margin-top:10px;
}


/*SIX EQUAL WIDTH PRODUCT BOXES */
.shell160{
width:160px;
float:left;
margin:0;
background-color:#F1F3F5; /* light grey */
font-family: verdana, san-serif;
color:#59025c;
text-align:center;
padding-bottom:5px;
font-size: 85%;
}
.inner150{
width:150px;
margin:0 auto;
}
.inner150 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;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
margin-bottom:8px;
margin-top:10px;
}










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

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


/*These are for the four equal width footer boxes */
.shell240{
width:240px;
float:left;
color:#333333;
background-color:#777777;
}
.inner220{
width:220px;
margin:10px auto;
}
.inner220 h2, h3{
color:#006699;
}
.inner220 ul{
list-style-type: none;
}
.inner220 a:link{
color:#ffffff;
text-decoration:none;
}
.inner220 a:visited{
color:#ffffff;
}
.inner220 a:hover{
color:black;
text-decoration:none;
}



/*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:#006699;
}
.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;
float:left;
}
.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, verdana, 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, verdana, sans-serif;
background-color: #F4F4F4;
font-weight: bold;
font-size:100%;
}

.left-nav h3{
text-align:left;
color:#59025c;
font-size:120%;
margin-bottom:15px;
text-decoration:underline;
position:relative;
left:15px;
}


.left-nav {
width: 100%;
font-family:  Arial, verdana, sans-serif;
background-color: #F4F4F4;
font-weight: bold;
font-size:100%;
}

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

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

.left-nav a:hover {
color: #ff7400;
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:30px; 
position:absolute; 
top:161px;
background-color:#59025C;
}


#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-family: Arial, verdana, sans-serif;
font-size:16px; 
font-weight:normal; 
color:#ffffff; 
height:25px; 
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: transparent;
}





#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(); 
color:#ff7400;
}/*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:#cc0000;
}

/* 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: 90%;
		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:61px;	
	margin:0;
	background-image: url(../image-files/mobile-head.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%;
	}

.videowrap{position:relative;padding-bottom:56.25%;padding-top:25px;height:0; }
.video iframe{position:absolute;top:0;left:0;width:100%;height: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;
	}
	
	.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-shell280, .sub-shell250, .sub-shell245, .sub-shell215, .sub-shell215{
	display:block;
	width:80%;
	margin:5px auto;
	padding:0;
	background-color:#ffffff;
	clear:both;
	}
	
	.sub-inner360, .sub-inner300, sub-inner240, .sub-inner235, .sub-inner205{
	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;
	}
	


	 img{

  max-width: 100% ;
  height: auto ;
	 }
	
	
	
	 	

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

}