/*
--------------------------------------------------
HASPhotography.com CATEGORY GLOBAL STYLES
Last revised 13 June 2007
--------------------------------------------------
*/
/*
--------------------------------------------------
Color palette:
--------------------------------------------------

White #fff
Black #000
Dark red #800000
Logo Blue #212b32 LIGHTER TONE (95%)
#343f46; Logo Blue EVEN LIGHTER TONE (65%)

Logo blue #0b161e TOO DARK

#7f0700; pantone 188c brighter red on home nav bar illus hex value (navbar on home)
#460400; Pantone 188c + 50%black (navbar home hover)
#4f110d; pantone 188c @ 95% with white added


#731513 Pantone 181c
770001 illus  781631 photoshop Pantone 506c 
5f0000 Pantone 505c
8e001c Pantone 202 


#9a1c1c   brighter red: 
9c231a    brighter red: 
#993300;  darkhoneybrown 
#993300;  darkorangy 
#cc3300;  brighterorange 
#ff9900;  gold 
#a9a9a9; gray 
#999;     Medium grey
#ddd;    very light grey
#1ab5cc; turquoise
#3f6166; turquoise green
#1b4166; darker green

*/
/*
--------------------------------------------------
GLOBAL RESET
--------------------------------------------------
undohtml.css (CC) 2004 Tantek Celik. Some Rights Reserved.
*/
:link, :visited { text-decoration: none }
ul, ol	{ list-style: none }
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em }
body, html, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, blockquote, img { margin: 0; padding: 0; }
a img, :link img, :visited img { border: none }
address { font-style: normal }

/*
--------------------------------------------------
DEFAULT HTML ELEMENTS
--------------------------------------------------
This section concerns generalizations and common elements
*/

body	{
		color: #fff; /* White */
		font: 14px/1.5 Helvetica, Arial, Verdana, sans-serif;
		text-align: center;	/* horizontal centering in Win IE */
		background: #000; /* Black */
		}
		

/* Links */

a		{
		text-decoration: none;
		}
a:link, a:visited	{
		color: #4f110d;/*#460400; /* Pantone 188c Navbar bkgrnd on hover + 50%black *//*#7f0700; home navbar reg bkgrnd color*/ /*White*/
		}
a:focus	{
		outline: none;
		-moz-outline: none;
		}
a:hover {
		color: #212b32; /* logo blue at 95% */
		/*background-color: #460400; *//* Pantone 188c Navbar bkgrnd on hover + 50%black / color: #ff9900;   gold */
		}
a:active {
		color: #cc3300; /* brighter orange */
		}


/* Headers */
h1, h2, h3, h4, h5, h6 {
		color: #ddd; /* very light grey */
		line-height: 1.5;
		margin: 1.5em 0 .75em;
		}
h1		{
		color: #800000; /* dark red */
		font-size: 24px;
		line-height: .875;
		margin: .875em 0;
		}
h2		{
		color: #343f46; /*Logo Blue EVEN LIGHTER TONE (65%)*/
		font-size: 22px;
		line-height: .9545;
		margin: .9545em 0;
		}
h3		{
		color: #343f46; /*Logo Blue EVEN LIGHTER TONE (65%)*/
		font-size: 18px;
		line-height: .857;
		margin: .857em 0 .857em;
		}

h4		{
		color: #343f46; /*Logo Blue EVEN LIGHTER TONE (65%)*/
		font-size: 14px;
		line-height: .75;
		margin: .857em 0 .857em;
		}


p		{
		margin-bottom: .75em;
		}

blockquote {
		margin: 1.5em;
		}

/* Lists */
ul ul, ol ol, ul ol { /* nested list indent */
		margin-left: 1em;
		}

/*
--------------------------------------------------
PAGE STRUCTURE
--------------------------------------------------
This section defines layout elements and respective environmental formatting
*/
#wrapper {
		text-align: left; /* reset Win IE workaround */
		width: 66em;
		margin: 0 auto; /* standard CSS horizontal centering if ie 6 didn't exist, this is the way it SHOULD be done*/
		padding: 0;
		background: transparent;
		}

#container { /* grouping for main content + sidebar */
	    line-height: 1.5;
		/*position: relative;*/
        height: 43.5em;
        margin: 0;
		padding: 0;
		background: transparent;
		}

