/*
Alyssa Bistonath Photography

Lovingly designed and coded by John Mani
	JOHN MANI, 2009
	www.johnmani.com
	
	
	Colours:
		NavOff Text #e3dad0
		NavPortfolio #b2aeb4
		Pink #f3d4dd
		Wrap #edebec
		Off-white Background #fafafa
		border #dedbd2
		article titles #274053
		Links #
		Light Grey #909090



*/


/*RESET*/
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td 
	{ 
	padding: 0;
	margin: 0;

	}
fieldset, img { 
	border: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
ol, ul {
	list-style: none;
	}
address, caption, cite, code, dfn, em, strong, th, var {
	font-weight: normal;
	font-style: normal;
	}
caption, th {
	text-align: left;
	}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
	}

q:before, q:after {
	content: '';
	}
abbr, acronym { 
	border: 0;		
	}
	
.clear {clear: both;}




/*Typography*/

body a 	{
		font-family: Georgia, Times; font-size: 1.0em; color: #909090; font-weight: normal;
		text-decoration: none; 
		}

html 	{
    		
		} 
		
h2	{
	font-size: 1.4em;
	margin-top:10px;
	}	
	
h3	{
	font-size: 1.2em;
	margin-top:0px;
	color: #662499;
	}	

h3	a{
	font-size: 1.2em;
	margin-top:15px;
	color: #662499;
	}	


#title	{
		margin: 0 0 10px 0;
		font-size: 1.2em;
		color: #274053
		}
		
#title2	{
		margin: 0 0 10px 0;
		font-size: 1.44em;
		color: #274053
		}

.metadata	{
			color: #909090;
			margin: 0px 0px 0px 0;
			font-family: arial; font-size: 0.8em;
			text-transform: uppercase;
			}

.metadata a	{
			color: #909090;
			margin: 0px 0px 20px 0;
			font-family: arial; font-size: 1.0em;
			text-transform: uppercase;

			}

.centerd {	
			height: 70px;
			margin-top: 15px;
			margin-bottom: 30px;
			border-left-style: hidden;
			border-right-style: hidden;
			border-top-style: hidden;
			border-bottom: #999999;
			border-width: 1px;
			border-bottom-style: dotted;
		}

.article 	{
			
			}

.article p	{
			margin: 10px 0 10px 0;
			}

.comments	{
			font-size: 1.0em;
			margin: 10px 0 0 0;
			}

#comments 	{
			font-size: 1.4em;
			margin: 30px 0 15px 0;
			color: #274053
			}

.commenttext	{
				}

li.commentalt 	{
				padding: 15px;
				}

li.comment {
			padding: 15px;
			-moz-border-radius-bottomleft:5px;
			-moz-border-radius-bottomright:5px;
			-moz-border-radius-topleft:5px;
			-moz-border-radius-topright:5px;
			-webkit-border-bottom-left-radius:5px;
			-webkit-border-bottom-right-radius:5px;
			-webkit-border-top-left-radius:5px;
			-webkit-border-top-right-radius:5px;

			background-color:#E6E6E6;
			}
label	{
		font-size: 0.9em;
		}

.button	{
			-moz-border-radius-bottomleft:5px;
			-moz-border-radius-bottomright:5px;
			-moz-border-radius-topleft:5px;
			-moz-border-radius-topright:5px;
			-webkit-border-bottom-left-radius:5px;
			-webkit-border-bottom-right-radius:5px;
			-webkit-border-top-left-radius:5px;
			-webkit-border-top-right-radius:5px;
		background-color: #ffd62a;
		padding: 5px;
		font-family: Georgia;
		}

span.codedirection { unicode-bidi:bidi-override; direction: rtl; }


/*HEADER*/



h1#header	{
		background-image: url(images/headerbackground.jpg); background-repeat: no-repeat;
		height: 185px;
		width: 961px;
		position: relative; top: 0px; left: 0px; 
		margin: 0px 0px 0px 0px;
		text-indent: -9999px;
			}
			
#titlehead	{
		width:673px;
		height:87px;
		position: absolute; top: 75px; left: 134px;
		}




/*NAVIGATION*/

#navigation {
			
			position: absolute; top: 28px; left: 420px; 
			font-family: arial; font-weight: bold; font-size: 0.9em; 
			color: #beb0a3;
			text-align: right;
		
			}


#navigation a {
			
			font-family: arial; font-weight: 200; font-size: 1.0em; 
			color: #beb0a3; padding-bottom: 3px;
			
			}
			
#navigation .span {
			
			font-family: arial; font-weight: 200; font-size: 1.0em; 
			color: #beb0a3; padding-bottom: 3px;
			
			}
			
#navigation a:hover {
					color: #8d6292;
					}			

