/* www.cgwebmedia.com */
/* CSS Dev: Chris Gerikh */
body { margin:0; padding:0; }
body { background:#222222; text-align:center; }
body, div, table, input, select, textarea { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color:#cccccc; }
a, a:hover { text-decoration: none; }
a { color: #ff9000; }
a:hover { color:#cccccc; }
h1 { font-size: 17px; }
h2, h3 { font-size: 12px; }
h1 img { vertical-align:middle; }
img { border-style: none; }
table td { vertical-align: top; text-align: left; }
table ul { list-style-type: square; }
code { color:#999999; }
p { margin:0; padding:0 0 8px 0; }

.shell { position: relative; margin:0 auto; width: 996px; text-align:left; background:url(../images/backup-bg.gif) no-repeat; }
.fshell, .fkey { position: absolute; top:0px; left:0px; width:996px; }
.fshell { z-index:2; }
.fkey { z-index:9; }

.camheight { height: 270px; }
.cf-top, .cf-base, .cf1, .cf2, .cf3, .cf4 { position: absolute; z-index:11; }
.cf-top { top:401px; left:12px; width:972px; height: 55px; }
.cf-base { top:648px; left:12px; width:972px; height: 42px; }
.cf1, .cf2, .cf3, .cf4 { top: 456px; height: 192px; }
.cf1 { left:12px; width:18px; }
.cf2 { left:327px; width:20px; }
.cf3 { left:649px; width:20px; }
.cf4 { left:966px; width:18px; }

.fcam1, .fcam2, .fcam3 { position: absolute; z-index: 10; width: 320px; height: 240px; background-color:#333333; }
.fcam1 { top: 432px; left: 16px; }
.fcam2 { top: 444px; left: 337px; }
.fcam3 { top: 432px; left: 658px; }

.top { position: relative; z-index:3; top:0px; width:662px; background:url(../images/top-bg-v2.gif) no-repeat; margin:0 auto; }
.top-base { position: absolute; z-index:3; bottom: 68px; left:0px; background:url(../images/top-base.png) no-repeat; width:662px; height:30px; }

.heading { background:url(../images/title-bg.gif) no-repeat; width: 640px; height: 46px; margin:0 auto; text-align:left; }
.heading h1 { color:#FFF; margin:0; padding:6px 0 0 12px; font-size: 13px; }
.heading h2 { color:#00bbff; margin:2px 0 0 12px; font-size: 11px; font-weight: normal; }
a.home, a:hover.home, a.reload, a:hover.reload {
	float: right;
	display: block;
	width:36px;
	height: 36px;
	text-decoration:none; 
	cursor: pointer;
	font-size:1px;
	color:#222222;
	text-indent:-9000px;
}
a.home, a:hover.home { background:url(../images/cgerikh-ico-home.png) no-repeat; margin:4px 0 0 0; }
a.reload, a:hover.reload { background:url(../images/cgerikh-ico-reload.png) no-repeat; margin:4px 4px 0 -4px; }


.video-frame { position: relative; width: 648px; height: 276px; margin:4px auto 0 auto; }
.video { background:#333333; position: absolute; z-index:6; top:5px; left: 4px; width: 640px; height: 267px; }
.video img { display: block; }
.video-mask { position: absolute; z-index:9; top:0px; left: 0px; width: 648px; height: 276px; }
.vm-t, .vm-b { position: absolute; z-index:9; left:0px; }
.vm-t { top:0px; }
.vm-b { top: 265px; }
.video span { display: block; color:#ffffff; position: absolute; top:8px; left: 8px; z-index:9; background-color:#333333; border:1px solid #555555; padding:8px; }

.upper-panel-left, .upper-panel-right, .left-blend { position: absolute; z-index:1; text-align:left; }
.left-panel, .right-panel { position: absolute; z-index:3; text-align:left; }
.upper-panel-left { top: 21px; left: 7px; background:url(../images/top-panel-left.png) no-repeat; height:302px; width: 142px; }
.upper-panel-right { top: 21px; left: 847px; background:url(../images/top-panel-right.png) no-repeat; height:302px; width: 142px; }

.left-panel { top: 404px; left: 7px; background:url(../images/left-panel-bg.gif) repeat-y; /*background:url(../images/lower-panel-left.gif) no-repeat; height:439px; width: 250px;*/ width:142px; }
.right-panel { top: 404px; left: 847px; background:url(../images/right-panel-bg.gif) repeat-y; /*background:url(../images/lower-panel-right.gif) no-repeat; height:439px; width: 250px;*/ width:142px; }
.left-panel-edge { background:url(../images/left-panel-edge.gif) no-repeat; width:142px; height:90px; }
.right-panel-edge { background:url(../images/right-panel-edge.gif) no-repeat; width:142px; height:90px; }
.panel-content { min-height: 270px; }

.upper-left, .upper-right {position: absolute; top:21px; z-index:1; width:142px; }
.upper-left { left:7px; }
.upper-right { left:847px; }
.upper-content h1, .panel-content h1 { background:url(../images/panel-heading-v2.gif) top left no-repeat; width: 122px; height: 19px; margin:8px 0 0 8px; padding:3px 0 0 0; font-size: 10px; }
.upper-content p, .panel-content p { margin:0; padding:4px 6px 4px 8px; font-size:10px; }
.panel-content p strong { color:#00bbff; display: block; }
.upper-content h2 { background:url(../images/panel-bullet.gif) 0px 2px no-repeat; width: 142px; margin:8px 0 4px 0; padding:0 0 0 8px; font-size: 10px; }
.upper-content a, .panel-content a, .upper-content a:hover, .panel-content a:hover { text-decoration:none; }

.nav { position: relative; z-index:9; margin:16px auto 0 auto; width: 664px; height: 80px; }
.nav-bg { position: absolute; z-index:7; background:url(../images/nav-bg.png) no-repeat; width: 664px; height: 80px; top:0px; left:0px; }
.nav-options { position: absolute; z-index:8; top: 0px; left:0px; }
.nav-options a, .nav-options a:hover { 
	float: left; 
	display: block; 
	height: 80px; 
	text-decoration:none; 
	cursor: pointer;
	font-size:1px;
	color:#222222;
	text-indent:-9000px;
}

.nav-projects { width: 149px; background:url(../images/projects-off.png) no-repeat; }
.nav-resume { width: 120px; background:url(../images/resume-off.png) no-repeat; }
.nav-family { width: 129px; background:url(../images/family-off.png) no-repeat; }
.nav-gallery { width: 128px; background:url(../images/gallery-off.png) no-repeat; }
.nav-contact { width: 138px; background:url(../images/contact-off.png) no-repeat; }

.projects-on { width: 149px; background:url(../images/projects-on.png) no-repeat; }
.resume-on { width: 120px; background:url(../images/resume-on.png) no-repeat; }
.family-on { width: 129px; background:url(../images/family-on.png) no-repeat; }
.gallery-on { width: 128px; background:url(../images/gallery-on.png) no-repeat; }
.contact-on { width: 138px; background:url(../images/contact-on.png) no-repeat; }

.sub-shell { position: relative; z-index:2; top:-22px; left:164px; width:666px; text-align:center; }

.midsection, .mid-top, .mid-base { width: 666px; }
.mid-top { background:url(../images/midsection-top.png) no-repeat; height:29px; }
.mid-base { background:url(../images/midsection-base.gif) no-repeat; height:39px; }
.mid-content { background:url(../images/midsection-bg.gif) repeat-y; min-height: 500px; /* min content with IE6 override */  }

.unit, .unit-content, .unit-top, .unit-base { width: 650px; }
.unit { margin:0 auto; }
.unit-top, .unit-base { font-size: 1px; }
.unit-content { background:url(../images/unit-bg.gif) repeat-y; text-align:left; }
.unit-content h1, .unit-content h3 { color: #00bbff; margin:0 0 4px 0; padding:8px 0 0 0; }
.unit-top { background:url(../images/unit-top.gif) no-repeat; height:25px; }
.unit-base { background:url(../images/unit-base.gif) no-repeat; height:31px; }


.content640 { width: 640px; margin:0 auto; text-align:left; }
.content, .pet-content { padding:0 24px 0 24px; }
.content ul { margin:8px 0 8px 0px; padding:8px 0 8px 0px; list-style-type:none; }
.content li { background:url(../images/li.gif) 0px 3px no-repeat; padding:0 0 0 20px; }
.content ol li { background: none; padding:0; }
.content .date { color:#666666; display: block; font-size:10px; }

.thumb { position: relative; width: 124px; height:94px; }
.t-mask, .t-bg, .t-img { position: absolute; }
.t-mask, .t-bg { width: 124px; height: 94px; }
.t-mask {  top:0px; left:0px;  z-index: 19; }
.t-bg { top:0px; left:0px; z-index: 13; width:124px; height:94px; }
.t-img { z-index: 14; top:3px; left:3px; display: block; }
.panel-content .thumb { margin:8px 0 0 6px; }

.footer, .footer-top, .footer-base { width: 666px; }
.footer { background:url(../images/midsection-bg.gif) repeat-y; position: relative; min-height: 90px; }
.footer-top { background:url(../images/footer-top.gif) no-repeat; height:29px; }
.footer-base { position: absolute; bottom: -22px; left:0px; background:url(../images/footer-base.gif); height: 76px; }
.footer-base p { margin:0; float: right; width: 600px; text-align:right; font-size:10px; }
.base-spacer { height: 22px; }
.base-links { padding:12px 22px 0 0; color:#ff9000; }
.base-links a, .base-links a:hover { text-decoration:none; }
.base-copy { padding:0 24px 0 0; color:#666666; }
.base-copy span { display: block; padding:20px 0 0 0; }

/* misc */
.clear { clear: both; }
.center { text-align:center; }
.b,.sub { color: #00bbff; }
.r { color:#FF0000; }
.checkmark { vertical-align:middle; margin:-3px 0 0 0; }
.back { vertical-align:middle; margin:0; }
.as3cg { margin:8px 0 0 9px;}
.livecam { margin:1px 0 0 7px;}
.weblog { margin:8px 0 0 2px;}
.petmap { margin:4px 0 0 7px;}
.sub { display: block; }
.indent { padding: 12px; }
.camspace { height: 280px; }

/* carried over from 2007 - 2008 layout */
.cfield, .textarea, .button { border: 1px solid #444444; background-color:#222222; }
.section, .subsection, .button { font-weight: bold; }
.button { color:#cccccc; }
.cfield { color:#FFFFFF; width: 100px; vertical-align:middle; margin:4px 0 4px 0; }
.textarea { color:#FFFFFF; width: 300px; height: 95px; margin-top: 6px; }

.dotted, .navtop, .cg, .box_title, .project img, .block { display: block; }
.box_base, .prj_top, .prj_base { font-size:1px; }

.projects_left ul, .projects_right ul { margin:4px 0 12px 10px; padding-left: 10px; }
.project li { background:none; list-style-type: circle; padding:0; }
.projects_left, .projects_right { width:290px; float: left; }
.projects_left { margin:0 20px 0 0; }
.project, .prj_top, .prj_base { width: 290px; }
.project { background-color: #242424; }
.project h2 { margin:0 0 8px 0; }

.prj_top { height: 8px; background:url(../images/prj_top.gif) no-repeat; }
.prj_base { height: 7px; background:url(../images/prj_base.gif) no-repeat; }
.prj_pad { padding-left: 8px; }
.prj_image { margin-top: 8px; }

.pf { width: 290px; position: relative; margin:0 auto 8px auto; }
.pf_top, .pf_base, .pf_ss, .pf_info, .pf_info:hover { position: absolute; }
.pf_top, .pf_base { left: 0px; width: 290px; font-size: 1px; height: 9px; }
.pf_top { background-image:url(../images/pf_top.png);  z-index: 9; top: -2px; }
.pf_base { background-image:url(../images/pf_base.png); z-index: 9; bottom: -2px; }
.pf img { z-index:1; top: 0px; left:0px; }
/*
.pf_info { filter:Alpha(Opacity=0); -moz-opacity:0; opacity: 0; }
.pf_info:hover { filter:Alpha(Opacity=90); -moz-opacity:0.9; opacity:0.9; }
*/