/*	

	MAIR DESIGNS CSS Layout Boxes
	
	The CSS contained in this file handles the layout of the various pages
	that make up the site.
	
	Designed by:	Robin Mair
	Date:			2009.08.07

*/

/* 
=================================================================================
	LAYOUT STYLES
=================================================================================

	The first set of boxes are used for the layout of the main template
	page for the site. Separate sets will be created for each page that 
	needs layout boxes such that all of the layouts are described
	here in this single file.
	
=================================================================================
*/

/* CONTAINER

	The main box that contains the entire page and therefore defines
 	the size of the page and website
*/

#md_layout_container {
	position: relative;
	width: 804px;
	height: 4120px;
	background-color: black;
	margin: auto;
	z-index: 1;
	padding-top: 6px;
	padding-left: 0px;
}

/* CONTAINER

	The main box that contains the entire page and therefore defines
 	the size of the page and website
*/

#zw_layout_container {
	position: relative;
	width: 804px;
	height: 3750px;
	background-color: black;
	margin: auto;
	z-index: 1;
	padding-top: 6px;
	padding-left: 0px;
}

/* CONTENT

	The main content area box for the website
*/

#md_layout_content {
	position: absolute;
	left: 0px;
	top: 102px;
	width: 100%;
	height: 100%;
	z-index: 2;
}

/* CONTENT

	The main content area box for the website
*/

#zw_layout_content {
	position: absolute;
	left: 0px;
	top: 102px;
	width: 100%;
	height: 100%;
	z-index: 2;
}

/* STANDARD BANNER
*/

#md_standard_banner {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 804px;
	height: 108px;
	z-index: 2;
}

/* BANNER LOGO
*/

#md_banner_logo {
	position: absolute;
	left: 26px;
	top: 18px;
	width: 220px;
	height: 95px;
	z-index: 3;
	visibility: visible;
	background: url(../images/md_logo_small_2010.png) no-repeat;
}

/* BANNER LOGO LINK
*/

#md_banner_logo a {
	width: 312px;
	height: 95px;
	display: block; 
	text-indent: -9999px;
	text-decoration: none;
	overflow: hidden;
	background-color: transparent;
}

/* BANNER SLOGAN
*/

#md_banner_slogan {
	position: absolute;
	left: 401px;
	top: 60px;
	width: 400px;
	height: 30px;
	text-align: center;
	color: white;
	z-index: 2;
}

/*  STANDARD CONTENT BOX
*/

#md_standard_content {
	position: absolute;
	left: 6px;
	top: 128px;
	width: 792px;
	height: 3940px;
	margin: 0px;
	padding: 0px;
/*	background-color: green;*/
	overflow: hidden;
	z-index: 2;
}

/*  STANDARD CONTENT BOX
*/

#zw_standard_content {
	position: absolute;
	left: 6px;
	top: 128px;
	width: 792px;
	height: 3560px;
	margin: 0px;
	padding: 0px;
/*	background-color: green;*/
	overflow: hidden;
	z-index: 2;
}

/*  OVERVIEW CONTAINER
*/

#md_overview_content {
	position: relative;
	width: 792px;
	height: 760px;
	margin: 0px;
	padding: 0px;
	background-color: black;
	overflow: hidden;
	z-index: 3;
}

/* APP CONTAINER
*/

#md_app_container {
	position: relative;
	padding-left: 10px;
	margin-bottom: 10px;
	width: 100%;
	height: 94px;
	z-index: 4;
}

#md_app_icon {
	position: absolute;
	left: 0px;
	top: 2px;
	width: 64px;
	height: 80px;
	overflow: hidden;
	z-index: 5;
}

/*  APP STORE LOGO
*/

#md_app_store_logo {
	position: absolute;
	right: 20px;
	top: 10px;
	width: 173px;
	height: 60px;
	margin: 0px;
	background-color: black;
	overflow: hidden;
	z-index: 5;
}

/*  SEPARATOR
*/

.md_separator {
	position: relative;
	left: 0px;
	top: 6px;
	width: 100%px;
	height: 6px;
	margin-top: 4px;
	margin-bottom: 12px;
	background-color: black;
	overflow: hidden;
	z-index: 9;
}

/*  DETAIL CONTENT BOX
*/

