@import url("reset.css");
@import url("work.css");
@import url("forms.css");
@import url("browser.css");

/* FONT FACE */
/* --------------------------------------------- */
 @font-face {
 font-family: 'GoodDogRegular';
 src: url('GoodDog-webfont.eot');
 src: local('?'), url('GoodDog-webfont.woff') format('woff'), url('GoodDog-webfont.ttf') format('truetype'), url('GoodDog-webfont.svg#webfonty5Sc1MDJ') format('svg');
 font-weight: normal;
 font-style: normal;
}
 @font-face {
 font-family: 'VollkornRegular';
 src: url('vollkorn-regular-webfont.eot');
 src: local('?'), local('VollkornRegular'), url('vollkorn-regular-webfont.woff') format('woff'), url('vollkorn-regular-webfont.ttf') format('truetype'), url('vollkorn-regular-webfont.svg#webfontPIvkdbJ8') format('svg');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'AdelleBasicBold';
 src: url('adellebasic_bold-webfont.eot');
 src: local('?'), local('AdelleBasicBold'), url('adellebasic_bold-webfont.woff') format('woff'), url('adellebasic_bold-webfont.ttf') format('truetype'), url('adellebasic_bold-webfont.svg#webfontaqCIGsWW') format('svg');
 font-weight: normal;
 font-style: normal;
}
 @font-face {
 font-family: 'GoudyBookletter1911Regular';
 src: url('goudy_bookletter_1911-webfont.eot');
 src: local('?'), url('goudy_bookletter_1911-webfont.woff') format('woff'), url('goudy_bookletter_1911-webfont.ttf') format('truetype'), url('goudy_bookletter_1911-webfont.svg#webfontIiZ2NHt1') format('svg');
 font-weight: normal;
 font-style: normal;
}
 @font-face {
 font-family: 'ChunkFiveRegular';
 src: url('chunkfive-webfont.eot');
 src: local('?'), url('chunkfive-webfont.woff') format('woff'), url('chunkfive-webfont.ttf') format('truetype'), url('chunkfive-webfont.svg#webfontHPiCSzOx') format('svg');
 font-style: normal;
 font-weight: normal;
}

/* GLOBAL STYLES */
/* --------------------------------------------- */

* {
	margin: 0;
	padding: 0;
}

a {
	border: none;
	color: #0CF;
	outline: none;
	text-decoration: none;
}

a:hover { text-decoration: underline; }

h1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 6px;
	text-indent: -900px;
}

h4, h5, h1 a, h2 a, h5 a {
	font-family: 'AdelleBasicBold', Georgia, Times, sans-serif;
	letter-spacing: 1px;
}

h2, h2 a {
	color: #AF571D;
	font:bold 26px Georgia, "Times New Roman", Times, serif;
	letter-spacing:0.5px;
	margin: 8px 0 5px 0;
	text-decoration:none;
}

h2 img {
	float: right;
	margin: -7px 7px 0 0;
}

h3 {
	border-bottom: 2px #222 dotted;
	clear:both;
	color: #999;
	font:15px Georgia, serif;
	margin: 0 0 5px 0;
	padding:0 0 5px 0;
}

h4, h4 a {
	color: #AF571D;
	font: bold 22px Georgia, "Times New Roman", Times, serif;
	margin: 12px 0 3px 0;
}

h5, h5 a {
	color: #AF571D;
	font-size: 18px !important;
	margin: 0 0 5px 0;
}

.new-project {
	background: transparent url(../images/new-proj-icon.png) no-repeat;
	height: 85px;
	left: 410px;
	position: absolute;
	top: 220px;
	width: 230px;
	z-index: 100;
}

/* BODY / WRAPPER */
/* --------------------------------------------- */

body {
	background: url(../images/CM-BG.jpg) repeat-x top left #000;
	color: #CCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 95%;
}

#wrapper {
	margin: 0 auto;
	position: relative;
	width: 960px;
}

/* HEADER */
/* --------------------------------------------- */

#header {
	background: transparent url(../images/CM-Header-BG.png) no-repeat;
	clear: both;
	height: 83px;
	width: 960px;
}

#header div, ul, li, li a { float: left; }

