/* 01. DEFAULTS */
body {
	color: #000; 
	font-family: Helvetica, Arial, sans-serif;
	background: #FFF;
	margin: 0; padding: 0;
}
.left {float: left;}
.right {float: right;}
	img.left {margin-right: 1em; margin-bottom: 1em;}
	img.right {margin-left: 1em; margin-bottom: 1em;}
.center {text-align: center;}
h1, h2, h3, h4, h5, h6 {margin: 0.25em 0 0.5em 0;}
ul, li {margin: 0; padding: 0;}
p  {margin: 0 0 1em 0;}
p:first-child {margin: 0;}
a {text-decoration: none; color: #000;}
img {border: 0;}



/* 02. MAIN || Container */

div#container {
	/*position: relative;
	margin: 20px auto 20px auto;*/
	width: 960px;
	height: 620px;
	/* Start : Absolute vertical positioning */
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -310px;
	margin-left: -480px;
}



/* 02.1 CUSTOM || Index */

body#body_index {
	color: #FFF; 
	font-family: Helvetica, Arial, sans-serif;
	background: #000;
}

body#body_index div#container {
	margin: 20px auto;
	width: 80%;
	height: 100%;
	overflow: hidden;
	position: relative;
	min-height: 330px;
	top: 0;
	left: 0;
}

ul#home_nav {
	list-style: none;
	margin-top: 120px;
	text-align: right;
	font-size: 4em;
	text-transform: uppercase;
	font-weight: bold;
}

ul#home_nav li {
	padding: 5px;
}

ul#home_nav li:first-child {
	margin-bottom: 50px;
}

ul#home_nav li a {color: #FFF; padding: 10px 20px;}
ul#home_nav li a:hover {color: #000;}
ul#home_nav li a#nav_home:hover {background: #000;}
ul#home_nav li a#nav_about:hover {background: #ff00bc;} /* Pink */
ul#home_nav li a#nav_advert:hover {background: #00b5fa;} /* Blue */
ul#home_nav li a#nav_design:hover {background: #fee300;} /* Yellow */
ul#home_nav li a#nav_video:hover {background: #b9ff01;} /* Green */



/* 03. MAIN || Nav */

ul#main_nav {
	position: absolute;
	bottom: 0px;
	list-style: none;
	z-index: 100;
}

ul#main_nav li {
	display: inline;
	margin-right: 40px;
}

ul#main_nav li:first-child {margin-left: 40px;}

ul#main_nav li a{
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
}

a#nav_home:hover {color: #000;}
a#nav_about:hover, body#body_about a#nav_about {color: #ff00bc;} /* Pink */
a#nav_advert:hover, body#body_advert a#nav_advert {color: #00b5fa;} /* Blue */
a#nav_design:hover, body#body_design a#nav_design {color: #fee300;} /* Yellow */
a#nav_video:hover, body#body_video a#nav_video {color: #b9ff01;} /* Green */



/* 04. CONTENT */

div#content {
	position: relative;
	min-height: 620px;
	width: 900px;
	margin: 0 auto;
}


/* 05.1 CUSTOM || Video */

body#body_video div#content h1 {
	position: absolute;
	top: 511px;
	font-size: 0.8em;
	font-weight: normal;
	width: 750px;
	margin-left: 78px;
}



/* 05.2 CUSTOM || About */

body#body_about div#left {
	position: absolute;
	left: 74px;
	width: 390px;
}

body#body_about h2 a:hover, 
body#body_about h3 a:hover {color: #ff00bc;} /* pink */


body#body_about div#content h1#my_name {
	font-size: 3em;
	background: url(images/Heading_TeresaLeung.png) no-repeat;
	width: 400px;
	height: 138px;
	text-indent: -10000px;
}

body#body_about div#left h3 {
	font-size: 1.2em;
	text-transform: uppercase;
	height: 20px;
	margin: 18px 0;
}

body#body_about div#right {
	position: absolute;
	left: 530px;
	top: 412px;
	width: 400px;
}

body#body_about div#right h2#talk_to_me {
	font-size: 2em;
	text-transform: uppercase;
	background: url(images/Heading_TalkToMe.png) no-repeat;
	width: 204px;
	height: 37px;
	text-indent: -10000px;
}

body#body_about div#right h3 {
	font-size: 1.2em;
	height: 20px;
	margin: 18px 0;
}