/*colors
body background:#ffffff
link hover background: color: #CAD3DB
links #000099
visited links #9696C2
hover links: #BC5B3C
color bar along bottom of horiz links: #0000d6
color bar under current page link: #9FAFD1
*/
/*global styles------------------------------------*/
html {
	background: rgb(255, 255, 255);
}
/*
body {
	width: 960px;
	position: relative;
	margin: 0 auto;
}
*/
body{
	font: 100% Cantarell, Arial, Helvetica, sans-serif;
	color: rgb(0, 0, 100);
	font-weight:normal;
	font-style:normal;
	text-align: justify;
	line-height:1.5;
	margin: 0 auto;	
	}
@font-face {
    font-family: 'Modern';
    src: url('_fonts/modernpics-webfont.eot');
    src: url('_fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('_fonts/modernpics-webfont.woff') format('woff'),
         url('_fonts/modernpics-webfont.ttf') format('truetype'),
         url('_fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}
	
/*header styles*/
header {
	background: rgb(0, 0, 153);
	width: 100%;
	padding-top: 1px;
	overflow: hidden;
	margin-bottom: 1.5em;
}

#mainHeader {
	background: rgb(0, 0, 153);
	width: 100%;
	padding-top: 1px;
	overflow: hidden;
	margin-bottom: 1.5em;
}
header2 {
	background: rgb(0, 0, 153);
	width: 100%;
	padding-top: 1px;
	overflow: hidden;
	margin-bottom: 1.5em;
}

header h1 {
	color: #000099;
	font-weight: bold;
	text-transform: uppercase;
}
header h2 {
	color: #000099;
	font-weight: bold;
	text-transform: uppercase;
}

p {font-family: "Verdana", "Arial", "Bookman Old Style";
	font-size: 14px;
	}
li {font-family: "Comic Sans Ms", verdana,sans-serif;
	font-size:   12pt;	
}
.bold {font-family: "Comic Sans Ms", verdana,sans-serif;
	font-size:12pt;
	font-weight:bold;
}
/*global link styles*/
a:link{font-family: "Comic Sans Ms", "Bookman Old Style", "Times New Roman", "Courier New";
	/*color:#400000;*/
	font-weight: bold;
	}

a:focus{
outline: thin dotted;
/*might want to change to outline: 2px solid red; */
}
a:hover, a:active{
outline: 0;/*some browsers have a box around links that are being hovered over*/
color:#BC5B3C;
/*font-weight: bold;*/
background: #CAD3DB;
}
a:visited{font-family: "Bookman Old Style", "Times New Roman", "Courier New";
	color:#9696C2;
	}
/*target external links
a[href^="http://"]:after{
content: " o";
font-family: Modern, sans-serif;
font-size: 1.1em;
position: relative;
top: -.2em;
}
*/
/*target pdf files*/
a[href^=".pdf"]:after{
content: " K";
font-family: Modern, sans-serif;
font-size: 1.1em;
position: relative;
top: -.2em;
}
/*image styles*/
a img{
border: 4px solid white;
}
a:hover img{
border: 4 px solid #D6B694;
}

.thumb{
border none;
}
a .thumb:hover{
padding: 4px;
background: #d5973c;
width: 150px;
height: 150px;
border: none;
}

/*nav styles*/
/*# means id*/
#mainNav{
overflow: hidden;
margin-bottom: 1.5em;/*allow space for mission statement to follow*/
}
/*do this in the global styles so that if the media query fails, this still works*/
/*if the screen is wide enough, they float horizontally, if not, they stack on top of each other*/
#mainNav li{
float: left;
}
#mainNav a{
text-transform: uppercase;
display: block;/*increases the clickable area*/
color; rgb(76, 67, 65);
border: none;
}
#mainNav a:hover{
color: rgb(123, 121, 143);
}
#mainNav a.current{
color: rgb(123, 121, 143);
cursor: default;
}
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
/* For IE 6/7 (trigger hasLayout) */
/*cf means clear floats and causes a space after the links to enable horizontal styling--*/
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}
/*vertical menu styles-----------------------------*/
/*eliminate margins and padding from lists*/
section.info ul, li{
margin: 0;
padding: 0;/*may also affect vertical padding*/
list-style: none;
color: #ffffff;
}

section.info li a{
display: block;
width: 12em;
line-height: 2em;/*using line-height will center the text w/n ea area*/
font-size: 1em;
text-decoration: none;
background: #000099;
color: #ffffff;/*not working see the a link above*/
padding: .2em 0 .2em 1em;
/*margin-bottom: .2em;*/
/*border-bottom: .125em solid #ffffff;*/
}

