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



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

ul {
 list-style: disc;
 list-style-position:inside;
 }

body{
margin:auto;
padding:0;
font-family: Arial, san-serif;
font-size: 100%;
color:#333333;
}





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




.nav-up {
    top: -80px !important;
}

#mob-nav{
    padding: .5em 0;
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    z-index: 1000;
    -webkit-transition: top 0.2s ease-in-out;
    -moz-transition: top 0.2s ease-in-out;
    -ms-transition: top 0.2s ease-in-out;
    -o-transition: top 0.2s ease-in-out;
    transition: top 0.2s ease-in-out;
}



.bars{
  list-style: none;
  margin: .5em .5em 0 0;
  padding: 0;
  position: relative;
  left: 0;
  cursor: pointer;
  float: left;

}
.bars a{
  text-decoration: none !important;
}
.bars li{
  margin-bottom: 5px;
  height: 5px ; 
  width:30px ;
  background: #23d2e0;
}



 #search-top{
  float: right;
  margin: .5em !important;
 } 


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.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, sans-serif ;
margin:5px auto;
margin-top:5px;   /*** Fernand: THIS SETS THE SPACE ABOVE THE HEADINGS  ***/
padding:5px;     /*** Fernand: THIS SETS THE SPACE ABOVE AND BELOW THE HEADINGS  ***/
background:transparent;
}

/********set global headings*************/
h1{font-size:205%; text-align:left; margin-top:25px; }
h2{font-size:170%; text-align:left; margin-top:2.0em;}
h3{font-size:150%; text-align:left;margin-top:1.8em;}
h4{font-size:140%; text-align:left;}



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

a:link {
color: #003399; 
text-decoration: none;
}
a:visited {
color: #8000ff;
text-decoration: none;
}
a:hover {
color: #666666;
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;
}

p {line-height:145%}

p.center{  
  text-align: center; }



p.center-table{   
  text-align: center;
  margin: 0px;
  padding: 0px;
  }


.rightlinks p{    
  margin: 0.65em 0em 0em 0em ;
  padding: 0em 0em 0em 0em ;
  font-size: 105% ;
  line-height:110%;
  }


.category-list p{    
  margin: 0.3em 0em 0em 0em ;
  padding: 0em 0em 0em 0.6em ;
  font-size: 100% ;
  }



.footerlinks p{    
  margin: 0.0em 0em 0em 0em ;
  padding: 0.25em 0em 0em 1.0em ;
  font-size: 105% ;
  }



.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:10px 10px 15px 0;
}


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

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



.leftbord{/*for adding some padding and a float to an image----and a border...Fernand */
float:left;
border: 1px solid #c0c0c0 ;
padding:0px 5px 5px 5px;
margin: 5px;
}


.bord{/*for adding some padding and a float to an image----and a border...Fernand */
border: 1px solid #c0c0c0 ;
}

.back {z-index: -100}



hr{
width:100%;
margin:2em 0 2em 0;
color:#9900cc;
color: #f00;
background-color: #80bfff;
height: 1px;
}

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


/*--  SPACING FOR LISTS        By Sue Huckles  --*/

ul.listpadding li, ol.listpadding li {
    list-style-position:outside;
    line-height: 1.65em;
padding-bottom: 1.0em;
}



ul.listpadding2 li, ol.listpadding3 li {
    list-style-position:inside;
padding-bottom: 0.4em;
}


ul.listpadding3 li, ol.listpadding3 li {
    list-style-position:outside;
padding-bottom: 1.2em;

}


/*-------------- BlockQuote boxes --------------*/
blockquote{
    background: #fffff4;	
    padding: 15px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-width: 2px;
    border-color: #d1d1d1;
    border-radius: 5px;
    box-shadow:
        inset 0 2px 0 #cfcf9e,
        -3px -3px 3px rgba(88, 88, 88, 0.3);
    line-height: 23px;
   font-size: 1.05em;
font-style: italic;
	width: 80%;
    margin: 40px auto;
    padding: 25px;
        position: relative;
}

blockquote span.quote {
background: url(../image-files/bg-blockquote-3.png) no-repeat;  
        display: block;  
        float: left;  
        width: 58px;  
        height: 40px;  
    }


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


/***********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:#ffffff ;   /** THIS IS THE COLOR BEHIND THE MODULES.. FAF0E6...FEO  */
}