#banner { /* logo + breadcrumbs + image navigation */
		height: 7.5em;
		margin: 0;
		background: transparent;
		}


#banner #logo span {
		visibility: hidden;
		}


/*
--------------------------------------------------
NAVIGATION
--------------------------------------------------
*/		
		
#navbar {
		color: #ddd; /* lightgrey */
		font-family: Helvetica, Arial, Verdana, sans-serif;
		/*font-weight: bold;*/
		text-align: center;
		width: 66em; /*924px;*//*with previous text did width of 710px; and padding of 107 on either side to compensate for
		left over pixels, and center the text in the nav bar - now with new text limiting the extra pixels,
		have to widen overall width and measure left over pixels, now only 180, and divide that among the padding
		on either side of first and last li, so put 90px on either side / actually finding that 72px (or 66 R and 
		74 L) of padding and width of 780 seems to work.  also equal to 924 overall width*/
		position: relative;
		float: left;
		padding: 0;/* was 107px; LR padding before added "Fine Art" to text; left over space of 249px /2 = 124 / size of font 10 = 12.4em */
		margin-top: 1.125em;
		margin-bottom: 1.125em;
		background: #7f0700;/* Pantone 188c red*/
		}

#navbar li { 
		position: relative;
		float: left;
		top: 0;
		left: 0; 
		}

#navbar li.last a {
		background: none;
		}

#navbar li a {
		color: #ddd; /* very light grey */
		font-size: 10px;
		line-height: 2.1;
		float: left;
		padding: 0 1.5em; /* previously RL padding .9545em; .2386363636em top-bottom padding */
		background: transparent url(../images/template/utility/nav-pipe.gif) no-repeat right;/* pantone 188c illus hex value*/ 
		}
#navbar > li:hover > a  {
		background: #460400; /* Pantone 188c + 50%black*/
		}

#navbar li a:hover {		
		background-color: #460400; /* Pantone 188c + 50%black*/
		}
#navbar li a.selected {
		background: #460400; /* Pantone 188c + 50%black*/
		}

/* Subnavigation */
#navbar li ol {
		display: none;
		position: absolute;
		top: 1.5em;
		left: 0;
		z-index: 20;
		margin-left: 0;
		background: transparent url(../images/template/utility/red/transparent-67.png);
		}
#navbar li:hover ol {
		display: block;
		}
#navbar li ol li a {
		text-align: left;
		width: 10em;
		background: none;
		}
#navbar li li a:hover {
		background: transparent url(../images/template/utility/dark/transparent-25.png);
		}		

/* Image set subnavigation */
#navbar #image_nav { /* nested list used for image navigation */
		position: absolute;
		top: 0;
		right: 0;
		}


#navbar #image_nav li.previous a {
		padding-left: 1.5em;
		background: transparent url(../images/template/utility/arrow-left.gif) no-repeat left;
		}
#navbar #image_nav li.next a {
		margin-right: 1.05em;
		padding-right: 2.1em;
		background: transparent url(../images/template/utility/arrow-right.gif) no-repeat right;
		}
#navbar #image_nav li a:hover {		
		background-color: #460400; /* Pantone 188c + 50%black*/
		}

/* Main content */

#content {
		margin: 1.5em 0 0 0;
		background: transparent;
        height: 33.5em;
        position: relative;
		}

#full	{
		width: 35em; /* orig 33em; but add 6em by reducing size of panel thumbnails by 1 tn which is 6em*/
        height: 32.75em;/*360px; 24.75em; *//* orig 21.75em; add 3em here,try make vert as tall as horz; 6em was too much*/
		position: relative;
        float: left;/*float: right;*/
        margin: 0 1.5em 0 0;
		background: transparent; /* Very dark grey */
		}

#full .gallerypic {/*img size 400px h max / width for horiz will prob be 539px/ width for vert 299px*/
		height: 33.5em;/*360px;orig 21em added 3 try increase vert height*/
		/* if not centered in IE 6, try text-align: center */
		}
#full div.copyright { /*needs to be div otherwise inherits from p.firstline*/
		font-style: italic;
		font-weight: normal;
		font-size: 10px;
		line-height: 2.1;
		position: absolute;
		right: 0;
		bottom: 6.5em;
		}

/*#full p:first-line {
		color: #ddd;
		font-size: 14px;
		line-height: 1.5;
		}
	*/

