/*
Little City

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: "arial", arial; font-size: 1.0em; color: #bb6632; font-weight: normal;
		text-decoration: none; 
		}

html 	{
    		
		} 
		
h2	{
	font-family: "arial"; color: white; font-weight: normal;	
	font-size: 3.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;
	}	

h4	{
	font-size: 2.5em;
	margin-top:15px;
	color: white;
	}		
h4	a{
	font-size: 1.0em;
	margin-top:15px;
	color: white;
	}	
	
h5	{
	font-size: 1.5em;
	margin-top:15px;
	color: white;
	}		
h5	a{
	font-size: 1.0em;
	margin-top:15px;
	color: white;
	}	
	
h6	a{
	font-size: 1.0em;
	color:#bb6632 ;
	position: relative; top: 10px;		
	 }	
	
.hover	a:hover{color: white;}

#city	{
		font-size: 5.2em;
		margin-top:0px;
		color: #464646;
		margin-left: 32px;
		position: relative; top: 63px;
		z-index: 10;
		}

#sponsor{
		font-size: 1.8em;
		margin-bottom:10px;
		color: white;
		margin-left: 40px;
		position: relative; top: 0px; left: -40px;
		z-index: 10;
		border-bottom: white; border-style: solid; border-width: 8px;
			border-left-style: hidden; border-right-style: hidden; border-top-style: hidden;
			padding-bottom: 5px;
			width: 300px;
		text-indent: 0px;
		}	

#title1	{
		margin: 0 0 10px 0;
		font-size: 1.2em;
		color: #274053
		}
		
.title2	{
		margin: 0 0 40px 0;
		font-size: 3.8em;
		color: #0b0b0b;
		}

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

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

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

.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:#c6e0df;
			}
label	{
		font-size: 0.9em;
		}

.button	{
			background-image: url(images/button.gif);
			width:232px;
			height: 28px;
			margin-left: auto;
			margin-right: auto;
			text-indent: -9999px;
			text-decoration: none;
			border: none;
							
		}

.link {
		color: #d07136;
	  }


.anchor	{
		padding:25px;
		}


/*HEADER*/


#header {
		background-image: url(images/header.jpg); background-repeat: no-repeat;
		height: 275px; width: 977px;
		text-indent: -9999px;
		}
#header-content	{
				background-color: #bac1b2;
				width: 977px;
				height: 0px; /*was 200px */
				}
				
#storeheader-content	{
				background-color: #bac1b2;
				width: 977px;
				height: 0px; /*was 200px */
				}


#girl	{
				
				width: 415px;
				height: 457px;
				z-index: 10;
				position: relative; top: -268px; left:0px;
				}


#featured	{
			position: relative; left: 435px; top: -570px;
			width: 500px;
			z-index: 1;
			height: 30px;
			}
			
#featured img{
			margin-right: 15px;
			}
			
			
#feature_title	{
			margin-bottom: 10px;
			width: 500px;
			z-index: 1;
			border-bottom: white; border-style: solid; border-width: 8px;
			border-left-style: hidden; border-right-style: hidden; border-top-style: hidden;
			padding-bottom: 5px;
			}
		
#fold {
		background-image: url(images/fold.jpg); background-repeat: no-repeat;
		height: 124px; width: 977px;
		;
		
					}	
						

#sky	{
		background-image: url(images/sky.jpg); background-repeat: repeat-x;
		height: 182px;
		width: 100%
		position: absolute; top: 0px; left: 0px; 
		margin: 0px 0px 0px 0px;
		text-indent: -9999px;
		z-index: 10;
		
		}

#title	h1{
		background-image: url(images/title.jpg); background-repeat: no-repeat;
		height: 91px;
		width: 209px;
		position: relative; top: -265px; left: 20px; 
		margin: 0px 0px 0px 0px;
		text-indent: -9999px;
		
			}
			
#titlehead	{
		background-image: url(images/title.jpg); background-repeat: no-repeat;
		width:209px;
		height:91px;
		position: relative; top: -265px; left: 20px;
		
		}






/*SerialScroll*/
.next, .prev{
	cursor:pointer;
}