/*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;
/*    height: 650px;   fixes the height of the boxes*/
float:left;
margin:0 0 0 9px;
background-color: #ffffff;  
border:1px solid transparent ; /****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:#644436;
}
*/




/**********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: #ffffff;
border:1px solid #ffffff; /****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: #8F6048;
}
*/
  
.shell425a{
width: 425px;
margin-right:9px;
float:right;
background-color: #ffffff;
border:1px solid #ffffff; /****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:#8F6048; 
}
*/





/**********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: black; 
}
*/
  
.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:#8F6048;
}
*/

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

p.just {text-align: justify}





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


/*   This could be used to set color
.inner650 h2, .inner650 h3, .inner650 h4{
color:#000000 ;
}
*/



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

/**  For 2 column footer Fernand */
.sub-shell325f{
width:325px;
height: 175px;
float:left;
font-family: arial, san-serif;
color:#330033;
background-color:#eeeeee;
margin:10px 0 10px 0px;
padding-top:5px;
border-top: 3px solid #808080
}


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

.sub-inner300f{
width:300px;
height:400px;
margin:10px auto;
}



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







.shell290{/*this is the narrower side of the two column layout */
width:285px;
float:left;
border-left: 0px solid #c0c0c0;
}


.inner270{/*this is the inner liner for the narrower side of the two column layout */
width:270px;
margin:10px auto;
color:black ;
/*  border:1px solid #c0c0c0;    */
}



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


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

}



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


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


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










/******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:#ffffff;
}
.inner310a{
width:285px;
/* height: 640px;   sets the height of the box */
margin:0 auto;
border:1px solid transparent;
padding:5px;
}

/*
.inner310a h3, .inner310a h4{
color:#644436;
}
*/


    

/*THREE EQUAL WIDTH PRODUCT BOXES----for FOOTER     by Fernand*/

.shell320af{/*these sit side by side, in a fullwidth shell960. */
width:320px;
float:left;
/*  font-family: 'comic sans ms', san-serif;   **/
color:#333333; 
background-color:#f5f5f5; 
border-top: 3px solid #808080;
}

.inner310af{
width:310px;
height: 225px;  /* sets the height of the box */
margin:0 auto;
border:1px solid transparent;
padding:2px;
}
.inner310af h3, .inner310af h4, .inner310af h2{
color:#333333;
}


.inner310af a:link{
color:#blue;
text-decoration:none;
}
.inner310af a:visited{
color:#purple;
}
.inner310af a:hover{
color:#535353;
text-decoration:underline;
}






/*END  THREE EQUAL WIDTH PRODUCT BOXES----for FOOTER*/








/*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:20px;
background-image: url(../image-files/footer-bg.jpg);
background-repeat:repeat-x;  */
background-color:#ff8040;
}


/*These are for the four equal width footer boxes 
.shell240{
width:240px;
float:left;
color:#ffffff;
background-color:#777777;
}
.inner220{
width:220px;
margin:10px auto;
}
.inner220 h2, h3{
color:white;
}
.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: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 TOP DROP NAV *****************/


/**** Adjust top:300px; to move the vertical location of thr horizontal 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:32px; 
position:absolute; 
top:92px;      /* ********************HEADER  *******************THIS POSITIONS THE TOP NAV   */
background-color: transparent;
}



/* Sue Huckle adviced to keep the following  */
#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:160px;   /**width:120px; **/
font-size:11px; 
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-color: #0066CC;   /* THIS IS FOR THE COLOUR OF THE DROP DOWN MENU  */
}





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


/*--   the following added by Fernand to Turn Off Vertical Social for Narrow Tablets  */
@media screen and (max-width: 1178px) 
{
.tablet-hide{
display:none;
}
}
/*--   End added by Fernand to Turn Off Vertical Social for Narrow Tablets  */


/*--   Fernand: Added to ONLY show items on an ipad (Narrow Tablet)...  */
@media screen and (min-width: 1178px) 
{
.tablet-show{
display: none ;
}
}
/*--   End ---Fernand: Added to ONLY show items on an ipad (Narrow Tablet)...  */




/*--   the following added by Fernand to For printing control ***/