#md_detail_content {
	position: relative;
	width: 772px;
	height: 3100px;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
	overflow: hidden;
	z-index: 3;
}

/*  DETAIL CONTENT BOX
*/

#zw_detail_content {
	position: relative;
	width: 772px;
	height: 3040px;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
	overflow: hidden;
	z-index: 3;
}

/*  DETAIL LAYOUT CONTAINER
*/

#md_detail_layout_container {
	position: relative;
	width: 640px;
	height: 98%;
	margin-left: 68px;
	margin-bottom: 10px;
	overflow: hidden;
	z-index: 4;
}

/*  DETAIL LAYOUT COLUMN LEFT
*/

#md_detail_layout_column_left {
	position: absolute;
	left: 0px;
	top: 180px;
	width: 48%;
	height: 100%;
	overflow: hidden;
	z-index: 5;
}

/*  DETAIL LAYOUT COLUMN RIGHT
*/

#md_detail_layout_column_right {
	position: absolute;
	right: 0px;
	width: 48%;
	top: 180px;
	height: 100%;
	overflow: hidden;
	z-index: 5;
}

/*  DETAIL LAYOUT COLUMN LEFT
*/

#zw_detail_layout_column_left {
	position: absolute;
	left: 0px;
	top: 440px;
	width: 48%;
	height: 100%;
/*	background-color: black;*/
	overflow: hidden;
	z-index: 5;
}

/*  DETAIL LAYOUT COLUMN RIGHT
*/

#zw_detail_layout_column_right {
	position: absolute;
	right: 0px;
	width: 48%;
	top: 440px;
	height: 100%;
/*	background-color: black;*/
	overflow: hidden;
	z-index: 5;
}

/*  SECTION TITLE BOX
*/

.md_section_title {
	position: relative;
	width: 100%;
	height: 24px;
	margin-bottom: 6px;
	text-align: center;
	background-color: black;
	overflow: hidden;
	z-index: 2;
}

/*  UNDER CONSTRUCTION BOX
*/

#md_under_construction {
	/*position: absolute;
	left: 6px;
	top: 200px;*/
	width: 778px;
	height: 38px;
	margin-top: 180px;
	margin-right: 0px;
	margin-left: 0px;
	background-color: black;
	overflow: hidden;
	z-index: 9;
}

/*  FOOTER CONTAINER
*/

#md_footer_content {
	position: absolute;
	left: 6px;
	bottom: 6px;
	width: 792px;
	height: 50px;
	margin: 0px;
	padding: 0px;
	background-color: black;
	overflow: hidden;
	z-index: 2;
}

/* FOOTER LOGO

	The box used to contain the footer logo that appears at the bottom of each page
*/

#md_layout_footer_logo {
	position: absolute;
	bottom: 2px;
	left: 8px;
	width:  102px;
	height: 44px;
	z-index: 3;
}

/* COPYRIGHT FOOTER

	The box used to contain the footer that appears at the bottom of each page
*/

#md_layout_footer {
	position: absolute;
	bottom: 10px;
	left: 8px;
	height: 14px;
	width:  766px;
	margin-right: 4px;
	margin-left: 4px;
	z-index: 3;
}

/* DETAIL CONTENT BOXES
*/

#tr_image_box_1 {
	position: relative;
	left: 0px;
	width: 314px;
	height: 80px;
	background-color: transparent;
	overflow: hidden;
	z-index: 4;
}

#tr_image_box_2 {
	position: relative;
	left: 0px;
	width: 314px;
	height: 62px;
	background-color: transparent;
	overflow: hidden;
	z-index: 4;
}

#tr_image_box_3 {
	position: relative;
	left: 0px;
	width: 314px;
	height: 52px;
	background-color: transparent;
	overflow: hidden;
	z-index: 4;
}

#tr_image_box_4 {
	position: relative;
	left: 0px;
	width: 86px;
	height: 42px;
	background-color: transparent;
	overflow: hidden;
	z-index: 4;
}

#tr_image_box_5 {
	position: relative;
	left: 0px;
	width: 426px;
	height: 390px;
	margin-bottom: 10px;
	background-color: transparent;
	overflow: hidden;
	z-index: 4;
}

#tr_image_box_6 {
	position: relative;
	left: 46%;
	width: 92px;
	height: 42px;
	background-color: transparent;
	overflow: hidden;
	z-index: 4;
}

