/* ------------------------- CSS Document -------------------------*/
body {margin: 0 auto; padding: 0;}
/*body {background-image: url('images/damask50s.gif'); } */
body#home {background:url(images/damaskhome.gif)}
body#art {background:url(images/damaskart.gif)}
body#photo {background:url(images/damaskphoto.gif)}
body#bio {background:url(images/damaskbio.gif)}
body#contact {background: url(images/damask50s.gif)}


#container {
	text-align:center; 
	width:960px;
	margin:auto;} /* Holds all elements in a box also centers ratio div */


/*---------------------- Navigation bar Logo -----------------------*/

img.logo {width: 125px;}
a.logo {}
#TopNavBarLogoFix {
	position:fixed; 
	z-index:900; 
	margin-top:45px; 
	width:960px;}

/* ---- Navgation Bars bottom and top DIvs ----*/

#NavBarTop /*holds link container keeps vertical alignment */ 
	{
	position: fixed; z-index:900; 
	margin-left: auto; margin-right: auto;
	width:960px;
	text-align: center; 
	}
	
#NavBarBot {
	position:relative; top:-25px;z-index:900;
	width:960px;
	margin-left: auto; margin-right: auto;
	text-align: center;
	z-index:999;
	}

/*------ Navigation bar Links -----*/

ul.link /*cotainer for links*/
	{
 	list-style-type: none;
	margin: 0px;
    padding: 0px;
    overflow: hidden;
	}
li.logo {float:left; width:20%;}
li.link {float: left; width: 20%;margin-top: 45px;} /* 5 links */
li.alink {float: left; width: 25%;} /* 4 links */
li.40link {float:left; width:20%;}

a.plink /* shows current page */
	{ 
	display: block;
    width: 100%;
    font-weight: bold;
    color: #fff;
    background-color: #300; 
	opacity:0.75;
	filter:Alpha(opacity=.75); /* IE8 and earlier */
	border-top:3px double white;
	border-bottom:3px double white; 
    padding: 5px 0px;
    text-transform: uppercase;
	text-align: center;
	white-space:nowrap;
	} 

a.backlogolink
	{ 
	display: block;
    width: 100%;
    font-weight: bold;
    color: #301A09;
    background-color: #301A09; 
	opacity:0.75;
	filter:Alpha(opacity=.75); /* IE8 and earlier */
	border-top:3px double white;
	border-bottom:3px double white; 
    padding: 5px 0px;
	text-align: center;
    text-decoration: none;
    text-transform: uppercase;
	white-space:nowrap;
	}
	
a.slink /* hides text for navigation bar. Used for behind logo and no links on bottom Nav. bar*/ 
	{  
    width:100%;
	display: block;
    width: 100%;
    font-weight: bold;
	opacity:0;
	filter:Alpha(opacity=0); /* IE8 and earlier */
	border-top:3px double white;
	border-bottom:3px double white; 
    padding: 5px 0px;
    text-transform: uppercase;
	text-align: center;
	white-space:nowrap;
	}
	
a.logo { }
	
a.link:link, a.link:visited /* current link style */{
    display: block;
    width: 100%;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #301A09; 
	opacity:0.75;
	filter:Alpha(opacity=.75); /* IE8 and earlier */
	border-top:3px double white;
	border-bottom:3px double white; 
    padding: 5px 0px;
	text-align: center;
    text-decoration: none;
    text-transform: uppercase;
	white-space:nowrap;
	}

a.link:hover, a.link:active { background-color: #e4cab3; color: #301A09; }



/* ---------------------------- content box ----------------------------*/

#Ratio /* makes div the ratio of background images for content. This part is for the width. */
	{
	position:relative; top:45px; z-index:-9999;
    width: 960px;
	display: inline-block;
	}
#Ratio:after /* makes div the ratio of background images for content. This part is for the height. padding top is 9/16 ratio of upper width */ 
	{
    padding-top: 56.25%;
    display: block;
    content: '';
	}

#ContentImg 
	{
	background: no-repeat;
	background-size: contain;
	position:  absolute;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 960px;
	}
	
#Content {position:fixed; z-index:100; top: 80px;
	 width: 960px; }


/*************************************
 * Basic lightbox styles. Notice the
 * default 'display' is 'none'.
 */

.lightbox {
  display: none;/* Hide the lightbox */

  /* Apply basic lightbox styling */
 position: fixed;left: 0;top: 0;
  z-index: 9999; 
  width: 100%;
  height: 100%;
  text-align: center;
  background: black;
  background: rgba(0,0,0,.9);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 100%;
  max-height: 550px;
  margin-top: 64px;
  margin-left: auto;
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

a {text-decoration: none; text-align: center;}
p {text-align:left;}


/* ---------------------------- difffernt page content  ----------------------------*/
/*--------------- Art  ------------------------ */
#Art {margin:400px;}
a.artlink {
	
    width: 300px;
    font-weight: bold;
    color: #fff;
    background-color: #300; 
	opacity:0.75;
	filter:Alpha(opacity=.75); /* IE8 and earlier */
    padding: 5px 0px;
    text-transform: uppercase;
	text-align: center;
	white-space:nowrap;
	} 
/*--------------- Weddings  ------------------------ */
#Wed{
	margin-top:50px; 
	margin-left:25px;
	width:600px;}