.print-only {display: none; height: 0px;}  
 

    @media print {  

      
    .not-print { display:none; height:0px; }  

    .print-only { display:block !important;} 
    
    body {
  color : #000000;
  background : #ffffff;
  font-family : "Times New Roman", Times, serif;
  font-size : 14pt;
}
    
   }  

/*--   End added by Fernand to For printing*/





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


@media screen and (max-width: 480px)
{
  
  .mobile-only > .not-print > table form {
  display: none;
  }
	html, body {
		font-size: 90%;
		background: #ffffff;
		padding: 2em 2px 2px 2px;
		color: #000000;
		margin: 0;
		}
		
		h1, h2, h3, h4, h5, h6 {
		font-weight: normal;
		}
		
	
		
		.desktop-only{
		display:none;
		}
		
		.topnav-position{
		display:none;
		}							
		
		.fullwidth-footer img{
		max-width:50px;
		}
		
	.header-mobile{
	display:block;
	width:100%;
	height:0px;	
	margin:0;
	/*.background-image: url(../image-files/header-mobile.png); .*/
	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;
}


.shell320af {
width:320px;
margin:5px auto;
float:none;
background-color:#004080;
}



	
	.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, .inner310af, .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-shell325f {
	display:block;
	width:80%;
	margin:5px auto;
	padding:0;
	background-color:#F8F3C3;
	border-top: 5px solid #804000
	clear:both;
	}
	
	
	.sub-inner360, .sub-inner300, sub-inner240, .sub-inner235, .sub-inner205{
	width:95%;
	padding: 0 5px;
	background-color:#ffffff;
	}
	
	.sub-inner300f{
	width:95%;
	padding: 0 5px;
	background-color:#808000;
	}
	
	
	
	.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;
	}
	
	
	.sub-inner300f 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:#5c2e2e;
	}
	
	.footerbox1, .footerbox4{
	width:22%;
	}
	.footerbox1 img, .footerbox4 img{
	height:40px;
	width:40px;
	}
	
	.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 */
  }

/*---This was the original UMT code
	 img{
	 max-width:300px;
	 max-height:200px;
	 }
*/	
	
	/*--This is from Fernnad  */   
	img{
	 max-width:99%;
	}
	/*    End  This is from Fernnad    */
	 	

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

}





/* **************   THIS SECTION ADDED BY FERNAND   ****************************************
*****/





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



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



.ItemCenter {
float: center;
margin: 0px 0px 0px 0;
text-align: center;
}



/* For putting a caption under an image  */
div.figure {
  float: left;
  margin: .75em 1.5em .75em  .75em ;
border:1px solid transparent;
}
div.figure p {
  text-align: left;
  font-style: italic;
  font-size: .95em;
  text-indent: 0;
  margin-top: 1px;
}



.minitoc {
width: auto;
float: left;
margin: 0em 1.35em 1.00em 0em;
background: #ffffff;
color: black;
font-size: 0.95em;
border: solid #E1D990 thin;
padding: .35em 0.35em .35em 0.35em;
}
.minitoc p{padding: 0px 0px 0px 0px; margin:0.35em 0px;}







.ReminderBox {
	background-color: #DEF0EF;
	width: 33%;
	border: 1px solid #64AAD8;
	margin: 15px 25px 15px 0;
	float: left;
}

.ReminderBox h4 {
margin: 0;
padding: 2px;
text-align: center;
background-color: #fff;
}

.ReminderBox p {
font-size: 90%;
padding: 0 4px;
line-height: 150%;
}



.BoxProduct {
	background-color: #DEF0EF;
	width: 24%;
	border: 1px solid #64AAD8;
	margin: 15px 25px 15px 0;
	float: left;
}

.BoxProduct h4 {
margin: 0;
padding: 2px;
text-align: center;
background-color: #fff;
}

.BoxProduct p {
font-size: 110%;
padding: 0px;
line-height: 120%;
}



.boxmobile {
	background-color: #ffffd2;
	width: 100%;
	border: 1px solid #9e9e9e;
	margin: 15px 15px 10px 0px;
	float: left;
}


.boxmobil p {
font-size: 105%;
font-style: ;
color: #000000 ;
font-weight: normal;
padding: 4px 4px 4px 4px;
line-height: 130%;
}








.textbox {
	background-color: #DEF0EF;
	width: 30%;
	border: 1px solid #64AAD8;
	margin: 15px 25px 15px 0px;
	float: left;
}


