@charset "utf-8";

/* stylesheet.css
Created by anqiue

TOC

 - General Styles
 - Main Layout
 - Rounded info box
 - Tool tip
 - scroll to top
 - Contact form

 */

 
/* -----------------General Styles----------------- */ 

html {
	font-size: 100%;
	height: 100%;
}

body {
	background-color: #EEEEEE;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	color: #555555;
	line-height: 1.6em;
}

a { color: #000; text-decoration: none; }

a:hover { color: #555; }

a:active { color: #000; }

strong { font-weight: bold; color: #555555;}

p { padding:3px 3px 3px 10px; }


/* h1 for logo, h2 for main heading, h3 for intro text, h4 for sub_section heading */ 


h1, h2, h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 8px 0 8px 8px;
}

h1 { font-size: 60px; color: #555555; }

h2 { font-size: 34px; color: #555555; }

h3 { font-size: 30px; color: #ffffff; }

h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 24px;
	color: #555555;
	padding: 3px 0 3px 0;
}

/* Styles for lists */ 

ul li { list-style:disc;}

ul { margin: 14px;}

ul li {
	padding-left: 0px;
	margin-bottom: .1em;
}

/* -----------------Main Layout----------------- */ 


/* top middle and bottom backgrounds for cv container */
#container_top {
	margin-top:30px;
	background:url(../images/container_top.jpg) bottom center no-repeat;
	height: 61px;
}
#container_middle {
	background:url(../images/container_middle.jpg) bottom center repeat-y;
}
#container_bottom {
	background:url(../images/container_bottom.jpg) top center no-repeat;
	height: 80px;
}

/* Short intro text about your self, with background */
#intro_text {
	background:url(../images/intro_bg.jpg) top center no-repeat;
	height:162px;
}
#intro_text h3 {
	margin: 50px 30px 0 30px;
}

/* Menu link */
ul#menu {
	position:absolute;
	top:-30px;
	right:0px;
}
ul#menu li {
	list-style:none;
	float:left;
	padding: 0px;
}
#menu a, 
#menu a:visited,
#menu a:hover,
#menu a:active {
	display:block;
	padding:6px 8px 6px 8px;
	float:left;
	margin:5px;
	font-weight:bold;
}
#menu a, a:visited {background:#555;color:#ffffff;}
#menu a:hover {
	background:url(../images/rounded_bg.jpg);
	color:#FFF;
	}
#menu a:active {background:#555555;color:#ffffff; }


/* top contact info */
#contact_info {
	display:block;
	position:absolute;
	bottom:0px;
	right:0px;
	font-size:20px;
	color: #AAAAAA;
	text-align:right;
}


.sub_section, .main_section{
	margin-top:10px;
}
#picture {
	display:block;
	width:140px;
	height:192px;
	padding-bottom:30px;
}
.footer{
	margin-top:10px;
	height:100px;
}

/* Google earth map Container */
#map {
	margin: 5px 0 0 10px;
	width: 400px;
	height:200px;
}

/* social media icons */
ul#social li { 
	list-style:none;
	float:left;
	padding: 1px;
}

/*-----------------Rounded info box ----------------*/

.rounded, .rounded a, .rounded a:active, .rounded a:visited, .rounded a:hover {
	background:url(../images/rounded_bg.jpg) repeat;
	color:#FFFFFF;
	padding: 5px;
}
/* Place the rounded boxes at top right corners */
.top_right {
	position:absolute;
	top:0px;
	right:0px;
}


/* -------------Tool tip----------------
http://onehackoranother.com/projects/jquery/tipsy */

.tipsy { 
	padding: 5px; 
	font-size: 10px; 
	background-repeat: no-repeat;  
	background-image: url(../images/tipsy.gif); 
}
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }

/* -------------Gallery layout---------------- 
Popup styles are in folder fancybox > jquery.fancybox-1.3.0.css */

.gallery a img {
	border: 5px solid #CCC; 
	padding: 0px;	
	margin: 10px;
}


/* -----------------scroll to top----------------- */ 

#scroll_top a
{
	/* display: block before hiding */
	display: block;
	display: none;
 
	/* link is above all other elements except form */
	z-index: 9; 
 
	/* link stays at same place on page */
	position: fixed;
 
	/* link goes at the bottom of the page */
	top: 100%;
	margin-top: -30px; /* = height + preferred bottom margin */
 
	/* link is centered */
	right: 50%;
	margin-left: -50px; /* = half of width */

	/* size, style to preferences */
	width: 100px;
	height: 20px;
	padding: 3px;
	background-color: #222;
	font-size: 14px;
	text-align: center;
	color: #fff;
}




/********** contact form **********/

/* Contact form container */ 
.form_container { 
	float:left; 
	width:570px; 
	margin:10px 10px 10px 20px;
}
#contactform { 
	margin:0; 
	padding:5px 10px;
}
#contactform ol { 
	margin:0; 
	padding:0; 
	list-style:none;
}
#contactform li { 
	margin:0; 
	padding:0; 
	background:none; 
	border:none; 
	display:block;
}
/* Text labels */ 
#contactform label { 
	margin:0; 
	width:110px; 
	display:block; 
	padding:10px 0; 
	text-transform:capitalize; 
	float:left;
}
#contactform label span { color:#ff0000;}

/* Styles for input fields and text area field */ 
#contactform input.text { 
	width:400px; 
	border:1px solid #dcdcdc; 
	margin:10px 0; 
	padding:5px 2px; 
	height:16px; 
	background:#f5f5f5; 
	float:left;
}
#contactform textarea { 
	width:400px; 
	border:1px solid #dcdcdc; 
	margin:10px 0; 
	padding:2px; 
	background:#f5f5f5; 
	float:left;
}

/* Styles for button */ 
#contactform li.buttons { margin:5px 0 5px 110px;}
#contactform li.buttons input { 
	padding:3px 0; 
	margin:0; 
	border:0; 
	color:#FFF; 
	float:left;
}
/* Styles for error and success messages */ 
p.response { 
	text-align:left; 
	color:#ffffff; 
	width:auto; 
	display:block; 	
	background:url(../images/rounded_bg.jpg) repeat; 
}