/*colors
body background:#ffffff
links #400000
visited links #14632a
hover links: #BC5B3C
*/

body{font-family: "Verdana","Arial","Bookman Old Style","Times New Roman","Courier New";
	color: #400000;
	font-size: 14px;
	text-align: justify;
	line-height:1.5;
	margin: 0px,0px,0px,0px;
	background: #ffffff;	
	}
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;
}
a:link{font-family: "Comic Sans Ms", "Bookman Old Style", "Times New Roman", "Courier New";
	color:navy;
	font-size: 15px;
	}
a:visited{font-family: "Bookman Old Style", "Times New Roman", "Courier New";
	color:#14632a;
	font-size: 14px;
	}
a:hover{font-family: "Comic Sans Ms", Bookman Old Style", "Times New Roman", "Courier New";
	color: #00a0b0;
	opacity: 0.7
	}
a:active{font-family: "Comic Sans Ms", Bookman Old Style", "Times New Roman", "Courier New";
	color:#00a0b0;
	font-size: 14px;
	}
	/*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;
}
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.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.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;}

*/