.textbox p {
font-size: 105%;
font-style: ;
color: #000000 ;
font-weight: normal;
padding: 4px 4px 4px 4px;
line-height: 130%;
}




.widebox {
	background-color: #F7F7F7;
	width: 100%;
	border: 1px solid #b7b7b7;
	border-radius: 15px;
	margin: 25px 25px 15px 0px;
	float: center;
}

.widebox p {
font-size: 105%;
color: #000000;
font-style: ;
font-weight: normal;
padding: 0.25em 0.75em 0.25em 0.75em;
line-height: 150%;
text-align: justify;
}



.widebox2 {
	background-color: #ffff9f;
	width: 100%;
	border: 2px solid #808080;
	border-radius: 15px;
	margin: 25px 25px 15px 0px;
	float: center;
}

.widebox2 p {
font-size: 105%;
color: #000000;
font-style: ;
font-weight: normal;
padding: 0.25em 0.75em 0.25em 0.75em;
line-height: 150%;
text-align: justify;
}


.widebox3 {
	background-color: #ffffff;
	width: 70%;
	border: 1px solid #787878;
	border-radius: 15px;
	margin:10px auto 35px auto  ;
	
}

.widebox3 p {
font-size: 105%;
color: #000000;
font-weight: normal;
padding: 0.0px 0.25em 0.0px 0.25em;
line-height: 105%;
text-align: center;
}



.widebox4 {
	background-color: #e8ffe8;
	width: 60%;
	border: 1.5px solid #9d9d9d;
	border-radius: 15px;
	margin: 15px 25px 15px 0px;
	float: left;
}

.widebox4 p {
font-size: 105%;
color: #000000;
font-weight: normal;
padding: 0.0px 0.75em 0.0px 0.75em;
line-height: 150%;
text-align: center;
}



.widebox5 {
	background-color: #ffffa6;
	width: 60%;
	border: 1.5px solid #9d9d9d;
	border-radius: 15px;
	margin: 15px 25px 15px 0px;
	float: left;
}

.widebox5 p {
font-size: 105%;
color: #000000;
font-weight: normal;
padding: 0.0px 0.75em 0.0px 0.75em;
line-height: 150%;
text-align: left;
}




.widebox6 {
	background-color: #e8ffe8;
	width: 100%;
	border: 1.5px solid #9d9d9d;
	border-radius: 15px;
	margin: 15px 25px 15px 0px;
	float: left;
}

.widebox6 p {
font-size: 105%;
color: #000000;
font-weight: normal;
padding: 0.0px 0.75em 0.0px 0.75em;
line-height: 150%;
text-align: center;
}





/*-- Start of Navigation Box --full width   #d5ffd5  --*/

.box-nav {
	/*-- 
	background-color: #F8F3C3;
	width: 95%;
	padding: 0.25em 0.75em 0.75em 0.75em;
	border: 1.5px solid #9f9f9f;
	margin: 0em 0em 0em 0em ;
	float: left;
	--*/
}

.box-nav p {
font-size: 100%;
color: #000000;
font-weight: normal;
padding: 0.5em 0em 0em 0em;
line-height: 100%;
text-align: left;
}

/*-- end of Navigation Box --full width    --*/



/*-- Start of Product Box 1 --full width    --*/

.box-prod1 {
	background-color: #ffffc4;
	width: 95%;
	padding: 0.75em 0.75em 0.75em 0.75em;
	border: 1px solid #aeae00;
	margin: 0em 0em 0em 0em ;
	float: left;
}

.box-prod1 p {
font-size: 105%;
color: #000000;
font-weight: normal;
padding: 4px 9px 4px 9px;
line-height: 150%;
text-align: left;
}

/*-- end of Product Box 1 --full width    --*/




/*-- Start of Product Box 2 --Narrow    --*/

.box-prod2 {
	background-color: #ffffc4;
	width: 140px;
	padding: 0.25em 0.25em 0.25em 0.25em;
	border: 1px solid #aeae00;
	margin: 0.5em 0.75em 0.5em 0em;
	float: left;
}

.box-prod2 p {
font-size: 100%;
color: #000000;
font-weight: normal;
padding: 0.25em 0.25em 0.25em 0.25em;
line-height: 110%;
text-align: left;
}