#WedDescript  /*div for title and description of page*/
	{
	width: 250px; 
	height: 400px;
	background:#300;
	padding: 10px;
	float:left;	
	margin-Left: 10px;
	opacity:0.5; 
	filter:Alpha(opacity=.5); /* IE8 and earlier */
	text-align: left; 
	color:#FFF;
	}
#WedGallery
{
	float: left; 
	position:relative; 
	z-index:999; 
	width:200px; 
	margin-left: 30px; 
	margin-top:60px;
	} /*container div for Gallery and lightbox*/
h2.wedding {text-align:center;}
h3.galexamp {color:#301A09;}
p.weddescript {text-align:center;}



/*--------------- Portraits  ------------------------ */

#PortContent {
	color: #301A09;
	width: 960px;
	}

#PortDescript {
	width: 300px;
	height: 200px;
	background:#301A09;
	padding: 10px;
	float:right;	
	margin-left: 600px;
	margin-right: 45px;
	margin-top: 30px;
	opacity:.75; 
	filter:Alpha(opacity=.75); /* IE8 and earlier */
	text-align: left; 
	}
#PortGallery {
	width:500px;
	float: right;
	text-align:center;
}
#KidsGallery {
	width: 150px; 
	float:left; 
	text-align: center;
}
#NewbornGallery {
	width: 200px;
	float:left; 
}
#FamSeniorGallery { 
	width: 150px;
	float: left;
	color: #fff;
}


h2.Porttitle {color: #fff; text-align: center; margin: 0 0;}
li.portdescript {color: #fff; }
ul.portdescript {color: #fff;}
p.portdescript {color: #fff; text-align: center; margin: 10px 0;}







/*--------------- Commercial  ------------------------ */

#Com {
	background: green;
	margin-top:50px; 
	margin-left:25px;
	width:960px;} /* Div Box for inside Content */

#ComDescript /*div for title and description of page*/
	{
	float:left;
	margin-left: 5px;
	margin-top: 180px;
	padding: 5px;
	width: 250px; 
	opacity:0.8; 
	filter:Alpha(opacity=.8); /* IE8 and earlier */
	text-align: left; 
	color:#FFF;
	}

h2.comtitle /*Commercial Photography header */
	{
	text-align:center; 
	margin: 20px 0;
	color:#FFF; 
	white-space:nowrap; 
	opacity:0.8; 
	filter:Alpha(opacity=.8); /* IE8 and earlier */
	}

p.comdescript /*description of page */
	{
	text-align:left; 
	font-size: medium; 
	opacity:0.8; 
	filter:Alpha(opacity=.8); /* IE8 and earlier */
	}
ul.comdescript /*list container of items */
	{
	width: 20%; 
	list-style-type: square; 
	color:#FFF; 
	text-transform: capitalize;
	opacity:0.8; 
	filter:Alpha(opacity=.8); /* IE8 and earlier */ 
	white-space:nowrap;
	}
	
li.comdescript {width:100%;font-size: medium;}/*list of items in ul box*/


#ComGallery {
	position:relative; z-index:999; 
	float:right; width:100px; 
	margin-top: 10px; 
	margin-right:50px;} /*container div for Gallery and lightbox*/

h3.galexamp /*Gallery Header */ {
	color: #FFF;
	opacity:0.8; 
	filter:Alpha(opacity=.8); /* IE8 and earlier */ 
	text-align:center;
	
	}


/*--------------- Documents  ------------------------ */

#Doc {
	width: 250px;
	height: 400px;
	background: #301A09;
	margin-left: 150px;
	margin-top: 40px;
	opacity:0.5; filter:Alpha(opacity=.5); /* IE8 and earlier */
}
#DocLinkLegal{ 
	text-align: center;
	width: 250px;
	height: 300px;
	
	}

#DocLinkQuest {
	width: 250px;
	text-align: center;
	}	

ul.doclink {
	list-style-type: none;
	margin: 0;
    padding: 0px ;
    overflow: hidden;
	text-transform:capitalize;
	color:#fff;
	white-space:nowrap;
	}
a.doclink /*  */
	{ 
    padding: 5px 0px;
	color:#fff;
	font-weight: bold;
	text-align: center;
    text-decoration: none;
    text-transform:none;
	white-space:nowrap;
	}
a.doclink:hover, a.link:active { color: #F60; }
li.doclink {width: 100%;}	

h1.title {
	color:#FFF;}

/* ---------------------------- Calander ----------------------------*/
p.center {}	
#Cal {
	width:960px;  
	margin-top: 55px;
	margin-left: 265px; }


/* ---------------------------- Bio ----------------------------*/
#Bio {margin:100px 200px;}
BioGallery {float:left; width:200px;}
img.bioimg {float:left; padding-left: 20px; padding-right: 10px;}
H2.Biotitle {float:clear; width:100%;color: #FFFFFF;
	font-weight: bold;
	text-align: center;
    text-decoration: none;
    text-transform:none;
	white-space:nowrap;}
	
p.biodescript {float:left; Margin-top=-30px; width:200px; color: #FFFFFF; opacity:0.75; filter:Alpha(opacity=.75); /* IE8 and earlier */

	text-align:center;}