/*rollover effect*/
section.info li a:hover, li a:focus{
background: #CAD3DB;
border-left: .4em solid white;/*these 2 lines add a white line to the left of each link*/
width: 11.6em;
}

section.info li:last-child a{
border-bottom:none;
}

/*horizontal menu styles----------------*/
/*to use this, wrap the ul in a nav and BE SURE to apply a class of cf to the nav container in the document*/
/*the nav element is the parent element for the horizontal menu*/
/*floated objects can mess up elements that follow; so use the cf class*/
/*you could use a bottom border to make the same effect as the height call*/
/*the nav background is the darker background color on the nav bar. Nav width should be controlled by the content*/
/*the nav height makes the nav .3em taller than the li or the ul*/
/*if you want the nav background to be translucent, change the code to background: rgba(0, 0, 153, .8) */
/*on his example, he gave a height: 40px; width: 800px; padding: 5px 0 0; float: left;  */
nav{
background: #000000;
height: 2.3em;

}
/*this is the one that makes it horizontal*/
/*to space the items out, add margin-right: 12px; or however many it takes to space them appropriately*/
ul, li{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
/*provide the two-tone effect*/
/*the background color is the lighter background color on the nav bar*/
/*width is to keep the ul from shrinking to fit the floated elements. If you put an image to the left of the nav bar, you must subtract the width of the image from the set width of the page. If you use 100%, your layout will break. Use px instead of em for fixed width layouts*/
ul{
background: #000099;
height: 2em;
width: 100%;
}
/*position relative is used here because the submenus are using absolute positioning*/
li{
position: relative;
}

/*the following doesn't work on older IE's, so, add the float: left to the bottom of the ul, li
li{display: inline-block;/*not a lot of people use this; but can be handy - could be applied to the a elements }*/
/*he didn't use the width, height, and background in his li a
/*since the ul is floating, changing the li to block shouldn't affect it
/*center the text vertically with the line-height. If the line height is greater than the text size, the extra space is split above & below - padding adds space to the left and right
/*you could add text-transform: uppercase/lowercase; and font-size: .9em; to reduce the text size 
/*to center the text vertically, match the line height to the height of the nav bar and you could make the padding: 5px 0 0 to add a bit more padding above the text 
/*the background color here is the main color seen*/
li a{
display: block;
line-height: 2em;
padding: 0 1em;
color: white;
text-decoration: none;
width: 90px;
background: #000099;
}

/*when you add the height (2em) and the padding (.3em), you get the height of the nav*/
/*position-relative will keep the element in normal document flow and allow offsetting from the top*/
/*top position: positive value moves the element down and negative value moves it up*/
/*the border radium will round the corner of the top-left and top-right corners*/
/*target any link that's inside a li, including the submenus */
/* the > is a child combinator or descendent selector, it will tell the code to only look at li:hover a that are just inside the .topmenu*/
li a:hover, .topmenu > li:hover > a{
background: #bbc2d1;
height: 2em;
padding-top: .3em;
position: relative;
top: -.3em;
border-radius: .3em .3em 0 0;
}

/*identify current page*/
/*add class "current" to the link for the current page that they're on*/
/*use de-saturated versions of the background and text color*/
/*the border-bottom is to change the color of the bottom line of color under the current link*/
/*adding the a:hover.current to make the link not work*/
/*adding cursor: default to get rid of the "hand" cursor. The link still works*/
.current, a:hover.current, .topmenu li:hover a.current{
background: #BBC2D1;
color: #eeeeee;
padding-top: .3em;
position: relative;
top: -.3em;
border-radius: .3em .3em 0 0;
border-bottom: .3em solid #9FAFD1;
cursor: default;
}

/*drop down menu styles*/
/*turn the float off so the menu doesn't go horizontal*/
/*silver-grey background: BBC2D1*/
/*left -9000em will move it off the page*/
/*you can't get the menu to slide down if height is set to auto; so you have to set a height*/
/*max-height: 0 will squash the menu so it has no height*/
/*transition:height howLong howToDoIt*/
/*position absolute to hide the menu unless it's being selected and top 2em means it should hide behind the top menu*/
/*if you set absolute position and top 0, it should line up with the top of the ul above it, */
/*using absolute positioning keeps the submenu available to screenreaders*/
/*transition isn't fully supported, so webkit's, etc are still needed*/
ul.submenu{
float: none;
background: #9FAFD1;
width: auto;
height: auto;
position: absolute;
top: 2em;
left: -9000em;
max-height: 0;
-moz-transition: max-height 0.5s ease-in-ouut;
-webkit-transition: max-height 0.5s ease-inn-out;
-o-transition: max-height 0.5s ease-in-out;;
transition: max-height 0.5s ease-in-out;
/*overflow: hidden;*/
}

ul.submenu li{
float: none;
}

/*bring the submenu back "look inside the top menu and change any list items that are hovered over*/
/*the max height of 10em is supposed to allow all the menu to show*/
.topmenu li:hover ul{
left: 0;
max-height: 10em;
}

/*target the links inside the submenu*/
/*white-space: nowrap will force the text to stay on the same line, not break*/
ul.submenu li a{
border-bottom: 1px solid white;
padding: .2em 2em;
white-space: nowrap;
}
/*get rid of bottom border on last link*/
ul.submenu li:last-child a{
border-bottom: none;
}
/*change the background to a lighter color*/
/*top: 0 compensates for the top value in the li a:hover above that let's it ride up*/
/*border radius: 0 will stop the rounded top corners*/
ul.submenu li a:hover{
background: #bbc2d1;
height: 2em;
padding-top: .2em;
top: 0;
border-radius: 0;
}

/*end horizontal menu styles---------->*/

/*find section menu styles*/
section.find ul{
margin: 1em .6em .6em
}
section.find li{
margin: 0;
border-bottom: 1px solid rgb(1, 70, 123);/*create a bevel effect*/
border-top: 1px solid rgb(58, 131, 187);
}
section.find li:first-child{
border-top: none;
}
section.find li:last-child{
border-bottom: none;
}
section.find li a{
padding: .6em;
}
/*the rollover*/
section.find a:hover{
color: rgb(251, 174, 44);/*orange*/
}
/*left-column list of links*/
div.portalBox {
  background: #fff;
  border: 1px solid #000;
  margin: 5px auto;
  width: 220px; 
  padding: 5px;
  /*overflow:auto;*/
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }  
div.clientForm {
  background: #fff;
border: 1px solid #ccc;
  margin: 26px auto;
  width: 180px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
  
  div.lifeLearn {
  background: #fff;
border: 1px solid #ccc;
  margin: 26px auto;
  width: 180px; 
  padding: 12px;
  /*overflow:auto;*/
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
  
  div a{
display: block;
line-height: 2em;
padding: 0 1em;
color: #009;
text-decoration: none;
width: auto;
background: #fff;
}
  
  div.twitterBox {
  background: #fff;
border: 1px solid #ccc;
  margin: 26px auto;
  width: 250px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }  
  div.staffAttentionBox {
  background: #fff;
  border: 1px solid #ccc;
  width: 25em;
  margin: 1.5em auto;
  padding: 1em 5em 1em 2em;
  /*overflow:auto;*/
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }  
  div.siteMap {
  background: #fff;
  border: 1px solid #ccc;
  width: 50%;
  margin: 1.5em auto;
  padding: 1em 5em 1em 2em;
  /*overflow:auto;*/
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }  
  div.siteMap a{
display: block;
line-height: 2em;
padding: 0 1em;
color: #400000;
text-decoration: none;
width: auto;
background: #fff;
}
div.nav{
background-color: white;}
td.siteMap {
  background: #fff;
  border: 1px solid #ccc;
  width: 50%;
  margin: 1.5em auto;
  padding: 1em 5em 1em 2em;
  /*overflow:auto;*/
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }  
  td.nav{
background-color: white;
color: #400000;
}
td.siteMap a{
display: block;
line-height: 2em;
padding: 0 1em;
color: #400000;
text-decoration: none;
width: auto;
background: #fff;
}
  /*
ul.old li a{
	display: block;
	font-family: "Comic Sans Ms", verdana,sans-serif;
	font-size:   12pt;
	color: #400000;
	background-color: #fff;
	float: left;
}/*
/*end section styles*/
table {	cellpadding: 3px;
	cellspacing: 0px;
	font-size: 14px;
	border-color:#ffffff;
	}	
td.banner { 
background-position:0% 0%;
background-attachment:fixed;
background-repeat:repeat-x;
}
p.banner { 
background-position:0% 0%;
background-attachment:fixed;
background-repeat:repeat-x;
}
p.bold {font-size:14px;
	font-weight:bold;
	line-height: 110%;
	text-align:center;
	}
p.norm{
	font-weight:normal;
	letter-spacing:110%;
	line-height:150%;
	text-indent: 20px;
	word-spacing:1px;
	}
span.short{
	font-weight:bold;
	font-style:italic;
	letter-spacing:110%;
	line-height:150%;
	}
span.red{color:#af2f12;
	font-size:15px;
	font-style:italic;
	letter-spacing:110%;
	line-height:150%;
	}
span.under{
	text-decoration:underline;
	font-family: "Verdana", "Bookman Old Style", "Times New Roman", "Courier New";
	color:#400000;
	font-size: 14px;
	}
div.attentionBox {
  background: #fff;
border: 1px solid #ccc;
  margin: 26px auto;
  width: 220px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }  
  div.twitterBox {
  background: #fff;
border: 1px solid #ccc;
  margin: 26px auto;
  width: 250px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }  
div.lftAttentionBox {
	position:relative;
	top:10px;left:10px;
  background: #fff;
  border: 1px solid #ccc;
  margin: 26px auto;
  width: 420px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
div.rtAttentionBox {
	position:right;
	top:10px;left:10px;
  background: #fff;
  border: 1px solid #ccc;
  margin: 26px auto;
  width: 420px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }  
div.lgAttentionBox {
	position:relative;
	top:10px;left:10px;
  background: #fff;
  border: 1px solid #ccc;
  margin: 26px auto;
  width: 420px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }  
div.cntrAttentionBox {
	position:relative;
	top:10px;left:10px;
  background: #fff;
  border: 1px solid #ccc;
  margin: 26px auto;
  width: 400px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  } 
  div.lftLinkBox {
  position:relative;
  top:10px;left:10px;
  background: #fff;
  border: 1px solid #ccc;
  margin: 16px auto;
  width: 250px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  } 
  div.rtLinkBox {
  position:right;
  top:10px;right:10px;
  background: #fff;
  border: 1px solid #ccc;
  margin: 16px auto;
  width: 250px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  } 
  div.xMasAttentionBox {
	position:relative;
	top:10px;left:10px;
	background: #ffffff url(2013_valenBlog.gif) top left no-repeat;	
  border: 1px solid #ccc;
  margin: 26px auto;
  width: 600px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }  
  div.stPatAttnBox {
	position:relative;
	top:10px;left:10px;
	background: #ffffff url(StPats_blogDog.gif) top left no-repeat;	
  border: 1px solid #ccc;
  margin: 26px auto;
  width: 600px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
  div.easterAttnBox {
	position:relative;
	top:10px;left:10px;
	background: #ffffff url(chickBug.gif) top left no-repeat;	
  border: 1px solid #ccc;
  margin: 26px auto;
  width: 600px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }    
div.insetUl {
	position:relative;
	top:10px;left:10px;
  background: #fff;
  border: 1px solid #ccc;
  margin: 26px auto;
  width: 420px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }  
  div.clientForm {
  background: #fff;
border: 1px solid #ccc;
  margin: 26px auto;
  width: 180px; 
  padding: 12px;
  overflow:auto;
  /* border-radius below */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  /* box shadow below */
  -webkit-box-shadow: #ccc 3px 4px 3px;
  -moz-box-shadow: #ccc 3px 4px 3px;
  box-shadow: #ccc 3px 4px 4px;
  }
H1 {
	font-family: verdana;
	font-weight: bold;
	font-size:   18px;
	color:#fffffe;
	}
H3 {
	font-family: verdana;
	font-weight: bold;
	font-size:   10px;
	z-index: 2;
	}
H4 {
	font-family: verdana;
	font-weight: bold;
	font-size:   12px;
	z-index: 2;
	}	
.indent{
	font-family:Serif, Sans-serif, Comic Sans Ms;
	font-weight:bold;
	font-size: 12pt;
	text-indent:15px;
	margin-left:15px;
	text-align:justify;
	}
.announce{
	font-family:Serif, Sans-serif, Comic Sans Ms;
	font-weight:bold;
	font-size: 13pt;
	letter-spacing:2px;
	line-height:105%;
	text-indent:15px;
	text-align:justify;
	}
.special{
	font-family:Comic Sans Ms, Serif, Sans-serif;	
	font-size: 12pt;
	letter-spacing:2px;
	line-height:105%;
	text-indent:15px;
	text-align:justify;
	}
.copyright {font-family: "Bookman Old Style", "Times New Roman";
		font-size: 11px;
		color: #400000;
		text-align:center;
		}
.references {font-family: "Bookman Old Style", "Times New Roman";
		font-size: 11px;
		color: #400000;
		}		
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana, sans-serif;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}
.button 
  {border-top: 1px solid #7ec6f5;
   border-bottom: 1px solid #000;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #78b4dc);
   background: -moz-linear-gradient(top, #3e779d, #78b4dc);
   background: -ms-linear-gradient(top, #3e779d, #78b4dc);
   background: -o-linear-gradient(top, #3e779d, #78b4dc);
   padding: 9px 15px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font: 16px Verdana, sans-serif;
   text-decoration: none;
   }   
   /*/hover*/
   .button:hover 
  {border-top-color: #035EB8;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #78b4dc, #3e779d);
   background: -moz-linear-gradient(top, #78b4dc, #3e779d);
   background: -ms-linear-gradient(top, #78b4dc, #3e779d);
   background: -o-linear-gradient(top, #78b4dc, #3e779d);
   color: #EBD39C;}
   /*clicked*/
   .button:active 
  {border-top-color: #7EC6F5;
   background: #1b435e;
   }
/*activate this After finishing the course*/   
   /*mobile styles*/
/*inline media querys > apply to any screen device who's max/min screen width fits*/
/*iPhone 5 has a wider screen than 480px*/
@media only screen and (max-width:480px) {
body {
	width: 90%;
	margin: 0 auto;
	min-width: 320px;
	max-width: 480px;
	}
	/*header*/
	header{
	height: 70px;
	}
	
	/*company name and logo*/
header h1{
font-size: 2em;
padding-left: 55px;
line-height: 70px;
width: 190px;
margin: 0 auto;
background: url(../_images/desolve_logo_50.png) no-repeat left center;
}
/*hide the h2 "Fine Urban Photography" from screen readers*/
header h2{
display: none;
}
/*nav styles for mobile*/
#mainNav{
width: 300px;
margin: 0 auto;/*auto center*/
margin-bottom: 3em;/*wider bottom margin than desktop and tablet*/
}

/*nav styles*/
#mainNav {
	width: auto;
	margin: 0;
	margin-bottom: 1em;
	background: white;
	overflow: hidden
}

#mainNav li {
	margin: 0;
	float: none;
	position: relative;
}
/*menu links*/
/*you can animate max-height by using transitions*/
.topMenu {
	max-height: 0;/*still leaves a tiny border; so use visibility: hidden*/
	visibility: hidden;
}
.topMenu.expand {
	max-height: 900em;
	visibility: visible;
}

#mainNav a, #mainNav h3 {
	font-size: 1.2em;
	text-align: left;
	color: white;	
	display: block;
	margin-bottom: 1px;
	background: rgb(76, 67, 65);
	padding-left: 1em;
	line-height: 2em;
	text-transform: uppercase;
	cursor: pointer;
}
#mainNav a:hover {
	color: white;
}
#mainNav a.current {
	color: rgb(237, 228, 214);
}
#mainNav span.indicator {
	position: absolute;
	right: 1em;
}
/*dropdown menu styles*/
#mainNav ul.submenu {
	float: none;
	width: auto;
	height: auto;
	max-height: 0;
	-moz-transition:max-height 0.5s ease;
	-webkit-transition:max-height 0.5s ease;
	-o-transition:max-height 0.5s ease;
	transition:max-height 0.5s ease;
	overflow: hidden;
}
#mainNav ul.submenu.expand {
	max-height: 20em;
}

#mainNav ul.submenu li a {
	padding: .2em 1em;
	white-space: nowrap;
	color: white;
	text-align: left;
	font-size: 1em;
	padding-left: 3em;
	background: rgb(100, 98, 102);
}
#mainNav .menuToggle {
	display: block;
	background: rgb(76, 67, 65);
	width: 8em;
	margin-bottom: .2em;
	position: relative;
}
.menuToggle a {
	text-align: center;
	padding: 0;
}
	/*mission*/
	.mission{
	width: 90%;
	margin: 0 auto;
	margin-bottom: 2.4em;
	}
	
	/*the icons*/
/*the a.name matches the class name of the different links*/
/*the imgs are 50 x 50 px because mobile is Touch Screens and the average touch spot is about 44px x 44px and appear below the text*/
/*also the larger imgs are more visual*/
a.gallery{
background: url(../_images/icon_sprites_50.png) no-repeat center 25px;
}

a.gear{
background: url(../_images/icon_sprites_50.png) no-repeat center -175px;/*the icons are about 100px apart on the strip*/
}

a.interact{
background: url(../_images/icon_sprites_50.png) no-repeat center -375px;/*negative values move the image up along the graphic*/
}

a.shop{
background: url(../_images/icon_sprites_50.png) no-repeat center -578px;/*the horizontal value ("center") is to center the img with the text*/
}

	
	/*when you move to smaller screens, you have to let some of the visual imgs go*/
/*present the content quickly!*/
.mission h1{
font-weight: bold;
font-size: 1em;
text-align: center;
margin-bottom: .5em;
}

.mission p{
width: 90%;
font-size: .8em;
margin: 0 auto;
line-height: 2;
}

	/*article styles */
	article{
	width: 90%;
	margin: 0 auto;
	}
	article section{
	border-bottom: 2px solid rgb(76, 67, 65);
	margin-bottom: 1.6em;
	overflow: hidden;
	position: relative;
	padding-bottom: 20px;
	}
	
	article h1{
background: url(../_images/icon_sprites_50.png) no-repeat right top;
padding: 20px 0 5px;
}

article h2{
font: 2em Cardo, Georgia, serif;
margin-bottom: 0;
}
/*"join us as we ----"*/
.caption{
font-size: .85em;
margin-top: 1em;
}

article p.pubdate{
font-size: 1em;
text-transform: uppercase;
margin-bottom: 1em;
}
/*where the img goes*/
article .preview{
height: 175px;
}
.philly .preview{
background: url(../_images/sm_philly_banner.jpg) no-repeat;
}

.chicago .preview{
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}

.nyc .preview{
background: url(../_images/sm_nyc_banner.jpg) no-repeat;
}
	/*aside styles*/
	aside{
	width: 90%;
	margin: 0 auto;
	}
	/*just in case any floats are hanging around*/
	aside section{
	clear: both;
	}
/*footer*/
#pageFooter{
clear:both;
overflow:hidden;
padding-bottom: 2em;
}	
}
/*tablet styles*/
@media only screen and (min-width:481px) and (max-width: 768){
@media only screen and (min-width:481px) and (max-width:768px) {
body{
width: 90%;
margin: 0 auto;
min-width: 500px;
max-width: 768px;
}
/*header styles matches the desktop size; but could be changed in the future. If no change ever, consider making a global style*/
header{
height: 165px;
}

/*company name*/
header h1{
font-size: 3.2em;
padding-left: 110px;
line-height: 165px;
width: 270px;
margin: 0 auto;
background: url(../_images/desolve_logo.png) no-repeat left center;
}
/*the tag line*/
/*display: none hides the header h2 from screen readers*/
header h2{
display: none;
}

/*nav styles for tablets*/
/*nav styles for tablets*/
/*nav styles*/
#mainNav {
	width: 100%;
	font-size: 90%;
	padding-bottom: 0;
	margin-bottom: 1em;
}
.topMenu {
	width: 450px;
	margin: 0 auto;
}

#mainNav li {
	margin-right: 5%;
	position: relative;
	width: auto;
}