/*-- End of Product Box 2 --Narrow    --*/




.col-a {color: #800000; font-weight:bold; }
.col-b {color: #006f37; font-weight:bold;}
.col-c {color: #ff4242; font-weight:bold;}
.col-g {color: #585858; font-weight:bold;}
.col-g2 {color: #808080;} 
.col-r {color: red;}



.bread
{color: #000000; font-size:90%;
text-align: left;
}

.bread2
{color: #006c00; font-size:95%; font-weight: bold;
}



/*-- col-2 used for title of right navigation --*/
.col-2 {color:red; font-size: 1.15em;}




.stand-b {color: Indigo; font-family: Times New Roman; font-size: 1.20em; font-weight:bold;
text-align: center;
}

/*---- List Used for the INTRO to a section under a heading  ---*/
ul.intro {color: #005300; font-family: Arial, sans-serif; font-size: 1.10em; font-weight: normal;
list-style-position:outside;
text-align: left; ; margin: 0.75em 0em 1.5em 0em ; }
.intro li{padding-top: 0.4em }




.CalloutBox {
	width: 85%;
	border: 1px solid #64AAD8;
	margin: 18px auto 24px auto;
	padding: 4px;
}

div.CalloutBox p {
margin: 13px;
}

p.CalloutBox {
padding: 13px;
}

div.CalloutBox img {
margin: 10px;
}

div.CalloutBox h1,
div.CalloutBox h2,
div.CalloutBox h3,
div.CalloutBox h4,
div.CalloutBox h5,
div.CalloutBox h6 {
margin: 13px 0 13px 13px;
}


/*-- Call Out Box Heading --*/
.call-heading {color: blue; font-family: Times New Roman; font-size: 1.50em; font-weight: bold;}






/*--- Start of drop down code from http://cssmenumaker.com/ ----*/

#cssmenu{ height:37px; display:block; padding:0; margin:0;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none;  } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#EEE8AA; border-color:#c2b327; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
/*#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} */
 #cssmenu ul li.has-sub:hover > div{display:block;} 
.hover-touch{display:block !important;} 
/*#cssmenu ul li.has-sub > a:hover{ background:#eee8aa; border-color:#eee8aa; color: #000;} */
#cssmenu ul li.has-sub:hover > a{ background:#eee8aa; border-color:#eee8aa; color: #000;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#eee8aa; border-width: 1px;    
    border-color: #cd853f;
    border-top-style: transparent;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;; border-radius:0 0 7px 7px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#000; text-decoration:none;  } 
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ color:#fff; background:#c0c0c0; background:-moz-linear-gradient(top, #a0522d 0%, #cd853f 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#cd853f), color-stop(100%,#a0522d)); background:-webkit-linear-gradient(top, #cd853f 0%,#a0522d 100%); background:-o-linear-gradient(top,  #cd853f 0%,#a0522d 100%); background:-ms-linear-gradient(top, #cd853f 0%,#a0522d 100%); background:linear-gradient(top,  #cd853f 0%,#a0522d 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cd853f', endColorstr='#a0522d',GradientType=0); } 
#cssmenu{border-color:#5b2e00;} 
#cssmenu > ul > li > a{border-right:1px solid #cd853f; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#623100;} 
#cssmenu > ul > li > a:hover{background:#aa5500;  }

/*--    End of drop down code from http://cssmenumaker.com/ ---*/



/*--    START Accordion Menu ---*/

@import url(http://fonts.googleapis.com/css?family=Lato);
@charset 'UTF-8';

#accord,
#accord ul,
#accord li,
#accord a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  position: relative;
}
#accord a {
  line-height: 1.5;
  padding: 6px 15px;
}
#accord {
  width: 250px;
}
#accord > ul > li {
  cursor: pointer;
  background: #000;
  border-bottom: 1px solid #4c4e53;
}
#accord > ul > li:last-child-accord {
  border-bottom: 1px solid #3e3d3c;
}
#accord > ul > li > a {
  font-size: 16px;
  display: block;
  color: #ffffff;
  background: #a0522d;
  background: -moz-linear-gradient(#a0522d 0%, #a7692c 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a0522d), color-stop(100%, #a7692c));
  background: -webkit-linear-gradient(#a0522d 0%, #a7692c 100%);
  background: linear-gradient(#a0522d 0%, #a7692c 100%);
}
#accord > ul > li > a:hover {
  text-decoration: none;
  font-weight: bold;
}
#accord > ul > li.active {
  border-bottom: none;
}
#accord > ul > li.active > a {
  background: #95c700;
  background: -moz-linear-gradient(#95c700 0%, #6f9400 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #95c700), color-stop(100%, #6f9400));
  background: -webkit-linear-gradient(#95c700 0%, #6f9400 100%);
  background: linear-gradient(#95c700 0%, #6f9400 100%);
  color: #4e5800;
  
}
#accord > ul > li.has-sub-accord > a:after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  border: 5px solid transparent;
  border-left: 5px solid #ffffff;
}
#accord > ul > li.has-sub-accord.active > a:after {
  right: 14px;
  top: 12px;
  border: 5px solid transparent;
  border-top: 5px solid #4e5800;
}
/* Sub menu */
#accord ul ul {
  padding: 0;
  display: none;
}
#accord ul ul a {
  background: #EEE8AA;
  display: block;
  color: #000000;
  font-size: 13px;
}
#accord ul ul li {
  border-bottom: 1px solid #c9c9c9;
}
#accord ul ul li.odd a {
  background: #EEE8AA;
}
#accord ul ul li:last-child-accord {
  border: none;
}