#header h1 a {
	background: transparent url(../images/CM-Logo-H1.png) no-repeat;
	clear: none;
	display:block;
	float: left;
	height: 27px;
	margin: 35px 0 0 100px;
	width: 313px;
}

#header p {
	color: #F9F9F9;
	display: block;
	float: right;
	margin: 22px 85px 0 0;
	text-shadow: 1px 2px 2px #111;
	width: auto;
}

#header p.GD {
	font-family:'GoodDogRegular', Georgia, serif;
	font-size:40px;
	font-weight: normal;
	font-style: normal;
}

.tagline {
	background: transparent url(../images/Portfolio-Img.png) no-repeat;
	height: 38px;
	margin: 25px 0;
	width: 224px;
}

/* GLOBAL NAV */
/* --------------------------------------------- */

#global-nav {
	/*display: none;*/
	height: 35px;
	margin: 39px 0 0 110px;
	width: 370px;
}

#global-nav li a {
	background: transparent url(../images/CM-Nav-Up.png) no-repeat;
	font-size: 6px;
	height: 17px;
	overflow: hidden;
	text-indent: -900px;
}

#global-nav li a.About {
	background-position: 0px -21px;
	width: 81px;
}

#global-nav li a.Work {
	background-position: -81px -21px;
	width: 83px;
}

#global-nav li a.Demo {
	background-position: -164px -21px;
	width: 80px;
}

#global-nav li a.contact {
	background-position: -244px -21px;
	width: 122px;
}

#global-nav li a:hover, #global-nav li a.About-Focus, #global-nav li a.Work-Focus, #global-nav li a.Demo-Focus, #global-nav li a.Contact-Focus { background: transparent url(../images/CM-Nav-Up.png) no-repeat; }

#global-nav li a.About:hover, #global-nav li a.About-Focus {
	background-position: 0px 0px !important;
	width: 81px;
}

#global-nav li a.Work:hover, #global-nav li a.Work-Focus {
	background-position: -81px 0px !important;
	width: 83px;
}

#global-nav li a.Demo:hover, #global-nav li a.Demo-Focus {
	background-position: -164px 0px !important;
	width: 80px;
}

#global-nav li a.contact:hover, #global-nav li a.contact-Focus {
	background-position: -244px 0px !important;
	width: 122px;
}

a.view {
	font:12px Arial, Helvetica, sans-serif !important;
	margin: 0 5px;
}

a.view:hover { text-decoration:underline; }

a.sub-link {
	font-size: 12px;
	margin: 0 0 0 530px;
}

a.sub-link:hover {
	border-bottom: 1px dotted #F90;
	color: #F90;
}

.intro-img-bg {
	background: url(../images/content-img-BG.gif) repeat-x;
	border: solid 2px #FFF;
	height: 275px;
	margin-bottom: 5px;
	width: 600px;
}

.sm-img { float: right; }

.work-type, .tools {
	color: #0CF;
	font: 15px Georgia, serif !important;
}

/* MAIN BODY */
/* --------------------------------------------- */

#main-body {
	background: url(../images/Main-Body-BG.gif) repeat-y right;
	float: left;
	line-height: 1.6em;
	margin: 1px 0 0 0;
	padding: 0 0 5px 0;
	position: relative;
	width: 960px;
	z-index: 0;
}

#main-body div { float: left; }

/* CONTENT */
/* --------------------------------------------- */

#content {
	float: left;
	font:13px/18px Arial, Helvetica, sans-serif;
	margin:0 0 20px 0;
	padding:20px;
	width: 620px;
}

.lg-img, .lg-img a {
	border: 2px #FFF solid;
	display:block;
	float: left;
	height: 276px;
	margin: 0 0 15px 0;
	width: 600px;
}

.lg-img span {
	background:url(../images/hov-bg.png) repeat;
	color:#CCC;
	display:block;
	font: italic 24px/30px 'Georgia', serif;
	height:151px;
	width:600px;
	opacity:0;
	padding:125px 0 0 0;
	text-align:center;
}

a.MIP {
	background:url(../images/MIP-img.jpg) no-repeat;
	height:276px;
	width:600px;
}

.lg-img a:hover { text-decoration:none !important; }

.content-thumb {
	clear: none;
	display: inline;
	float: left;
	margin: 5px 10px 5px 0;
}