#mainNav li:last-child {
	margin-right: 0;
}

#mainNav a, #mainNav h3 {
	font-size: 1em;
	text-align: center;
	cursor: pointer;
}
/*dropdown menu styles*/
#mainNav ul.submenu {
	float: none;
	width: auto;
	height: auto;
	padding-top: 1.1em;
	max-height: 0;
	-moz-transition:max-height 0.2s ease;
	-webkit-transition:max-height 0.2s ease;
	-o-transition:max-height 0.2s ease;
	transition:max-height 0.2s ease;
	overflow: hidden;
	z-index: 1000;
	position: absolute;
}
#mainNav ul.submenu li {
	float: none;
	margin: 0;
	background: rgb(76, 67, 65);
	background: rgba(76, 67, 65, .8);
}
#mainNav li.hover:hover ul, #mainNav ul.submenu.expand {
	max-height: 20em;
}
#mainNav ul.submenu li a {
	border-bottom: 1px solid white;
	padding: .2em 1em;
	white-space: nowrap;
	color: white;
	text-align: left;
	font-size: 1.1em;
}
#mainNav ul.submenu li:last-child a {
	border-bottom: none;
}
#mainNav ul.submenu li a:hover {
	background: rgb(123, 121, 143);
}

/*the icons*/
/*the a.name matches the class name of the different links*/
/*the imgs are 25 x 25 px and appear below the text*/
a.gallery{
background: url(../_images/icon_sprites_25.png) no-repeat center 30px;
}

