/*
--------------------------------------------------
HASPhotography.com CATEGORY GLOBAL STYLES
Last revised 31 Jan 2015
--------------------------------------------------
*/
/*
--------------------------------------------------
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: 86em; /*orig 66em but added 10 to both panel and full so need to add 20 here)*/
		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: 86em; /*now 1204px - was 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: 13px;/*was 10px*/
		line-height: 2.1;
		float: left;
		padding: 0 2.5em; /* was 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.9em;/* was 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: 15em; /*was 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: 43.5em; /* was 33.5em* was 469px -now 609px*/
        position: relative;
		}

#full	{
		width: 55em; /* 770px - orig 35em (adding 20em taking 10 off panel)/ 33em; but add 6em by reducing size of panel thumbnails by 1 tn which is 6em*/
        height: 43.5em;/*approx 609px- was 32.75em (approx 560px) 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: 43.5em;/*orig 33.5em (but adding 10 em everywehre) 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: -12em;/*was 1.5em - orig 6.5em (but adding 10em to everything)*/
		}

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

#panel	{
		width: 29.5em;/* orig 29.5em (keeping same - making full 20em wider) 31.5em; reduce by 6em the size of one thumbnail*/
		height: 50em; /*formerly: 40em (adding 10em everywehre) 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: 14px;		
		margin-bottom: .525em;
        background-color: #021c2c; /*UPDATING to be same as TOP LOGO/ OLD: #172229/logo bgrk dark #3E4D47; LOGO Blue + White */
        clear:both;
        height: 25px; /*was 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: #ff6600; /*OLD RED: #650000 / #9DA4A7; #ddd; lightgrey */
		/*font-weight: heavy;*/
		line-height: 25px; /*was 21px - matching above - 1.05;*/
		padding: 0 25px 0 25px; /* was 10px - previously RL padding .9545em; 2386363636em top-bottom padding */
		background: #021c2c url(../images/template/utility/nav-pipe.gif) no-repeat right;/* UPDATING to be same as TOP LOGO / OLD: #172229 / 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;
		}