/*!
#######################################################################
# 
# Myla Valentine's Girls
# Screen CSS stylesheet
#
# Hand-crafted by Phenotype (phenotype.net)
#
#######################################################################
-----------------------------------------------------------------------
* You may use this file for learning purposes.
*
* The unique combination of images, colours, sizes, typography and 
* positioning ('the design') is copyright.
*
* Copying, modifying or any other use of design-related images 
* is prohibited.
*
* Don't rip our site, be creative!
-----------------------------------------------------------------------
*/

/*
***********************************************************************
// Dependencies
***********************************************************************
* Global reset
* 	reset.css
*
***********************************************************************
*/

/*-------------------------------------------------------------------
// Page layout and appearance
-------------------------------------------------------------------*/
html, body {
	width: 100%;
	height: 100%;
	}

body {
	background: #000;
	}

#container {
	width: 980px;
	height: 630px;
	margin: 0 auto;
	position: relative;
	}
		
	#content h1 a {
		width: 157px;
		height: 155px;
		display: block;
		position: absolute;
		top: 43px;
		left: 0;
		z-index: 5;
		text-indent: -999em;
		overflow: hidden;
		background: url('../../images/template/screen/myla-logo.gif') 0 0 no-repeat;
		}
	
	#content h3 a {
		}
		
	#content {
		width: 980px;
		height: 630px;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
		}
		
		#content #credits {
			margin: 0;
			position: absolute;
			bottom: 10px;
			left: 20px;
			}

/* 
Welcome page
---------------------------
*/

#content #welcome {
	width: 540px;
	margin: 0 0 0 -270px;
	position: absolute;
	top: 210px;
	left: 50%;
	}
	
/* 
Menu common elements
---------------------------
*/

#content .menu {
	width: 806px;
	height: 518px;
	padding: 44px 38px;
	overflow: hidden;
	position: absolute;
	z-index: 10;
	top: 11px;
	left: 51px;
	background: url('../../images/template/screen/menu-background.gif') 0 0 no-repeat;
	}

/* 
Menu: index
---------------------------
*/

#content .menu.index {
	width: 406px;
	height: 518px;
	padding: 44px 438px 44px 38px;
	}

/* 
Menu: product details
---------------------------
*/

#content .menu.details {
	width: 255px;
	height: 462px;
	padding: 100px 90px 44px 531px;
	}
	
/*-------------------------------------------------------------------
// Typography and content formatting
-------------------------------------------------------------------*/

/* 
XHTML tag styles 
---------------------------
*/

body {
	font-size: 62.5%; /* Resets font sizes to 10px, so 1em = 10px */
	font-family: Georgia, 'Times New Roman', Times, serif;
	color: #62454b;
	}
	
a {
	color: #eee;
	text-decoration: none;
	}
	
a:hover {
	text-decoration: underline;
	}
  
dl {
	margin: 0 0 1.333em 0;
	font-size: 1.2em;
	line-height: 1.333;
	text-align: left;
	}
	
em, i {
	font-style: italic;
	}
	
h1 {
	margin: 20px 0 0 0;
	font-size: 4em;
	line-height: 1.2;
	text-align: center;
	font-weight: normal;
	}
	
h2 {
	margin: 0 0 1.111em 0;
	margin: 0;
	font-size: 1.8em;
	line-height: 1.111;
	text-align: left;
	font-style: italic;
	font-weight: normal;
	color: #62454b;
	}
	
h3 {
	margin: 0 0 1em 0;
	font-size: 2em;
	line-height: 1;
	text-align: left;
	font-style: italic;
	font-weight: normal;
	color: #75575c;
	}
		
hr {
	display: none;
	}
	
/* Images */
img {
	border: 0;
	}
		
/* /Images */
	
p {
	margin: 0 0 2em 0;
	font-size: 1em;
	line-height: 2;
	text-align: left;
	vertical-align: top;
	font-style: italic;
	}
	
ol {
	margin: 0 0 2em 0;
	font-size: 1em;
	line-height: 2;
	text-align: left;
	list-style-type: lower-latin;
	list-style-position: outside;
	}
	
	ol li {
		list-style-position: outside;
		text-indent: 0;
		}
		