/*--    END Accordion Menu---*/





/*--- Start of Site Maps List Stying -- Located in includes, such as  z-map-understanding.shtml--*/

/*--  <style type="text/css">-- */

.lev1 {
    list-style:none ;  
    margin:0px 0 0px 0px;
    padding:0.25em;
    text-indent:.5em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    font-weight: normal;
}

ul.lev1 li, ol.lev1 li {
padding-top: 0.50em;
}


.lev2 {
    margin:0;
    padding:0;
    list-style:none;
    text-indent:1.85em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95em;
    font-weight: normal;
}

ul.lev2 li, ol.lev2 li {
padding-top: 0.5em;
}


.lev3 {
    margin:0;
    padding:0;
    list-style:none;
    text-indent:3.0em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95em;
    font-weight: normal;
}

ul.lev3 li, ol.lev3 li {
padding-top: 0.35em;
}


/*--- End of Site Maps List Stying ----*/





/* Start cssbutton ---May 31, 2014  http://css3buttongenerator.com/
font-size:1.25em;
text-decoration: none;
color:#FFFFFF !important;

*/

.button {
  background: #ff0000;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  display: block;
  width: 200px;
    text-align: left;
}

.button:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}


/* End cssbutton ---May 31, 2014   */

    


/* http://css3buttongenerator.com/   */

