/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */
/*
   Triangle OA Intergroup Policy and Procedures Style Sheet 

   Filename:         igpp.css
   Author: Alice DeLaney
   Created on: 12/15/2014 
  Last modified on: 12/15/2014
  Supporting files: 

*/

/* @import url('/css/styles.css'); */


/* Reset Base Styles */
@media screen { 
  
 /* CSS3 Code for Drop Down Menus */
/* classes in p&p docs

/* The drop down menu itself is an unordered list, 
which you hide within a div that can be triggered to
 make the UL appear when the user hovers over the div. 
 Here’s how Webstuffshare sets up the overall design of the menu: */
 
		html, body, div, header, footer, aside, nav, article, section	{ margin: 0; padding: 0; }
		header, footer, aside, nav, article, section	{ display: block; }
		body 			{ color: #333; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }
		h2				{ color: #333; }
		a				{ color: #337810; }
		p				{ margin: 0 0 18px; }
		.igppcontainer		{ width: 760px; margin: 0 auto; }
		
		/* Header */
		header			{ background: #333; border-bottom: 2px solid #aaa; }
		header h1  	{ color: #fff; margin: 0 0 3px; padding: 24px 18px 0; }
		header p		{ color: #ccc; font-size: 11px; font-weight: bold; padding: 0 18px; }
		
		/* Content Style */
		.ignav		{ margin-left: 18px; }
		.igppnav ul	{ padding: 0 18px 9px; }
		.igppextra			{ margin: 0 18px; }
		.igppextra small	{ font-size: 11px; line-height: 18px; }
		.igppcontent		{ border-bottom: 1px solid #ccc; margin: 0 18px; }
		.igppcontent p, .extra p { padding-right: 18px; }
		
		/* Content Positioning and Size */
		nav		{ float: left; width: 350px; }
		.igppcontent		{  }
		.igppextra			{ float: left; width: 350px; }		/* Footer */
		.igppfooter			{ background: #666; border-bottom: 2px solid #aaa; clear: both; }
		.igppfooter a		{ color: #fff; }
		.igppfooter	p		{ color: #ccc; margin: 0; padding: 0 18px 10px; }
		.igppfooter ul		{ border-bottom: 1px solid #999; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
		.igppfooter li		{ display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }
	

.drop-menu {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    padding: 10px 10px;
    font-size: 22px;
    height: 25px;
    max-height: 25px;
    width: 400px;
    background: #fff;
    cursor: pointer;
    border: 1px solid #f6f0e4;
}

/* This creates a fixed height for the menu along with setting definitions for the 
padding, font, border, cursor and so on. To simulate the look and feel of a menu, 
you’ll want to manipulate the look of the cursor. You can do that with the pseudo-class 
:hover as such: */

.drop-menu:hover .sub-menu {
    display: inline-block;
}

/* For the menu, you’ll want to mimic some of the
 attributes that were defined earlier. Plus, you can add in some shadow effects to enhance the aesthetics.
 */

.sub-menu {
    display: none;
    width: 400px;
    background: #fff;
    padding: 10px 10px;
     text-align: right;
    margin-left: -11px;
    margin-top: 10px;
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
    box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}

/* The shadow affect is rather advanced in that it uses a “box-shadow property, set x-axis 
to 0px, y-axis to 13px, blur to 25px and shadow color to black with 20% alpha. 
This will make the shadow [sic] has a gradient effect.” */
/* As mentioned at the start of the article, the drop down menu is itself a list, which also must be defined: */

.sub-menu li {
        list-style-type: none;
        display: block;
        border-bottom: 1px dotted #eaeaea;
        font-size: 19px;
        height: 22px;
        padding: 8px 0;
    }

/* The demo is actually set up very nice, which is a reason why 
HTMLgoodies is showcasing this code, in that it allows for small 
icons next to the drop down items. It is a popular convention in 
web design to focus on using images instead of text to convey meaning. 
Here is how that is done: */

.sub-menu li img {
            margin-right: .5em;
        }

/* This code is also impressive in that it adds minor details like a dotted 
border between each item: */

.sub-menu li:hover {
        border-bottom: 1px dotted #bababa;
    }

/* Uses an animated plus symbol. This symbol conveys to the visitor 
that this is indeed a drop down menu and begs to be clicked on 
or at least hovered over. The plus symbol rotates when the visitor hovers over the menu.*/

.plus {
    display: inline-block;
    -webkit-transition: .3s ease-in-out;
      -moz-transition: .3s ease-in-out;
      -o-transition: .3s ease-in-out;
}

.drop-menu:hover .plus {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
 
 
 } /* end of media screen /*
	


/* End of screen media                       */
/* Start of print media              */

@media print {
body {font-family: "Times New Roman", Times, serif;}

@page {
	size: 8.5in 11in portrait;
	margin: 0.5in;
  
/* hide page elements that will not be printed */
header, footer {display: none;}

/* setting the page breaks in the document */
	/* article { display: block;
	page-break-after: always;
	page-break-inside: avoid;  */
	}
h1 { 
    font-family: Times, serif;
    font-size: 16pt;
	text-align: left;
	width: 100%;
	}

h2 { font-family: Times, serif;
     font-size: 14pt;
	text-align: left;
	width: 100%;
	}

/* The next lines hide the links to the Table of Contents in the documents */
.noprint {
    display: none;
} 
  
.arabicnumeral {list-style-type: decimal; }
.loweralpha {list-style-type: lower-alpha; } 
.upperalpha {list-style-type: upper-alpha; }
ul.toc {list-style-type: none; }

 }  /* End of screen media                       */