a.gear{
background: url(../_images/icon_sprites_25.png) no-repeat center -69px;/*the icons are about 100px apart on the strip*/
}

a.interact{
background: url(../_images/icon_sprites_25.png) no-repeat center -170px;/*negative values move the image up along the graphic*/
}

a.shop{
background: url(../_images/icon_sprites_25.png) no-repeat center -270px;/*the horizontal value ("center") is to center the img with the text*/
}

/*set up for a smaller header graphic*/
.mission{
padding-left: 3.9%;
overflow: hidden;
background: url(../_images/sm_skyline.jpg) no-repeat;
margin-bottom: 3em;
position: relative;
}

/*"we love urban photography*/
.mission h1{
font-weight: bold;
font-size: 120%;
color: #fff;
letter-spacing: .1em;
text-align: center;
margin-top: 1 em;/*on the desktop, there's a large margin-top, here, we want it up further*/
}

.mission p{
width: 80%;
margin: 0 auto;
margin-top: 220px;
}

/*one column layout*/
article{
width: 92.2%;
padding: 0 3.9%;
}
article section{
border-bottom: 2px solid rgb(76, 67, 65);
margin-bottom: 1.6em;
overflow: hidden;
position: relative;
padding-bottom: 1.6em;
}

/*heading for all the gallerys*/
article h1{
background: url(../_images/icon_sprites_50.png) no-repeat right top;
padding: 20px 0 5px;
}