.btn {
  background: #ffdd00;
  background-image: -webkit-linear-gradient(top, #ffdd00, #f7f70f);
  background-image: -moz-linear-gradient(top, #ffdd00, #f7f70f);
  background-image: -ms-linear-gradient(top, #ffdd00, #f7f70f);
  background-image: -o-linear-gradient(top, #ffdd00, #f7f70f);
  background-image: linear-gradient(to bottom, #ffdd00, #f7f70f);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #000000;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: dotted #f5c813 2px;
  text-decoration: none;
}

.btn:hover {
  background: #fcbc3c;
  text-decoration: none;
}


/*  end http://css3buttongenerator.com/   */





/* Button 3     MailChimp Form Embed Code - Slim - 08/17/2011 */
#mc_embed_signup form {display: block; position: relative; text-align: left; padding: 10px 0 10px 3%; }
#mc_embed_signup h2 {font-weight: bold; padding: 0; margin: 15px 0; font-size: 1.4em; }
 
#mc_embed_signup input { border: 1px solid #ababab; -webkit-appearance: none; }
#mc_embed_signup input[type=checkbox]{ -webkit-appearance: checkbox; }
#mc_embed_signup input[type=radio]{ -webkit-appearance: radio; }
#mc_embed_signup input:focus { border-color: #799877; }
 
#mc_embed_signup .button3 {
  display: block;
  float: left;
  position: relative;
  background-color: #008000;
  padding: 0;
  margin: 0 auto;
  border: 0 none;
  border-bottom: #719f5a 3px solid;
  border-radius: 6px;
  color: #fff; 
  cursor: pointer;
  font-size: 16px;
  width: 180px;
  height: 36px;
  line-height: 36px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  vertical-align: top;
}
#mc_embed_signup .button3:hover { background-color: #5ebb00; border-bottom-color: #7fac69; }
#mc_embed_signup .button3:active { top: 2px; border-bottom-width: 1px; }



/*  Button 4  MailChimp Form Embed Code - Slim - 08/17/2011 */
#mc_embed_signup form {display: block; position: relative; text-align: left; padding: 10px 0 10px 3%; }
#mc_embed_signup h2 {font-weight: bold; padding: 0; margin: 15px 0; font-size: 1.4em; }
 
#mc_embed_signup input { border: 1px solid #ababab; -webkit-appearance: none; }
#mc_embed_signup input[type=checkbox]{ -webkit-appearance: checkbox; }
#mc_embed_signup input[type=radio]{ -webkit-appearance: radio; }
#mc_embed_signup input:focus { border-color: #799877; }
 
#mc_embed_signup .button4 {
  display: block;
  position: relative;
  background-color: #008000;
  float: left;
  padding: 0;
  margin: 0 auto;
  border: 0 none;
  border-bottom: #719f5a 3px solid;
  border-radius: 6px;
  color: #fff; 
  cursor: pointer;
  font-size: 16px;
  width: 220px;
  height: 40px;
  line-height: 36px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}
#mc_embed_signup .button4:hover { background-color: #9cc183; border-bottom-color: #7fac69; }
#mc_embed_signup .button4:active { top: 2px; border-bottom-width: 1px; }










p.fixed {
position: fixed;
left: 0px;
top: 50%;
}



/*--Start of CSS Table Generator          http://www.csstablegenerator.com/      */


.CSSTableGenerator {
	margin:0px;padding:0px;
	width:90%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
	
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#ffffff; }
.CSSTableGenerator tr:nth-child(even)    { background-color:#ffffff; }.CSSTableGenerator td{
	vertical-align:middle;
	
	
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:0.95em;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
		background:-o-linear-gradient(bottom, #b7804d 5%, #ba8350 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b7804d), color-stop(1, #ba8350) );
	background:-moz-linear-gradient( center top, #b7804d 5%, #ba8350 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#b7804d", endColorstr="#ba8350");	background: -o-linear-gradient(top,#b7804d,ba8350);

	background-color:#b7804d;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:1.0em;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #b7804d 5%, #ba8350 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b7804d), color-stop(1, #ba8350) );
	background:-moz-linear-gradient( center top, #b7804d 5%, #ba8350 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#b7804d", endColorstr="#ba8350");	background: -o-linear-gradient(top,#b7804d,ba8350);

	background-color:#b7804d;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}

	
/*********End CSS Table Generator  ****************/


/*   The following is use to left justify headers    */
.heading-left {
text-align: left;
}



/*   Start  Expanding Box  */

#headerDivImg, #contentDivImg, #contentDivImg_ {
     float: left;
     width: 85%;
}
#titleTextImg {
     float: left;
     font-size: 1.2em;
     font-weight: bold;
     margin: 5px;
}
#imageDivLink {
     float: right;
}
#headerDivImg {
     background-color: #000000;
     color: #ffffff;
}
#contentDivImg, #contentDivImg_ {
     background-color: #ffff00;
     text-align: center;
}
#headerDivImg img {
     float: right;
     margin: 10px 10px 5px 5px;
}

/*   EndExpanding Box  */


/* Growing Red Bar codes by Singh Satnam - http://www.fiverr.com/sarvankarthik6 */
.red-bar {
    border-top: 0.35em solid #CE1420;
    width: 40%;
    position: relative;
    margin-top: -1em;
    margin-bottom: 1.2em;
}
.wow.animateIn.left.red-bar.top {
	margin: 0;
	padding-bottom: 0;
}
.red-bar.animateIn.left {
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}
.red-bar.animateIn.right {
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}
.red-bar.show.animateIn, .red-bar.thick.show.animateIn {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}
.red-bar.thick {
    border-top: 0.6em solid #CE1420;
}
.fadeIn {
    opacity: 0;
    position: relative;
    -webkit-transition: opacity 0.7s ease-in-out;
    transition: opacity 0.7s ease-in-out;
}
/* Growing Red Bar codes by Singh Satnam - http://www.fiverr.com/sarvankarthik6 */