/* main css file for 5thHubcap */
/* Why are you looking in here? */
/* All the good stuff is on the mainpage */
/* Even it was coded by the man, the myth, the legend */

/* JACOB																							   */
/* 888~~\  888~~       e       e88~-_  888   | 888~~\    ,88~-_        e      888~-_   888~-_    d8b   */
/* 888   | 888___     d8b     d888   \ 888___| 888   |  d888   \      d8b     888   \  888   \  !Y88!  */
/* 888 _/  888       /Y88b    8888     888   | 888 _/  88888    |    /Y88b    888    | 888    |  Y8Y   */
/* 888  \  888      /  Y88b   8888     888   | 888  \  88888    |   /  Y88b   888   /  888    |   8    */
/* 888   | 888     /____Y88b  Y888   / 888   | 888   |  Y888   /   /____Y88b  888_-~   888   /    e    */
/* 888__/  888___ /      Y88b  "88_-~  888   | 888__/    `88_-~   /      Y88b 888 ~-_  888_-~    "8"   */


 
/* General Reset */ 
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
ol, ul {list-style: none;}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal;}
table {border-collapse: collapse; border-spacing: 0;}
fieldset, img {border: 0;}
caption, th {text-align: left;}
q:before, q:after {content: '';}


/* Load the fonts */

@font-face { font-family: Dekar; src: url('../fonts/Dekar.otf'); } 
@font-face { font-family: DekarL; src: url('../fonts/DekarLight.otf'); }

/* Start some CSS goodness */

/* set some bases */
html {height:100%; }
body {background:url('../img/bg2.jpg') left top repeat-y; background-color:#000; height:100%; width:100%; font:13px arial, san-serif; color:#333;}
#wrap {width:735px; margin:0 0 0 100px;  border:0; border-left:30px solid #fff; min-height:100%; background:url('../img/square_bg.png') left top #D76929;}
#mainContainer {width:735px;  min-height:100%; padding:0 0 10px 0;}

h1 {font:52px/38px Dekar, arial, san-serif; color:#fff; padding:10px 0 0 0; cursor:pointer;}
h1 span {font:52px/38px DekarL, arial, san-serif; }

#expBtn, #aboutMeBtn, #contactBtn {font:52px/38px Dekar, arial, san-serif; color:#fff; cursor:pointer;}
#expBtn:hover, #aboutMeBtn:hover, #contactBtn:hover, h1:hover {font:52px/38px DekarL, arial, san-serif; color:#fff;}
.selectedBtn {font:52px/38px DekarL, arial, san-serif !important;}


#experContainer {height:335px; background:#fff; width:670px; margin:0 0 15px 0; padding:10px 0 0 30px; display:none;}
#aboutMeContainer {height:140px; background:#fff; width:670px; margin:0 0 15px 0; padding:10px 0 0 30px; display:none;}
#contactContainer {height:420px; background:#fff; width:670px; margin:0 0 15px 0; padding:10px 0 0 30px; margin:0 0 0 0; display:none;}


#subContainer ul {}
.clearing {clear:both;}

/* experContainer area */
#experContainer p {width:615px; line-height:25px; margin:15px 0;}
#experContainer a {font:bold 15px/15px arial, san-serif; color:#444; text-decoration:none; border-bottom:1px solid #555;}
#experContainer a:hover {color:#999; }
#experContainer strong {font:bold 15px arial,san-serif; color:#555;}


/* about me area */
#aboutMeContainer p {width:615px; line-height:25px; margin:15px 0;}
#aboutMeContainer a {font:bold 15px/15px arial, san-serif; color:#444; text-decoration:none; border-bottom:1px solid #555;}
#aboutMeContainer a:hover {color:#999; }
#aboutMeContainer strong {font:bold 15px arial,san-serif; color:#555;}

/* contact area */
#contactContainer ul { margin:15px 0;}
#contactContainer ul li {margin:10px 0 0 0; height:16px; padding:0 0 0 20px;}
#contactContainer ul li a {text-decoration:none; color:#333}
#contactContainer ul li a:hover { color:#999}
.vcard {display:none;}
#phone {background:url(../img/phone_icon.png) no-repeat;}
#email {background:url(../img/email_icon.png) no-repeat;}
#vcard {background:url(../img/vcard.png) no-repeat;}