article h2{
font: 2.4em Cardo, Georgia, serif;
float: left;/*text to the left, img to the right*/
clear: left;/*dont let the other content stack beside it*/
margin-bottom: 0;
width: 40%
}

article p{
font-size: 1em;
margin: 0;
float: left;
clear: left;
width: 40%;
}

article p.pubdate{
font-size: 1em;
text-transform: uppercase;
float: left;
clear: left;
margin: 0 0 4em;/*bottom margin*/
width: 40%;
}
/*handles the image */
article .preview{
height: 175px;/*height of bkgrnd img*/
position: absolute;
top: 0;
right: 0;
width: 55%;/*img will be larger than the area; which will allow it to flex in size*/
}
.philly .preview{
background: url(../_images/sm_philly_banner.jpg) no-repeat;
}

.chicago .preview{
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}

.nyc .preview{
background: url(../_images/sm_nyc_banner.jpg) no-repeat;
}

/*aside styles*/
aside{
width: 92.2%;
padding: 0 3.9%;
}
aside section{
clear: both;
}
/*footer styles*/
#pageFooter{
clear:both;
overflow:hidden;
height: 150px;
}
}
/*desktop*/
@media only screen and (min-width:769px) {
	body{
	width: 90%;
	margin: 0 auto;
	min-width:1024px;
	max-width: 1280px;
}
/*header styles match the 165 to the height of the header used*/
header{
height:165px;
}

header h1{
font-size: 3.2em;
padding-left: 110px;
line-height: 165px;/*equal to the height of the header*/
margin-right: .5em;
float: left;
margin-left: 3.9%; /*fixes nasty 1px header fitting problem*/
display: inline;
background: url(../_images/desolve_logo.png) no-repeat left center;
}

header h2{
font-family: Cantarell, Arial, Helvetica, sans-werif;
font-style: italic;
font-weight: normal;
font-size: 1.4em;
color: #fff;
float: left;
text-transform: lowercase;
letter-spacing: .1em;
line-height: 165px;
}

/*nav codes for desktop*/
/*desktop/////////*/
#mainNav{
padding-left: 3.9%;/*the gutter on either side*/
margin-bottom:1em;
}
#mainNav li{
margin-right: 3%;/*push the li apart with a right margin*/
position: relative;
}
#mainNav a, #mainNav h3 {
	font-size: 1.2em;
	text-align: center;
	padding: 0 1em;
}
#mainNav a, #mainNav h3 {
font-size: 1.2em;
text-align: center;
/*padding-left: 15px;/*space for the icons*/*/
padding: 0 1em;
}
/*make a darker color to emphasize*/
#mainNav a em{
color: rgb(76, 67, 65);
}
#mainNav em{
font-size: .8em;
display: block;/*force it below the link text and gives it some space*/
text-transform: lowercase;/*change the font to further emphasize it*/
}