#panel	{
		width: 29.5em;/* orig 31.5em; reduce by 6em the size of one thumbnail*/
		height: 32.75em; /*360px; 4.75em;*/
        position: relative;
		float: right; /*float: left;*/
		margin: 0;
		background: transparent;
		}

#panel p {
		color: #9DA4A7; /*#ddd; lightgrey #BBC2C7; dk grey 88% drker than logo blue */
		font-size: 12px;
		line-height: 1.75em;
		font-family: Arial, Helvetica, Verdana, sans-serif; 
		font-weight: normal;
		text-align: justify;

		}
		
		
#content #panel h1 {
		color: #343f46; /*Logo Blue EVEN LIGHTER TONE (65%)*/
		font-size: 20px;
		line-height: 1.05;
		text-align: left;
		margin: 1em 0 .2142857em 0;
		}

#content #panel h2 {
		color: #343f46; /*Logo Blue EVEN LIGHTER TONE (65%)*/
		font-size: 14px;
		line-height: 1.5;
		text-align: left;
		margin: 0 0 .857em;
		}
		




/* Thumbnail Slideshow */

#gallery {
	position: absolute;
	bottom: 0;
	left: 0;
	}
#gallery ul {
		
		}

#gallery ul li { 
		display: inline; 
		}
		
#gallery ul li img {
		width: 78px;
		height: 95px;
		padding: 0;
		margin: 0 1px 0 0;
		background: transparent;
		}
		
#gallery ul li.first {
		margin: 0 0 0 126px;
		padding: 0; 
		}
#gallery ul li.last {
		margin: 0;
		padding: 0;
		
		}


/* Footer */
#footer	{
		font-family: Helvetica, Arial, Verdana, sans-serif; 
		font-size: 11px;		
		margin-bottom: .525em;
        background-color: #172229; /*logo bgrk dark #3E4D47; LOGO Blue + White */
        clear:both;
        height: 21px; /*1.05;*/
        overflow:hidden;
		}
#footer li { 
		float:left;
		}
#footer li.last a, #footer li.last a:hover {
		padding: 0; /*previously had padding but with heavier font, no longer needed*/
        background-image:none;
		}
#footer li a {
		color: #650000; /*#9DA4A7; #ddd; lightgrey */
		font-weight: heavy;
		line-height: 21px; /*1.05;*/
		padding: 0 10px 0 10px; /* previously RL padding .9545em; 2386363636em top-bottom padding */
		background: #172229 url(../images/template/utility/nav-pipe.gif) no-repeat right;/* pantone 188c illus hex value*/ 
        display:block;
		}
#footer li a:hover {		
		color: #800000; /*same as nav bar - formerly very white #fff;*/
		background: #0E151A url(../images/template/utility/nav-pipe.gif) no-repeat right; /*dk logo blue (#17229+62%blk) #111A1F; /*dk logo blue  (#172229)+ 25%blk  PREVIOUSLY #212b32; logo blue at 95% */
		}
#footer li a.selected {
		background: #0E151A url(../images/template/utility/nav-pipe.gif) no-repeat right; /*dk logo blue (#17229+62%blk) */
		}		

/*	Utility elements */
.hidden { /* completely remove from layout */
		display: none !important;
		}

.invisible { /* does not display but remains in layout flow */
		visibility: hidden;
		}

.clip	{
		overflow: hidden;
		}

.scroll {
		overflow: auto;
		}

.clear	{
		height: 0;
		clear: both;
		}

/*
--------------------------------------------------
FORMATTING STYLES
--------------------------------------------------
Positional, text, font, and miscellaneous formatting not defined in environmental contexts
*/
/* Positional elements */
.center {
		text-align: center;
		}
.flush-right {
		text-align: right;
		}
.justify {
		text-align: justify;
		}		
.inline {
		display: inline;
		}
.floatLeft {
		float: left;
		}
.floatRight {
		float: right;
		}
.allPad {
		padding: .75em;
		}
.leftPad {
		padding: 0 0 .375em .75em;
		}
.rightPad {
		padding: 0 .75em .375em 0;
		}
.bottomPad { /* also use to provide paragraph spacing in IE Win */
		padding-bottom: .75em;
		}
.trim	{
		margin: 0;
		padding: 0;
		}