#content p {
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
}

#content p a {
	color: #0CF;
	font-family: 'Georgia', serif;
}

#content p a:hover { text-decoration: underline; }
 html:lang(en)>body #content p {
 font-size: 13px;
}

/* RESUME CONTENT */
/* --------------------------------------------- */

#content.resume h3 {
	-webkit-text-size-adjust:100%;
	border: none;
	clear: both;
	color: #FFF;
	font:16px Arial, Helvetica, sans-serif !important;
	margin: 10px 0 0 5px;
	padding:0 0 5px 0;
}

#content.resume p {
	border: none;
	color: #999;
	font-size: 13px;
	margin: 1px 5px 4px 6px;
}

#content.resume p.work-experience {
	border-bottom: 2px #222 dotted;
	margin: 0 0 10px 5px;
	padding:0 0 10px 0;
}

a.resume-link { color: #09F; }

a.resume-link:hover { text-decoration: underline; }

.work-place, .work-length {
	color: #AF571D;
	font-size: 16px;
	margin: 0 0 0 10px;
}

.work-length {
	color: #666;
	font-size: 13px;
}

#resume-pdf a {
	background: url(../images/PDF-img.jpg) no-repeat;
	float: left;
	height: 36px;
	width: 128px;
}

#resume-pdf a:hover {
	border: 1px dotted #09F;
	height: 38px;
	margin: -1px;
	width: 130px;
}

/* POST STYLES */
/* --------------------------------------------- */

.post-date {
	color: #666;
	font: 12px Arial, Helvetica, sans-serif;
	letter-spacing: 1pt;
	text-decoration: none;
}

.post {
	border-top: 2px #222 dotted;
	float: left;
	height: 100%;
	margin: 5px 0;
	padding: 5px 0 0 0;
	position: relative;
	width: 600px;
	z-index: 5;
}

.post p {
	-webkit-text-size-adjust:100%;
	color: #CCC;
	font: 13px/20px Arial, Helvetica, sans-serif;
	margin: 0;
}

.info {
	float: left;
	width: 400px;
}

.post-img-link a {
	border: 2px #FFF solid;
	display:block;
	float: left;
	height: 148px;
	margin: 10px 12px 8px 0;
	width: 163px;
}

.post-img-link a:hover { text-decoration:none !important; }

.post-img-link span {
	background:url(../images/hov-bg.png) repeat;
	color:#CCC;
	display:block;
	font: italic 16px/22px 'Georgia', serif;
	height:88px;
	width:163px;
	opacity:0;
	padding:60px 0 0 0;
	text-align:center;
}

a.post-Legal {
	background:url(../images/post-img-LegalBlog.jpg) no-repeat;
	height:150px;
	width:165px;
}

a.post-DRA {
	background:url(../images/post-img-DrA.jpg) no-repeat;
	height:150px;
	width:165px;
}

a.post-Kerpsack {
	background:url(../images/post-img-kerpsack.jpg) no-repeat;
	height:150px;
	width:165px;
}

a.post-Grunge {
	background:url(../images/post-img-GrungeStamp.jpg) no-repeat;
	height:150px;
	width:165px;
}

a.post-VC {
	background:url(../images/post-img-VC.jpg) no-repeat;
	height:150px;
	width:165px;
}

a.post-Begley { background:url(../images/post-img-Begley.jpg) no-repeat; }

.post a.view {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #222;
	color: #CCC;
	font-size: 10px !important;
	height: 45px;
	margin: 0 15px 0 0;
	padding: 2px 8px;
	text-transform: uppercase;
	width: 100%;
}

.post a.post-work {
	color: #0CF;
	font-size: 11px;
	margin: 0 5px 0 0;
}

.post-date-sm {
	color: #666;
	font-size: 11px;
	margin: 0 15px;
}

.post-img {
	border: 2px #FFF solid;
	clear: none;
	float: left;
	height: 148px;
	margin: 10px 12px 8px 0;
	width: 163px;
}

.post-img:hover { border: 2px #0CF solid; }

.stico_default { margin: 0 5px; }

.stbuttontext {
	color: #FFF;
	font-size: 11px;
	text-decoration: none;
}

.stbuttontext a:hover { text-decoration: underline; }

a.stbutton { display: inline; }

/* DEMO & VIDEO */
/* --------------------------------------------- */

#demo-reel {
	border: 1px #FFF solid;
	height: 338px;
	margin: 0 0 15px 0;
	width: 601px;
}

