/* CSS for penningtonfirstaid.org */
/* headings "body", "p" correspond to standard elements like <p> */

body {
  font-family: "Trebuchet MS", Arial, Helvetica, Verdana, sans-serif;
  background-color: white;
  padding: 10px;
  line-height: 110%;
  border: 3px solid #0000ad;
}
h1,h2,h3,h4,h5 {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #0000ad;
  line-height: 115%;
  }
  
 
/*START THE NAVIGATION SECTION*/
#navigation a 
{ 
color: #000; 
background: #fb0 url("images/left-tab.gif") left top no-repeat; 
text-decoration: none; 
padding-left: 10px 
} 

#navigation a span 
{ 
background: url("images/right-tab.gif") right top no-repeat; 
padding-right: 10px 
} 

#navigation a, #navigation a span 
{ 
display: block; 
float: left 
} 

#navigation a:hover 
{ 
color: #fff; 
background: #26a url("images/left-tab-hover.gif") left top no-repeat; 
text-decoration: none; 
padding-left: 10px 
} 

#navigation a:hover span 
{ 
background: url("images/right-tab-hover.gif") right top no-repeat; 
padding-right: 10px 
} 

#navigation 
{ 
list-style: none; 
padding: 0; 
margin: 0 
} 

#navigation li 
{ 
float: left; 
display: block; 
margin: 0; 
padding: 0 
}
/*END THE NAVIGATION SECTION*/





/*START ANOTHER NAVIGATION1 SECTION*/
#navigation1 a 
{ 
color: #000; 
background: #00FF00 url("images/left-tab-green.gif") left top no-repeat; 
text-decoration: none; 
padding-left: 10px 
} 

#navigation1 a span 
{ 
background: url("images/right-tab-green.gif") right top no-repeat; 
padding-right: 10px 
} 

#navigation1 a, #navigation a span 
{ 
display: block; 
float: left 
} 

#navigation1 a:hover 
{ 
color: #fff; 
background: #26a url("images/left-tab-hover-blue.gif") left top no-repeat; 
text-decoration: none; 
padding-left: 10px 
} 

#navigation1 a:hover span 
{ 
background: url("images/right-tab-hover.gif") right top no-repeat; 
padding-right: 10px 
} 

#navigation1 
{ 
list-style: none; 
padding: 0; 
margin: 0 
} 

#navigation1 li 
{ 
float: left; 
display: block; 
margin: 0; 
padding: 0 
}
/*END THE NAVIGATION1 SECTION*/

/*START THE NAVIGATION3 SECTION FOR SUBMENUS*/

#navigation3
{
	margin-top:15px
}

#navigation3 ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0  /* Indent from left edge */
}

#navigation3 ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:16px;
	line-height:24px;
	padding:0 15px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#navigation3 ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#navigation3 ul li.current-menu-item
{
	background:#f7b927;
	border-width:10;border-radius:15px;
}

#navigation3 ul li.green-menu-item
{
	background:#00FF00;
	border-width:10;border-radius:15px;
}

#navigation3 ul li:hover
{

	background:#2168a2;
	border-width:10;border-radius:15px;
}

#navigation3 a:hover 
{
    color:#fff;
}

#navigation3 ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#navigation3 ul ul li
{
	float:none;
	width:300px
}

#navigation3 ul ul a
{
	line-height:40%; /*WAS 120% */
	padding:10px 15px
}

#navigation3 ul ul ul
{
	top:0;
	left:100%
}

#navigation3 ul li:hover > ul
{
	display:block
}

/*END THE NAVIGATION3 SECTION FOR SUBMENUS*/



/* START FOR VERTICAL MENU */

#navigation4 {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
}
#navigation4 ul,
#navigation4 ul li,
#navigation4 ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#navigation4 ul {
  position: relative;
  z-index: 597;
  float: left;
}
#navigation4 ul li {
  float: left;
  min-height: 1px;
  padding: 1px;  /*padding between blocks*/
  line-height: 10%;
  vertical-align: middle;
  position: relative;
}

#navigation4 ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#navigation4 ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 598;
  width: 100%;
}
#navigation4 ul ul li {
  float: none;
}
#navigation4 ul ul ul {
  top: -2px;
  right: 0;
}
#navigation4 ul li:hover > ul {
  visibility: visible;
}
#navigation4 ul ul {
  top: 1px;
  left: 99%;
}
#navigation4 ul li {
  float: none;
}
#navigation4 ul ul {
  margin-top: 1px;
}

/* YET ANOTHER NAVIGATION STYLE */

#navigation4 {
  display:block;
  width: 200px;
  color: #333;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  line-height:24px;
  padding:10 15px; /*CONTROLS LOCATION OF WHOLE BLOCK*/
}

#navigation4:before {
  content: '';
  display: block;
}
#navigation4:after {
  content: '';
  display: table;
  clear: both;
}

#navigation4 a {
  display: block;
  padding: 12px 20px;
  color: #000000;
  text-decoration: none;
  /*line-height:14%; /*WAS NOT IN THIS MENU% */
}
#navigation4 > ul {
  width: 250px; /*WIDTH OF NON HOVER BOXES*/
}
#navigation4 ul ul {
  width: 250px;/*WIDTH OF HOVER BOXES*/
}