ul {
	margin: 0 0 2em 0;
	font-size: 1em;
	line-height: 2;
	text-align: left;
	list-style: disc;
	list-style-position: outside;
	}
	
	ul li {
		list-style-position: outside;
		}
		
ul dl, ul h2, ul h3, ul h4, ul ul, ul ol, ul p, ol dl, ol h2, ol h3, ol h4, ol ul, ol ol, ol p, dl dl, dl h2, dl h3, dl h4, dl ul, dl ol, dl p, ol label, ol input, ol select, ol textarea, table table td, table table th {
	font-size: 1em !important;
	}
  
small {
	font-size: 0.8em;
	}
	
strong, bold {
	font-weight: bold;
	}

/*
Section-specific styles 
---------------------------
*/

#content h3.header {
	margin: 0 0 2em 0;
	padding: 100px 0 0 0;
	font-size: 3em;
	line-height: 2;
	text-align: center;
	font-style: italic;
	font-weight: normal;
	color: #75575c;
	}
	
	#content h3.header a {
		color: #75575c;
		text-decoration: none;
		}

#credits {
	font-size: 1em;
	color: #fff;
	}
	
	#credits a {
		color: #fff;
		}
/* 
Welcome page
---------------------------
*/

#content #welcome p.action-link {
	font-size: 2em;
	line-height: 50px;
	text-align: center;
	}
	
	#content #welcome p.action-link a {
		width: 100px;
		height: 52px;
		display: block;
		overflow: hidden;
		margin: 0 auto;
		color: #75575c;
		background: url('../../images/template/screen/button-dark.gif') 0 0 no-repeat;
		}
		
	#content #welcome p.action-link a:hover {
		text-decoration: none;
		background-position: 0 -52px;
		}

/* 
Menu: index
---------------------------
*/

#content .menu.index ul.products {
	width: 420px;
	margin: 0;
	position: absolute;
	top: 114px;
	list-style: none;
	}
	
#content .menu.index ul.products.first {
	left: 20px;
	background: url('../../images/template/screen/divider-left.gif') 0 140px no-repeat;
	}
	
#content .menu.index ul.products.last {
	right: 20px;
	background: url('../../images/template/screen/divider-right.gif') 0 140px no-repeat;
	}
	
	#content .menu.index ul.products li {
		width: 200px;
		height: 140px;
		padding: 0 170px 20px 50px;
		position: relative;
		}
		
		#content .menu.index ul.products li h3 {
			font-size: 1.8em !important;
			font-weight: bold;
			color: #3a2123;
			}
			
			#content .menu.index ul.products li h3 a {
				color: #3a2123;
				}
		
		#content .menu.index ul.products li img {
			width: 104px;
			height: 138px;
			position: absolute;
			top: 0;
			right: 50px;
			}
			
		#content .menu.index ul.products li p.action-link {
			width: 100px;
			margin: 0;
			padding: 0 0 5px 20px;
			position: absolute;
			bottom: 20px;
			right: 170px;
			text-align: right;
			font-weight: bold;
			background: url('../../images/template/screen/action-link-background.gif') left bottom no-repeat;
			}
			
			#content .menu.index ul.products li p.action-link a {
				color: #3a2123;
				}

/* 
Menu: product details
---------------------------
*/

#content .menu.details h2 {
	position: absolute;
	top: 100px;
	left: 115px;
	font-size: 3em !important;
	}

#content .menu.details img {
	position: absolute;
	top: 140px;
	left: 115px;
	}
	
#content .menu.details p {
	margin: 0 0 1.333em 0;
	font-size: 1.5em;
	line-height: 1.333;
	text-align: center;
	}
	
#content .menu.details p.action-link {
	line-height: 40px;
	}
	
	#content .menu.details p.action-link a {
		width: 82px;
		height: 42px;
		display: block;
		overflow: hidden;
		margin: 0 auto;
		color: #62454b;
		background: url('../../images/template/screen/button-light.gif') 0 0 no-repeat;
		}
		
	#content .menu.details p.action-link a:hover {
		text-decoration: none;
		background-position: 0 -42px;
		}