#MC, #TR, #MC2, #MTV {
	height: 214px;
	width: 285px;
}

.small-vid {
	border: 1px #666 solid;
	display: block;
	margin: 0 20px 35px 0;
}

#MC.small-vid h3, #TR.small-vid h3, #MC2.small-vid h3, #MTV.small-vid h3 {
	border: none;
	color: #666;
	font: 12px Georgia, serif;
	margin: 8px 0;
	text-align: center;
}

div.vid-divide {
	border-bottom: 2px dotted #222222;
	clear: both !important;
	height: 10px;
	margin: 0 0 20px 0;
	outline: medium none;
	width: 96%;
}

#reel-tools {
	background: url(../images/reel-tools.png) no-repeat;
	float: right !important;
	float: right;
	height: 36px;
	margin: -30px 25px 0 0;
	width: 105px;
}

#reel-tools li a {
	float: left;
	height: 36px;
	width: 35px;
}

#reel-tools li a:hover { opacity: 0.5; }

.ae a { background: url(../images/reel-tools.png) no-repeat 0 0; }

.motion a { background: url(../images/reel-tools.png) no-repeat -35px 0; }

.fcp a { background: url(../images/reel-tools.png) no-repeat -70px 0; }

body.work-samples { background: #000; }

/* SIDEBAR */
/* --------------------------------------------- */

#sidebar {
	background: #181818 repeat-y bottom;
	font-size: 12px;
	margin: 6px 0 0 0;
	width: 300px;
}

#sidebar a {
	font-size: 12px;
	line-height:1em;
}

#sidebar-spacer {
	background-color: #181818;
	background-position: bottom;
	background-repeat: repeat-y;
	width: 300px;
}

/* REENT PROJECTS */
/* --------------------------------------------- */

#recent-projects {
	height:auto;
	margin:0 0 5px 0;
	padding:10px 0 0 13px;
	width:287px;
}

img.recent {
	border:none;
	margin:15px 0;
	outline:none;
}

/*div.recent-img {
	background:url(../images/Recent-newman.jpg) no-repeat;
	display:block;
	height:100px;
	margin:0 0 10px 0;
	position:relative;
	width:274px;
	z-index:1;
}*/

.recent-img a {
	background:url(../images/Recent-newman.jpg) no-repeat;
	display:block;
	height:100px;
	margin:0 0 10px 0;
	width:274px;
}

.recent-img span {
	background:url(../images/Recent-hov.png) no-repeat 0 0;
	color:#CCC;
	display:block;
	font: italic 16px/22px 'Georgia', serif;
	height:62px;
	opacity:0;
	padding:38px 0 0 0;
	text-align:center;
	width:274px;
}

.recent-img a:hover { text-decoration:none !important; }

p.recent-text {
	font:11px/16px Arial, Helvetica, sans-serif;
	margin:2px 0;
}

#recent-proj-list { margin: 3px 5px 10px 25px; }

#recent-proj-list li { width: 260px; }

#recent-proj-list li a {
	background: transparent url(../images/li-arrow.png) 0 80% no-repeat;
	padding: 6px 0 5px 15px;
}
a[href^="pages/recent-projects.php"] {
 background: none;
}

/* TWITTER */
/* --------------------------------------------- */

#tweet {
	color: #BFB9AA;
	font-size: 11px;
	height: auto;
	letter-spacing: 0.5pt;
	margin: 0 0 10px 0;
	text-align: left;
	width: 300px;
}

#tweet li {
	border-bottom: dashed thin #3a3a3a;
	line-height: 1em;
	margin: 5px 5px 5px 15px;
	overflow: hidden;
	padding:0 0 5px 0;
	width: 270px;
}

#tweet li a {
	clear: both;
	color: #0CF;
	float: none;
	font-size: 14px;
	margin: 0;
	padding: 0;
}

#twitter-rss a {
	background: transparent url(../images/twitter-rss-btn.png) no-repeat -24px 0;
	float: none;
	height: 24px;
	left: 183px;
	position: absolute;
	top: 219px;
	width: 24px;
}

