@charset "UTF-8";
/***************************************************************************
RESET
***************************************************************************/

ul, ol, dl {
	padding: 0;
	margin: 0;
	list-style: none;
}
h1, h2, h3, h4, h5, h6, p {
	margin: 0 0 1em;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding: 0; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img {
	border: none;
}

a:link, a:visited {
	color: #9d9c9c;
}
a:hover, a:active, a:focus {
	color: #c23037; 
}
/***************************************************************************
STRUCTURE
***************************************************************************/
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #052d41;
	margin: 0;
	padding: 0;
}
#page-wrap {
	color: #9d9c9c;
	font-size: 0.75em;
	letter-spacing: 1px;
	width: 1025px;
	margin: 0 auto;
	position: relative;
}
#sidebar {
	width: 246px;
	height: 615px;
	padding: 36px 27px;
	background-color: #194664;
	position: fixed;
	top: 15px;
	box-shadow: 1px 1px 3px -1px #323232;
}
#top {
	background: url('images/BG/Line.png') no-repeat bottom;
	width: 641px;
	padding: 20px 0 27px;
	margin-bottom: 30px;
	color: #4b7387;
	font-size: 0.9em;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
}
#content {
	background-color: #194664;
	margin: 15px 0 18px 312px;
	width: 641px;
	min-height: 675px;
	padding: 0 36px 12px;
	font-size: 1em;
	box-shadow: 1px 1px 3px -1px #323232;
}
/***************************************************************************
SIDEBAR & NAVIGATIONS
***************************************************************************/
#logo {
	padding: 0 0 36px 1px;
}
#nav {
	font-size: 14px;
	line-height: 2em;
	height: 350px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-align: center;
}
#nav li {
	padding: 5px 0;
	text-transform: lowercase;
	position: relative;
}
#nav li a,
#nav li a:visited {
	color: #C5C5C5;
	text-decoration: none;
}
#nav li a:hover,
#nav li a:active,
#nav li a:focus {
	color: #c23037;
	text-decoration: none;
}
#nav li ul {
	display: none;
	font-size: 11px;
	line-height: 1em;
	text-align: center;
	text-transform: lowercase;
}
#nav li:active ul,
#nav li:focus ul,
#nav li:hover ul { 
	display: block;
}
#LDocs-page #Projects ul,
#NonProfits-page #Projects ul,
#hhn-page #Projects ul,
#music-page #Projects ul,
#InProgress-page #Projects ul,
#hightech-page #Projects ul {/*only subnav of projects pages shown*/
	display: block;
}
#nav li ul li {
	padding: 2px;
}
#Projects #subnav li a,
#Projects #subnav li a:visited {/*link of projects' subnav is blue*/
	color: #4b7387;
}
#Projects #subnav li a:hover,
#Projects #subnav li a:active,
#Projects #subnav li a:focus {
	color: #c23037;
}
#contactInfo {
	color: #4b7387;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-align: center;
}
#contactInfo a:link,
#contactInfo a:visited {
	color: #4b7387;
	font-style: italic;
	text-decoration: none;
}
#contactInfo a:hover,
#contactInfo a:active,
#contactInfo a:focus {
	color: #c23037;
	text-decoration: none;
}
/***************************************************************************
CURRENT-PAGE INDENTIFIER (text color changed to red)
***************************************************************************/
#home-page #Home a,
#about-page #About a,
#clients-page #Clients a,
#contact-page #Contact a,
#LDocs-page #Projects a,
#NonProfits-page #Projects a,
#hhn-page #Projects a,
#music-page #Projects a,
#InProgress-page #Projects a, 
#hightech-page #Projects a {
	color: #c23037;
}
#LDocs-page #Projects #LDocs a,
#LDocs-page #Projects #LDocs a:visited {
	color: #c23037;
}
#NonProfits-page #Projects #Non-Profits a,
#NonProfits-page #Projects #Non-Profits a:visited {
	color: #c23037
}
#hhn-page #Projects #HHN a,
#hhn-page #Projects #HHN a:visited {
	color: #c23037
}
#music-page #Projects #Music a,
#music-page #Projects #Music a:visited {
	color: #c23037
}
#InProgress-page #Projects #InProgress a,
#InProgress-page #Projects #Projects #InProgress a:visited {
	color: #c23037
}
#hightech-page #Projects #hightech a,
#hightech-page #Projects #hightech a:visited {
	color: #c23037
}
/***************************************************************************
GENERAL STYLING
***************************************************************************/
h5 {
	color: #4B7387;
	font-size: 12px;
	font-weight: normal;
}
h4 {
	font-size: 13px;
	text-transform: uppercase;
}
h1 {
	/*color: #4b7387;*/
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
	padding-bottom: 3px;
}
h2 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 0.5em;
	text-align: center;
	padding: 0 18px;
}
h3 {
	font-size: 1em;
	font-weight: normal;
	margin: 0 0 .5em;
}
p:first-line {
	text-transform: uppercase;
}
.bold-uppercase {
	font-weight: bold;
	text-transform: uppercase;
}
.title {
	font-style: italic;
	font-weight: bold;
}
.caption,
.backtoTop {
	color: #4b7387;
	font-style: italic;
	text-align: right;
	position: relative;
	top: -23px;
	right: 18px;
	font-size: 10px;
	float: right;
	width: 623px;
}
.caption a,
a.backtoTop {
	color: #4b7387;
}
.credit {
	color: #4b7387;
	font-style: italic;
	text-align: right;
	font-size: 10px;
	padding: 3px 9px 0;
}
.smallcapTitle {
	font-variant: small-caps;
	font-weight: bold;
}
.backtoTop {
	top: -6px;
}
.slider-wrapper, .media-frame {
	width: 572px;
	min-height: 322px; /*to keep frame from colapsing*/
	background: url(images/BG/Frame-M.png) repeat-y;
	margin: 50px auto;
	padding: 0 21px;
	position: relative;
}
.slider-wrapper:before, .media-frame:before {
	content: url(images/BG/Frame-T.png);
	position: absolute;
	top: -20px;
	left: 0;
}
.slider-wrapper:after, .media-frame:after {
	content: url(images/BG/Frame-B.png);
	position: absolute;
	bottom: -20px;
	left: 0;
}
.media-frame {
	height: 360px;
}
#content ul, #content ol {
	padding: 0 15px 18px;
}
.movies {
	text-align: left;
	width: 550px;
	margin: 0 auto;
}
.movies li {
	padding: 0 0 12px;
}
/***************************************************************************
MISCELLANEOUS
***************************************************************************/
.fltrt {
	float: right;
	margin: 6px 0 9px 18px;
}
.fltlft {
	float: left;
	margin-right: 18px;
	margin: 6px 18px 9px 0;
}
.fltctr {
	width: auto;
	text-align: center;
	padding: 18px 0 27px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}