/*dropdown menu styles*/
#mainNav ul.submenu {
	float: none;
	width: auto;
	height: auto;
	position: absolute;
	top: 0;
	padding-top: 2.8em;
	left: -8000em;
	max-height: 0;
	-moz-transition:max-height 0.5s ease;
	-webkit-transition:max-height 0.5s ease;
	-o-transition:max-height 0.5s ease;
	transition:max-height 0.5s ease;
	overflow: hidden;
	z-index: 1000;
}
#mainNav ul.submenu li {
	float: none;
	margin: 0;
	background: rgb(76, 67, 65);
	background: rgba(76, 67, 65, .9);
}
#mainNav li:hover ul {
	left: 0;
	max-height: 20em;
}
#mainNav ul.submenu li a {
	border-bottom: 1px solid white;
	padding: .2em 1em;
	white-space: nowrap;
	color: white;
	text-align: left;
	font-size: 1.1em;
}
#mainNav ul.submenu li:last-child a {
	border-bottom: none;
}
#mainNav ul.submenu li a:hover {
	background: rgb(123, 121, 143);
}
/*the icons*/
/*the a.name matches the class name of the different links*/
/*the imgs are 25 x 25 px*/
a.gallery{
background: url(../_images/icon_sprites_25.png) no-repeat 0 3px;
}