#tr_image_box_7 {
	position: relative;
	left: 0px;
	width: 236px;
	height: 158px;
	margin-bottom: 6px;
	background-color: transparent;
	overflow: hidden;
	z-index: 4;
}

#tr_image_box_8 {
	position: relative;
	left: 0px;
	width: 314px;
	height: 136px;
	background-color: transparent;
	overflow: hidden;
	z-index: 4;
}

#tr_image_box_9 {
	position: relative;
	left: 0px;
	width: 166px;
	height: 292px;
	background-color: transparent;
	overflow: hidden;
	z-index: 4;
}

#tr_image_box_10 {
	position: relative;
	left: 0px;
	width: 166px;
	height: 256px;
	margin-bottom: 10px;
	background-color: transparent;
	overflow: hidden;
	z-index: 4;
}

#tr_image_box_11 {
	position: relative;
	left: 0px;
	width: 164px;
	height: 164px;
	margin-bottom: 10px;
	background-color: transparent;
	overflow: hidden;
	z-index: 4;
}

#tr_image_box_12 {
	position: relative;
	left: 0px;
	width: 166px;
	height: 342px;
	margin-bottom: 10px;
	background-color: transparent;
	overflow: hidden;
	z-index: 6;
}

/* ZEROWATCH LAYOUT BOXES
*/

#zw_image_box_1 {
	position: relative;
	left: 38%;
	width: 156px;
	height: 95px;
	margin-bottom: 6px;
	background-color: transparent;
	overflow: hidden;
	z-index: 2;
}

#zw_image_box_2 {
	position: relative;
	left: 0px;
	width: 200px;
	height: 36px;
	margin-bottom: 6px;
	background-color: transparent;
	overflow: hidden;
	z-index: 2;
}

#zw_image_box_3 {
	position: relative;
	left: 0px;
	width: 200px;
	height: 284px;
	margin-bottom: 20px;
	background-color: transparent;
	overflow: hidden;
	z-index: 2;
}

#zw_image_box_4 {
	position: relative;
	left: 0px;
	width: 200px;
	height: 62px;
	margin-bottom: 6px;
	background-color: transparent;
	overflow: hidden;
	z-index: 2;
}

#zw_image_box_5 {
	position: relative;
	left: 0px;
	width: 200px;
	height: 260px;
	margin-bottom: 20px;
	background-color: transparent;
	overflow: hidden;
	z-index: 2;
}

#zw_image_box_6 {
	position: relative;
	left: 0px;
	width: 112px;
	height: 112px;
	margin-bottom: 6px;
	background-color: transparent;
	overflow: hidden;
	z-index: 2;
}

#zw_image_box_7 {
	position: relative;
	left: 0px;
	width: 200px;
	height: 76px;
	margin-bottom: 6px;
	background-color: transparent;
	overflow: hidden;
	z-index: 2;
}


/*
=================================================================================
	CONTENT ROUNDED ENDS
	
	These corners are used for all of the image labels.
=================================================================================
*/

/*  CONTENT LEFT EDGE BOX
*/

div.md_round_left_box {
	float: left;
	left: 0px;
	top: 0px;
	width: 12px;
	height: 21px;
	margin: 0;
	padding: 0;
	z-index: 4;
	background: url(../images/tr_round_left_edge.png) no-repeat;
}

/*  CONTENT RIGHT EDGE BOX
*/

div.md_round_right_box {
	float: right;
	right: 0px;
	top: 0px;
	width: 12px;
	height: 21px;
	margin: 0;
	padding: 0;
	z-index: 4;
	background: url(../images/tr_round_right_edge.png) no-repeat;
}


/* 
=================================================================================
	HOME PAGE CONTENT
=================================================================================

	The layout boxes for all of the elements that make up the home page are
	specified next.
	
=================================================================================
*/

/*  PORTRAIT SCREENSHOT
*/

#md_portrait_screenshot {
	position: absolute;
	left: 32px;
	top: 10px;
	width: 366px;
	height: 756px;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	z-index: 3;
	background: black url(../images/tr_iphone4_timerings.png) no-repeat;
}

/* CONTENT TEXT BOX
*/

#md_content_text_box {
	position: absolute;
	left: 56%;
	top: 10px;
	width: 338px;
	height: 730px;
	padding: 0px;
	text-align: left;
	color: silver;
	z-index: 4;
}