#screen{
	position:relative;
	height:325px;
	width:100%;
	margin-top:50px;
}
	#screen .next, #screen .prev{
		position:absolute;
		top:200px;
	}
	#screen .prev{
		left:10px;
	}
	#screen .next{
		right:20px;
	}
	#navigation{
		position: absolute; left: 580px; top: -2px;
		font-family: arial; font-size: 2.5em;
		width:400px;
		text-align:center;
		margin-left:62px;
		z-index: 11;
	}
		#navigation ul{
			margin-left:55px !important;
			margin-left:35px;
		}
			#navigation li{
				float:left;
				margin:0 0px;
				
				
			}
				#navigation a{
					color:white;
					text-decoration:none;
				}
				
				#navigation a .yellow{
					color:#fbdb15;
					text-decoration:none;
				}
				.yellow {color: #fbdb15;}

				
				
#sections{
	position: absolute; top: -200px;  
	overflow:hidden;
	
	width:100%;
	height:500px;
	clear:left;
	margin-left:0px;
	opacity:1.0;
}
	
	#sections ul{
		width:3660px;
	}
	
		#sections li{
			float:left;
			padding:0px;
		}
			#sections li.fallen{
				margin-top:369px;
			
			
			}
			
			#sections li.home{
			position: absolute; left: 100px; 
				background-image: url(images/home1.gif); background-repeat: no-repeat;
				height: 500px;
				width: 1020px;
				position: relative; left:2px; top: -7px;
				z-index: 10;
				
			
			}
			#sections li.about{
				background-image: url(images/about1.gif); background-repeat: no-repeat;
				width: 866px;
			}
			
			
			.girl 	{
					background-image: url(images/girl.gif); background-repeat: no-repeat;
					position: absolute; top: 110px; left: 33px;
					z-index: -2;
					width: 367px;
					height: 355px;
					}
			
			#sections p{
				width:550px;
				margin:200px 0px;
				font-size:85%;
				line-height:1.4em;
			}
			
			#sections p{
				position: relative; left: 400px; top: 55px;
				width:550px;
				margin:200px 0px;
				font-size:85%;
				line-height:1.4em;
			}
			
			#sections h2{
				color:#993333;
				margin:20px 0pt;
			}
			#sections a{
				color:#777;
				font-weight:bolder;
				text-decoration:none;
			}



/*NAVIGATION*/

.screen {
		background-image: url(images/cloud.png);
		height: 61px; width: 97px;
		position: relative; top:7px;
		}

/*
#navigation {
			width: 330px;
			position: fixed; top: 28px; left: 610px; 
			font-family: arial; font-weight: normal; font-size: 1.2em; 
			color: #beb0a3;
			text-align: right;
			display: inline;
			z-index: 11;
		
			}


#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:48px; text-align: left;}
ul.menu .menulink1 {border:0px solid #aaa; padding:0px 0px 0px; font-weight:normal; /*background:url(images/header.gif);*/ width:64px; 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	{
				
				font-family: "arial", arial; font-size: 0.8em; color: #303030; font-weight: normal;	
				text-decoration: none;
				min-height: auto;
				background-color: #ebebeb;
		}

#background {
			height: auto; 
			background-color: #b6cccb;
		/*	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;		
   			height: auto;
			width: 977px;
			margin-left: auto; margin-right: auto; 
			position: relative; top:15px;
			border: white; border-width: 13px; border-style: solid;
			/*margin-bottom: 100px;*/
			-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 25px;
			-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 25px;
			
					}

#maincontent	{
				
				position: relative; top:-70px; /*was -1px */
				width: 977px; 
				min-height: auto;
				
				
				}
				
#storecontent	{
				
				position: relative; top:-70px; /*was -350px*/
				width: 977px; 
				height: auto;
				
				
				}				

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


#articlecontent {
				float: left;
				position: relative; 
				width: 600px;/* total width of content section + border = 750px (have to reduce for padding) */
				/*
				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;
				
				}

#pagecontent {
				float: left;
				position: relative; top: -45px;
				width: 600px;
				/*
				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: 0px 20px 0px 30px; 
				line-height: 1.7em;
				
				
				}

.article img  {
				border: white; border-width: 4px; border-style: solid;
				}

				
.hydrant	{
			background-image: url(images/hydrant.jpg); 
			height: 64px; width: 50px;
			position: relative; left: 550px; top: -63px;
			}				

#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;
				}


#sidebar	{
			float: right;
			background-image: url(images/sidebarbackground.jpg); background-repeat: repeat-y;
			position: relative; top: 50px; left:-13px; /*was top:-30px*/
			width: 300px;
			min-height: 90%;
			padding: 0px 0 0 0px;
			color: white;
			text-indent: 0px;
			font-family: arial; font-size: 1.0em;
			}
			