#navigation4 > ul > li > a:hover {
  background: #2266AA;  /*DEEP BLUE*/
  color: #ffffff;
}
#navigation4 > ul > li.orange a {
  background: #F0BB36;  /*ORANGE*/
	border-width:10;border-radius:15px;
}

#navigation4 > ul > li.green a {
  background: #00FF00;  /*GREEN*/
	border-width:10;border-radius:15px;
}

/*#navigation4 > ul > li a:hover,  IS THIS A MISTAKE? */

#navigation4 > ul > li:hover a {
  background: #2266AA;
}
#navigation4 li {
  position: relative;
}
#navigation4 ul li.has-sub > a:after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -6px;
}

#navigation4 ul ul a {
  font-size: 16px;
  color: #ffffff;
}
#navigation4 ul ul a:hover {
  background: #26a;
  color: #ffffff;
}

#navigation4 ul ul li:hover > a {
  background: #26a;
  color: #ffffff;
}

#navigation4.align-right {
  float: right;
}
#navigation4.align-right li {
  text-align: right;
}
#navigation4.align-right ul li.has-sub > a:before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
}
#navigation4.align-right ul li.has-sub > a:after {
  content: none;
}
#navigation4.align-right ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 598;
  width: 100%;
}

/* END FOR VERTICAL MENU */





/*PICTURE CAPTIONS*/
#pcap 
     {
     width: 60%;
     font-size: small;
     color: red;
     }

/*WARNING*/
#warning
    {
    color: red;
    }
    
/*VARIOUS AMOUNTS OF INDENTED TEXT*/
#indent50 {padding-left:  3em;}
#indent100{padding-left:  6em;}
#indent200{padding-left: 12em;}
#indent300{padding-left: 18em;}
#indent400{padding-left: 24em;}

p.indent50
    {
    padding-left: 3em;
    }  
p.indent100
    {
     padding-left: 6em;
    }               
p.indent200 
    {
     padding-left: 12em;
    }
p.indent400
    {
     padding-left: 24em;
    }
p.indent600
    {
     padding-left: 36em;
    }    
ul.indent50
    {
    padding-left: 4em;
    }  
ul.indent100
    {
     padding-left: 7em;
    }               
ul.indent200 
    {
     padding-left: 13em;
    }
ul.indent400
    {
     padding-left: 25em;
    }
    
ol.indent50
    {
    padding-left: 4em;
    }  
ol.indent100
    {
     padding-left: 7em;
    }               
ol.indent200 
    {
     padding-left: 13em;
    }
ol.indent400
    {
     padding-left: 25em;
    }
               
/*DATA TABLES WITH LOTS OF COLUMNS, USE with <table class = "data_table">*/
/*NOTE THE OPTION FOR A SMALLER FONT WITH data_table_small*/
table.data_table
  {
    border-collapse: collapse;
    font-size: small;
  }
table.data_table th, table.data_table td
  {
    padding: 1px;
    border: 1px solid gray;
  }

table.data_table_small
  {
    border-collapse: collapse;
    font-size: x-small;
  }
table.data_table_small th, table.data_table_small td
  {
    padding: 1px;
    border: 1px solid gray;
  }
  
table.general
  {
    border-collapse: collapse;
  }
table.general th, table.general td
  {
    padding-left:   5px;
    padding-right: 30px;
    padding-top:    1px;
    padding-bottom: 1px;
    border: 1px solid gray;
  }
/*STYLES FOR ORDERED LISTS*/
ol.withupperalpha
  {
    list-style-type: upper-alpha;
  }
ol.withloweralpha
  {
    list-style-type: lower-alpha;
  }  
  
ol.witharabicnumbers
  {
    list-style-type: arabic-numbers;
  }   
ol.withlowerroman
  {
    list-style-type: lower-roman;
  }   
ol.withupperroman
  {
    list-style-type: upper-roman;
  }  
ol.withsquare
  {
    list-style: url("http://www.penningtonfirstaid.org/images/select_button.png") square
  }


/*To force a page break for printing use
<body class = "page"> and surround each page with <div class="page-break>.
This will maintain the normal PFAS formatting with blue borders around each
of the DIV which become the printed pages.*/
body.page
  {
  font-family: Arial, Helvetica, Verdana, sans-serif;
  border: none;
  padding: 0px;
  }
div.page-break
  {
    page-break-after: always;
    padding: 10px;
    line-height: 110%;
    border: 3px solid #0000ad;
    margin-top: 6px;
  }


/*This element will draw a solid line 2 pixels wide from the text to the border. If called with
right, places text on right edge and draws line to left border.

Example usage
<div class="line">
    <span class="none-used">text on left</span>
</div>

<div class="line">
    <span class="right">text on right</span>
</div>
*/

.line{
    border-bottom:1px solid black;
    position:relative;
    height:16px;
}

.line span{
    display:inline-block;
    position:relative;
    background:white;
    bottom:-2px;
    height:100%;
    padding:0 5px;
}
.line .right{
    position:absolute;
    right:0;
}​