/* 
Theme Name: emericchen_v5
Theme URI: http://www.emericchen.com
Description: This is custom layout specifically designed for the emericchen.com website for 2012
Version: 5.0
Author: Emeric Chen
Author URI: http://www.emericchen.com
Tags: black, no images
Created: August 9, 2012

.
This theme and website may not be reproduced in any form without prior written consent by owner, Emeric Chen. emeric.chen@gmail.com
.

This theme incorporates the following pages: (0 pages total)

Pages not included: (0 pages total) 

Main Theme Colors:

blue: #257dab
lighter blue: #2a8cc0
purple: #635cb1
light grey: #5c6271

*/

/* 
	Resets defualt browser settings
	reset.css
*/
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:white; }
ol, ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption, th, td { text-align:left; font-weight:normal; }
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Body - Begin Typography & Colors & Images	
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
* { margin: 0 auto; padding: 0 auto; border: none; }
body { color: #666; font: 12px 'HelveticaRegular',Helvetica,ArialArial Narrow, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif; background: #FFFFFF /*url(img/bg2.jpg) top center repeat-x*/; }
p { font-size: 1.3em; }
a { border: 0 none; color: #000; text-decoration: none; }
a:link {}
a:visited {}
a:hover { color: #635cb1; }
a.no-hover { text-decoration: none; }
a:active {}
img { border: none; padding: 0 auto; margin: 0 auto; }
a img { border: none; padding: 0 auto; margin: 0 auto; }
ul { margin: 0; padding: 0; list-style: none; }
li { margin: 0; padding: 0; list-style: none; }
blockquote { text-indent: 8px; padding: 10px; background-color: #666; color: #fff; }
em { color: #36F; font-weight: bold; }

h1 { font-size: 1.8em; }

.shadow {
 /* -moz-box-shadow:    0 0 8px 1px #000;
  -webkit-box-shadow: 0 0 8px 1px #000;
  box-shadow:         0 0 8px 1px #000;*/
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	 Structure
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body { background: url(img/main-bg.jpg) center top no-repeat; }   
#container {}
#header { width: 940px; height: 150px; padding: 0 10px 0 10px; margin: auto; }
#logo { background: url(img/to3mo-logo2.png) center top no-repeat; width: 220px; height: 130px; display: inline-block; vertical-align: top; z-index: -1; }
#nav { display: inline-block; text-align: right; width: 700px; height: 150px; vertical-align: top; }
#nav a.link1 { color: #F3B77D; }
#nav a.link2 { color: #5088CB; }
#nav a.link3 { color: #46CD9A; }

#main-body { width: 100%; /*max-width: 1600px;*/ height: 450px;  margin: 0 auto; z-index: 100; }
#main-body #main-cont { width: 940px; height: 450px; padding: 0 10px 0 10px; margin: auto; }
.border-bg { background: #dfe1e1 url(img/bg-mid6.jpg) center no-repeat; border-top: 10px solid #CCC; border-bottom: 10px solid #CCC; background-size: auto; overflow: hidden; min-width: 940px; }
.no-border-bg { background: #dfe1e1 url(img/bg-mid7.jpg) center no-repeat; border-top: 10px solid #CCC; border-bottom: 10px solid #CCC; }

#main-body #main-cont .wrapper { width: 300px; margin: auto; padding: 17em 3.5em 3.5em 3.5em; }
#main-body #main-cont .wrapper h1 { color: #999; font-weight: normal; font-size: 1.4em; }
#main-body #main-cont .wrapper h2 { color: #FFF; font-weight: normal; font-size: 1.2em; }
#main-body #main-cont .wrapper p { /*color: #635cb1; purple*/color: #46a5d7; font-size: 1.2em; }

#footer { width: 940px; padding: 45px 10px 15px 10px; margin: auto; }
#page-desc { font-size: 1em; width: 460px; display: inline-block; vertical-align: top; }
#page-desc p { margin-top: 10px; }
#page-desc ul.icon-links { margin-top: 25px; }
#page-desc ul.icon-links li { display: inline-block; }
#contact { width: 460px; display: inline-block; vertical-align: top; text-align: right; }
#contact p { font-size: 18px; margin-top: 10px; }
#footer p span { color: #46a5d7; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	 Portfolio
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#port { width: 940px; text-align: center; padding-top: 40px; }
#port p { font-size: 2.3em; font-weight: bold; color: #000; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	 services.html
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#main-body #main-cont.services-page { color: #000; }
#main-body #main-cont.services-page a { }
#slider-id p { margin-bottom: 10px; }
#slider-id ul { margin-left: 20px; margin-bottom: 15px; }
#slider-id ul li { list-style: disc; }
#slider-id div {  }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	 contact.php
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#main-body #main-cont .contactform { height: 410px; /*padding-top: 40px;*/ margin-top: 40px; display: inline-block; vertical-align: top; }
#main-body #main-cont .contactform-desc { /*width: 435px; height: 330px; */ width: 45%; padding: 20px; margin: 40px 0 0 5px; display: inline-block; vertical-align: top; }
#main-body #main-cont .contactform-desc h3 { width: 45%;  font-size: 2em; width: 0 auto; color: #46a5d7; text-transform: capitalize; margin: 0; padding: 0; background: #000; padding: 2px 5px 2px 10px; margin-bottom: 10px; }
#main-body #main-cont .contactform-desc p { font-size: 1.3em; color: #000; padding-bottom: 10px; }
#main-body #main-cont .contactform-desc a { color: #46a5d7; }

#main-body #main-cont .thank-you { width: 450px; height: 330px; margin: 0 auto; padding-top: 40px; }
#main-body #main-cont .thank-you h3 { font-size: 2em; color: #46a5d7; text-transform: capitalize; margin: 0; padding: 0; text-align: center; }
#main-body #main-cont .thank-you p { font-size: 1.3em; color: #000; padding-bottom: 10px; text-align: center; }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	 Footer
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
   
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	 Round About
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.roundabout-holder {
list-style: none;
margin: 0 auto;
height: 37.500em;
width: 62.500em;
}
.roundabout-moveable-item {
height: 25.000em;
width: 34em;
cursor: pointer;
/*background: url(img/feat-bg.png) no-repeat; 
border: 1px solid #FFF; */
}
.roundabout-in-focus {
cursor: auto;
}

.jpdh{
background: url(img/feat-jpdh5.png) center no-repeat;
background-size: 100% 100%;
}
.calmanu{
background: url(img/feat-calmanu5.png) center no-repeat;
background-size: 100% 100%;
}
.afs{
background: url(img/feat-afs5.png) center no-repeat;
background-size: 100% 100%;
}
.arbol{
background: url(img/feat-arbol5.png) center no-repeat;
background-size: 100% 100%;
}
.halo{
background: url(img/feat-halo5.png) center no-repeat;
background-size: 100% 100%;
}
.karma{
background: url(img/feat-karma5.png) center no-repeat;
background-size: 100% 100%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	 Contact Form
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#contactus { width: 400px; background: rgba(0,0,0,0.5); padding: 20px; }
#contactus legend { font-size: 1.3em; font-weight:bold; color:#FFF; }
#contactus label { font-size:0.9em; font-weight: bold; color: #FFF; }
#contactus input[type="text"],textarea { font-size: 0.9em; line-height:140%; color : #000; padding : 3px; }
#contactus input[type="text"] { height:20px; width:220px; }
#contactus input[type="submit"] { width:100px; height:30px; padding-left:0px; }
#contactus textarea { height:120px; width:360px; }
#contactus .container { margin-top:8px; margin-bottom: 10px; }
#contactus .error { font-size: 0.9em; color: #900; background-color : #ffff00; }
#contactus fieldset#antispam { padding:2px; border-top:1px solid #EEE; border-left:0; border-right:0; border-bottom:0; width:350px; }
#contactus fieldset#antispam legend { font-size: 0.8em; font-weight:bold; color:#FFF; }
#contactus .short_explanation { font-size: 0.9em; color:#FFF; }
/* spam_trap: This input is hidden. This is here to trick the spam bots*/
#contactus .spmhidip { display:none; width:10px; height:3px; }
#fg_crdiv { font-size: 0.3em; opacity: .2; -moz-opacity: .2; filter: alpha(opacity=20); }
#fg_crdiv p { display:none; }