#sidebar a	{
			color: #e3dad0;
			font-family: arial;
			}
#ad300		{
			height: 250px;
			width: 260px;
			background-color: white;
			padding:20px;
			-moz-border-radius: 1em;
			-webkit-border-radius: 1em;
			}
			

/*  STORE  */

.product	{
          	width: 250px;
          	height: 300px;
          	padding-right: 35px;
          	float:left;
          	line-height: 1.1em;
            }
.storepost	{
			width: auto;
			
			}

/*  SIDEBAR STORE  */

#sidebarstore	{
			float: right;
			background-image: url(images/sidebarbackground.jpg); background-repeat: repeat-y;
			position: relative; top: 30px; left:-40px;
			width: 300px;
			min-height: 90%;
			padding: 0px 0 0 0px;
			color: white;
			text-indent: 0px;
			font-family: arial; font-size: 1.0em;
			}

#cart	{
		width: 300px;
		height: 45px;
		border-bottom: white; border-style: solid; border-width: 7px;
		border-left-style: hidden; border-right-style: hidden; border-top-style: hidden;
		padding-bottom: 5px;
		padding-left: 0px;
		}
		
#quantity	a{
			font-size: 3.2em; font-family: "arial"; color: white;
			float:left;
			padding-right: 10px;
			
			}
			
#cartinfo	{
			position: relative; top: 5px;
			line-height: 1.4em;
			float: left;
			}

#cartinfo	a{
			color: white;
			padding: 0 30px 0 3px;
			}

			
.blueback	{
			background-color: #47a8eb;
			}			


#cartimage	{
			background-image: url(images/cartimage.gif);
			height: 31px;
			width: 44px;
			float: left;
			position: relative; top: 7px; left: 10px;
			}

.top 	{
		background-image: url(images/sidetop.gif);
		width: 300px;
		height: 25px;
		}
		
.topb 	{
		background-image: url(images/sidetopb.gif);
		width: 300px;
		height: 25px;
		}		

.bottom {
		background-image: url(images/sidebottom.gif);
		width: 300px;
		height: 24px;
		}

.back	{
		position: relative; top: 15px;
		background-color: #778f9f;
		
		}

.sidecontent	{
				padding: 0 35px 0 35px;
				}
				
				
#what	{
		background-image: url(images/littlecitywhat.gif);
		width: 135px;
		height: 20px;
		position: relative; left:-7px;
		}
		
.rule	{
		width: 230px;
		
		border-bottom: white; border-style: solid; border-width: 2px;
		border-left-style: hidden; border-right-style: hidden; border-top-style: hidden;
		padding: 10px 0px 10px 0px;
		margin-bottom: 20px;
		}	
		
.dotted	{
		width: 230px;
		
		border-bottom: white; border-style: dotted; border-width: 2px;
		border-left-style: hidden; border-right-style: hidden; border-top-style: hidden;
		padding: 10px 0px 10px 0px;
		filter:alpha(opacity=50);
		-moz-opacity:0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;

		}											

/*  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;}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:680px}
.galleria li div img{cursor:pointer}
.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}
.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;}

/*FOOTER*/

#footerbackground 	{
					background-image: url(images/footer.jpg); 
					height: 379px;
					width: 993px;
					position: relative; left:-6px; top: -1px;
					z-index: 0;
		
					}

#footercontent	{
				background-color: #bac1b2;
				height: 51px;
				width: 977px;
				position: relative; top: -1px;
				padding-top: 10px;
				}

.footerlinks {
			position:relative; top: 0px; left: 20px;
			font-family: arial; font-size: 1.1em; 
			color: #303030;
			
			
			}
.footerlinks a{
			
			font-family: arial; font-size: 1.1em; 
			color: #303030;			
			}

.footerlinks a:hover{color: #bb6632;}


.john a 	{
			
			font-family: arial; font-size: 1.2em; 
			color:white;
			display: block;
						}
			
.john a:hover {color: #bb6632; }