a.gear{
background: url(../_images/icon_sprites_25.png) no-repeat 38px -98px;/*the icons are about 100px apart on the strip*/
}

a.interact{
background: url(../_images/icon_sprites_25.png) no-repeat 62px -197px;/*negative values move the image up along the graphic*/
}

a.shop{
background: url(../_images/icon_sprites_25.png) no-repeat 6px -297px;/*the horizontal values are to align the img with the text*/
}

/*mission statement section*/
/* mission styles*/
.mission {
	height: 350px;
	padding-left: 3.9%;
	overflow: hidden;
	background: url(../_images/gallery_banner.jpg) no-repeat;
	margin-bottom: 4em;
	position: relative;
}
/*mission statement*/
.mission h1{
font-size: 2.2em;
color: #fff;
padding-top: 290px;
letter-spacing: .1em;
}

.mission p{
width: 21%;
padding: 1% 1% 0;
height: 350px;/*same height as the mission region itself*/
font-size: 1em;
color:#fff;
background: rgba(123, 121, 143, .8);
position: absolute;
top: 0;/*put it at the top right*/
right: 0;
}

/*article styles notice that the padding-left matches the .mission to provide the same amount of gutter to the left*/
article{
float: left;
width: 70.1%;
padding-left: 3.9%;
}