#twitter-rss a:hover { background: transparent url(../images/twitter-rss-btn.png) no-repeat; }

#twitter-url a {
	clear: none;
	color: #181818;
	float: none;
	font-size: 14px;
	margin: 5px 0 5px 40px;
}

/* FIND ME */
/* --------------------------------------------- */

#find-me { padding:20px 0 10px 20px; }
html:lang(en) > body #find-me {
width:285px;
}

#find-me li {
	width:107px;
	margin:0 33px 37px 0;
}

#find-me li img { float:left; }

#find-me li a {
	font-size: 12px;
	padding: 8px 0 0 8px;
	text-transform: uppercase;
}

/* CONNECT */
/* --------------------------------------------- */

#connect {
	height: auto;
	width: 300px;
}

#phone {
	color: #CCC;
	font-size: 14px;
	height: 100%;
	margin-bottom: 30px;
	width: 300px;
}

#phone a {
	color: #0CF;
	float: none;
	font-size: 14px;
}

#phone ul { margin: 10px 0 0 20px; }

#phone li {
	padding:5px;
	width: 270px;
}

.contact-numbers { color: #0CF; }

/* FOOTER */
/* --------------------------------------------- */

#footer {
	background: url(../images/CM-Footer-BG.jpg) repeat-x;
	border-bottom: 2px solid #999;
	border-top: 2px solid #999;
	float: left;
	height: 230px;
	width: 100%;
}

#footer p a {
	border-bottom: 1px dotted #CCC;
	color: #fff;
}

#footer p a:hover {
	border-bottom: 1px dotted #0CF;
	color: #0CF;
}

.footer-link-title { margin:20px 0 0 0; }

/* FOOTER LINKS */
/* --------------------------------------------- */

#footer-link-wrap {
	margin: 0 auto;
	position: relative;
	width: 960px;
}

#footer-links { width: 960px; }

#footer-links span { text-decoration: line-through; }

#footer-links ul { margin: 17px 34px 0 0; }

#footer-links li {
	clear: both;
	min-width: 145px;
}

#footer-links li.fav-blogs {
	background: url(../images/Fav-Blogs.png) no-repeat 0 0 transparent;
	height: 40px;
	margin: 0 0 5px 0;
	width: 145px;
}

#footer-links li.resources {
	background: url(../images/Web-Resources.png) no-repeat 0 0 transparent;
	height: 40px;
	margin: 0 0 5px 0;
	width: 145px;
}

#footer-links li.clients {
	background: url(../images/Client-Links.png) no-repeat 0 0 transparent;
	height: 40px;
	margin: 0 0 5px 0;
	width: 145px;
}

#footer-links li a {
	color: #0CF;
	font:13px/15px 'ChunkFiveRegular', Arial, Helvetica, sans-serif;
	letter-spacing: 1.5pt;
	padding: 3px 0 8px 14px;
	text-shadow: 1px 1px 2px #111;
}

#footer-links li a:hover {
	background: url(../images/li-arrow.png) no-repeat scroll 0 30% transparent;
	text-decoration:none;
}

/* FACE BUBBLE */
/* --------------------------------------------- */

.ET-name-bg {
	float: left;
	margin: 15px 0 0 29px;
}

.blurb {
	font: 13px/23px Georgia, Times, serif;
	position: absolute;
	right: 96px;
	top: 20px;
	width: 250px;
}

/* BOTTOM LINKS */
/* --------------------------------------------- */

#bot-footer-links {
	clear: both;
	height: 25px;
	margin: 0 auto;
	width: 960px;
}

#bot-footer-links ul {
	float: right;
	margin: 0 34px 0 0;
}

#bot-footer-links li a {
	color: #F90;
	float: left;
	font: small-caps 13px sans-serif;
	margin: 5px 15px 10px 0;
}

#bot-footer-links a:hover { color: #CCC; }

#bot-footer-links p {
	color: #FFF;
	float: left;
	font: 11px sans-serif;
	margin: 7px 0 0 29px;
}

#bot-footer-links img {
	border: none;
	float: left;
	margin: 2px 0 0 0;
	outline: none;
}

#bot-footer-links img:hover { border-bottom: 1px #CCC solid; }