/* BOLD GREY PARAGRAPH STYLE

	This is the paragraph style that will be used for the bold grey text
*/

p.md_content_bold_paragraph {
	font-weight: bold;
	color: silver;
	line-height: 1.3em;
	font-size: 1em;
	margin-bottom: 12px;
}

/* GREY PARAGRAPH STYLE

	This is the paragraph style that will be used for the design text
*/

p.md_content_paragraph {
	color: silver;
	line-height: 1.1em;
	font-size: 1em;
	margin-bottom: 8px;
}

/* LINK STYLES
	
	These styles are used to consistently display links in the 
	site using a rollover effect
*/

.md_layout_link_box a { 
	color: white;
	background-color: white;
	text-decoration: none;
	overflow: hidden;
	border-style: none;
}

.md_layout_link_box a:link { 
	color: white;
	background-color: white;
	text-decoration: none;
}

.md_layout_link_box a:visited { 
	color: white;
	background-color: white;
	text-decoration: none;
}

.md_layout_link_box a:hover { 
	color: white;
	background-color: white;
	text-decoration: none;
}

.md_layout_link_box a:active { 
	color: white;
	background-color: white;
	text-decoration: none;
}

.md_layout_link_box a:selected { 
	color: white;
	background-color: white;
	text-decoration: none;
}

/* 
=================================================================================
	ABOUT PAGE CONTENT
=================================================================================

	The layout boxes for all of the elements that make up the gallery page are
	specified next.
	
=================================================================================
*/

/* CONTAINER

	The main box that contains the entire page and therefore defines
 	the size of the page and website
*/

#md_about_container {
	position: relative;
	width: 804px;
	height: 980px;
	background-color: black;
	margin: auto;
	z-index: 1;
	padding-top: 6px;
	padding-left: 0px;
}

/* CONTENT

	The main content area box for the website
*/

#md_about_content {
	position: absolute;
	left: 0px;
	top: 128px;
	width: 100%;
	height: 80%;
	background-color: black;
	z-index: 2;
}

/*  ABOUT LAYOUT CONTAINER
*/

#md_about_layout_container {
	position: relative;
	width: 95%;
	height: 100%;
	margin-left: 20px;
	margin-right: 20px;
	background-color: black;
	overflow: hidden;
	z-index: 3;
}

/* ABOUT TEXT BOX
*/

.md_about_text_box {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 370px;
	height: 970px;
	padding: 0px;
	text-align: left;
	color: silver;
	background-color: black;
	z-index: 4;
}

/* TEXT SPACER #1
*/

.md_text_spacer_1 {
	position: absolute;
	right: 0px;
	top: 200px;
	width: 370px;
	height: 70px;
	padding: 0px;
	background-color: white;
	z-index: 5;
}

/* SCREENSHOT BOX
*/

#md_about_screenshots_box {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 370px;
	height: 100%;
	padding: 0px;
	text-align: left;
	color: silver;
	background-color: black;
	z-index: 4;
}

/* UPPER SCREENSHOT LAYOUT
*/

.md_screenshot_layout {
	position: relative;
/*	left: 0px;
	top: 0px;*/
	width: 370px;
	height: 370px;
	padding: 0px;
	text-align: left;
	background-color: black;
	z-index: 5;
}

/* SCREENSHOT IMAGE TOP RIGHT
*/

.md_screenshot_image_left {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 176px;
	height: 364px;
	padding: 0px;
	background-color: transparent;
	overflow: hidden;
	z-index: 6;
}

/* SCREENSHOT IMAGE TOP LEFT
*/

.md_screenshot_image_right {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 176px;
	height: 364px;
	padding: 0px;
	background-color: transparent;
	overflow: hidden;
	z-index: 6;
}

/* BOLD GREY H3 STYLE
*/

h3.md_about_bold {
	font-weight: bold;
	color: silver;
	line-height: 1.5em;
	font-size: 1.0em;
}

/* BOLD GREY PARAGRAPH STYLE
*/

p.md_about_bold_paragraph {
	font-weight: bold;
	color: silver;
	line-height: 1.1em;
	font-size: 1.0em;
	margin-bottom: 8px;
}

/*
	copyright ©2009 - 2010 Mair Designs LLC  All Rights Reserved
*/