article section {
border-bottom: 2px solid rgb(76, 67, 65);
margin-bottom: 2em;
}

/*article h1 is the top header*/
article h1{
background: url(../_images/icon_sprites_50.png) no-repeat right top;
padding: 20px 0 5px;
}
/*article h2 is the name of the gallery that it's in*/
article h2{
font: 2.8em Cardo, Georgia, serif;
float: left;
margin-bottom: .1em;
}
/*the Para inside*/
article p{
font-size: 1.2em;
margin: .8em 0;
}
/*floated the header to the left, so float the pubDate to the right*/
article p.pubdate{
font-size: 1.2em;
text-transform: uppercase;
float: right;
padding-top: .8em;
margin: 0;
}
/*the div tag*/
article .preview{
height: 250px;
clear: both;
}
/*the background images*/
/*using the classes applies to these sections and then applying the div tag .preview*/
.philly .preview{
background: url(../_images/philly_banner.jpg) no-repeat;
}

.chicago .preview{
background: url(../_images/chicago_banner.jpg) no-repeat;
}

.nyc .preview{
background: url(../_images/nyc_banner.jpg) no-repeat;
}
/*they have gallery here*/

aside{
float: right;
width: 19.1%;
padding-right: 3.9%;
}
/*footer styles*/
#pageFooter{
clear:both;
overflow: hidden;
height: 150px;
}

}

   /*old words form first iteration
#words1 {
	position: absolute;
	top:  0px;
	left: 0px;	
	}
#words2 {
	position: absolute;
	top:  00px;
	left: 10px;
		}
.ovaldog {
	position: absolute;
	top:  15px;
	left: 10px;
		}
.dogtitle{
	position: absolute;
	top:  40px;
	left:  0px;	
	}
.dogtitleShadow{
	position: absolute;
	top:  40px;
	left:  2px;	
	}
.cattitle{
	position: absolute;
	top:  85px;
	left:  6px;	
	}
.cattitleShadow{
	position: absolute;
	top:  85px;
	left:  8px;	
	}
.dog1 {color:#EDCC66;	}
.dog2 {color:#EE8B66;	}
.dog3 {color:#BAD2B8;   }
.dog4 {color:#FOE2B2;   }

#w00 {position: absolute; top:   0px; left:  42px;}
#w01 {position: absolute; top:  24px; left:  25px;}
#w02 {position: absolute; top:  45px; left:  62px;}
#w03 {position: absolute; top: 	78px; left:  74px;}
#w04 {position: absolute; top: 142px; left: 410px;}
#w05 {position: absolute; top: 	52px; left: 160px;}
#w06 {position: absolute; top:  15px; left:  42px;}
#w07 {position: absolute; top:  63px; left: 102px;}
#w08 {position: absolute; top:  38px; left:  66px;}
#w09 {position: absolute; top:  115px; left:410px;}

*/