.inline 	{display: inline;}

ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:0px}
ul.menu ul {position:absolute; top:20px; left:0; /*background:#d1d1d1;*/ display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #dedbd2; border-top:none; width:100px; margin:0}
ul.menu ul li a {display:block; padding:5px 7px 5px; background-color:#fafafa;}
ul.menu ul li a:hover {background-color:#f0f0f0;}
ul.menu ul ul {left:108px; top:-1px}
ul.menu .menulink0 {border:0px solid #aaa; padding:0px 0px 0px; font-weight:normal; /*background:url(images/header.gif);*/ width:49px; text-align: left;}
ul.menu .menulink1 {border:0px solid #aaa; padding:0px 0px 0px; font-weight:normal; /*background:url(images/header.gif);*/ width:50px; text-align: left;}
ul.menu .menulink2 {border:0px solid #aaa; padding:0px 0px 0px; font-weight:normal; /*background:url(images/header.gif);*/ width:74px; text-align: left;}
ul.menu .menulink3 {border:0px solid #aaa; padding:0px 0px 5px; font-weight:normal; /*background:url(images/header.gif);*/ width:44px; text-align: left;}
ul.menu .menulink4 {border:0px solid #aaa; padding:0px 0px 0px; font-weight:normal; /*background:url(images/header.gif);*/ width:36px; text-align: right;}
ul.menu li .portfolio {padding:3px 7px 5px; color: #b2aeb4; font-weight: bold; }


ul.menu .menulink:hover, ul.menu .menuhover {/*background:url(images/header_over.gif)*/}
ul.menu .sub {/*background:#d1d1d1 url*/(images/arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}



/*BODY*/

body	{
				background-image: url(images/background.jpg); background-repeat:repeat;
				font-family: Georgia, Times; font-size: 0.8em; color: #303030; font-weight: normal;	
				text-decoration: none;
				min-height: 100%;
				
		}

#background {
			min-height: 100%;
			
		/*	background-image: url(images/sidebarbackground.jpg); background-repeat: repeat-y; background-position: right;
			position: relative; top: 0px; left:1px;
			
			min-height: 100%;
			padding: 0px 0 0 0px;
			padding-bottom: -20px;
			text-indent: 20px
			
		*/	
			}

		
		
#pagewrap	{
			background-image: url(images/background.jpg); background-repeat: repeat;		
   			min-height: 100%;
			width: 961px;
			margin-left: auto; margin-right: auto; 
			position: relative; top:0px; 
			margin-bottom: 100px;
			}

#maincontent	{
				
				position: relative; top:-1px; 
				width: 961px; 
				min-height: 100%;
				
				}

#gallerycontent	{
				
				position: relative; top:-1px; 
				width: 961px; 
				min-height: 643px;
				
				}


#articlecontent {
				float: left;
				position: relative; 
				width: 698px;/* total width of content section + border = 750px (have to reduce for padding) */
				min-height: 602px; 
				background-color: #f9f9f9;
				border-style:solid;
				border-left-color: #dedbd2;
				border-right-color: #dedbd2;
				border-bottom-color: #dedbd2;
				border-top-style: hidden;
				border-width: 1px;
				padding: 40px 20px 0px 30px; 
				line-height: 1.7em;
				
				}

#gallerywindow {
				float: left;
				position: relative; 
				width: 698px;/* total width of content section + border = 750px (have to reduce for padding) */
				min-height: 602px;
				background-color: #f9f9f9;
				border-style:solid;
				border-left-color: #dedbd2;
				border-right-color: #dedbd2;
				border-bottom-color: #dedbd2;
				border-top-style: hidden;
				border-width: 1px;
				padding: 40px 20px 0px 30px; 
				line-height: 1.7em;
				z-index: 100;
				}


#sidebar	{
			float: right;
			background-image: url(images/sidebarbackground.jpg); background-repeat: repeat-y;
			position: relative; top: 0px; left:1px;
			width: 208px;
			min-height: 90%;
			padding: 0px 0 0 0px;
			color: white;
			text-indent: 20px;
			font-family: arial; font-size: 0.8em;
			z-index: 1;
			}
			
#sidebar a	{
			color: #e3dad0;
			font-family: arial;
			}


/*  GALLERY  */

#main_img {}
.galleria {position: absolute; top: 68px; left: 775px; list-style:none;width:200px; z-index: 100;}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 3px 3px 0; z-index: 200;}
.galleria li a{display:none; z-index: 300;}
.galleria li div{position:absolute;display:none;top:0;left:680px;}
.galleria li div img{cursor:pointer; z-index: 400;}
.galleria li.active div img,.galleria li.active div{display:block; }
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto; z-index: 500;}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */
img.replaced {display: block; margin-left: auto; margin-right: auto;}
.galleria_container {text-align: center;}
.cap {position: absolute; top: 400px; left: 100px;}

/*RESET*/
/*FOOTER*/

.footerpoem {
			position:relative; top: 10px; left: 150px;
			font-family: arial; font-weight: 200; font-size: 1.0em; 
			color: #beb0a3;
			width: 470px;
			
			}

.john		{
			position: relative;
			float:right; right: 2px; top: 5px;
			font-family: arial; font-weight: 200; font-size: 1.0em; 
			color: #b2aeb4;

			
			}