/*-----------------------------------------------------
JohnCartago.com CSS Document
-----------------------------------------------------*/


/*----------------------
CSS Reset
----------------------*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, img, q, dl, dt, dd, ol, ul, li, legend, caption{
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
}
strong{font-weight:bold;}
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }
a{outline:none;}

/*-------------------
Quick Classes
---------------------*/

.fleft{float:left;}
.fright{float:right;}
.clear{clear:both;}

/*----------------------
Body Formatting
----------------------*/

body{
	padding: 0;
	margin: 0 auto;
	text-align: left;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #4D4D4D;
	background: url(/images/footerbg.jpg) bottom left repeat-x #fff;
	line-height: 1.5;
}

#container {
	width: 960px;
	height: auto;
	margin: 0 auto;
}

/*----------------------
Text Formatting
----------------------*/

p {
	font-size: 12px;
	line-height: 15px;
	color: #4d4d4d;
	margin: 0 0 8px;
}

h1 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 50px;
	font-weight: normal;
	color: #ccc;
	margin: 0;
	padding: 0;
	line-height: normal;
	letter-spacing: -4px;
	line-height: 1em;
}

h2 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: bold;
	font-style: italic;
	color: #4d4d4d;
	border-bottom: 1px solid #eaeaea;
	margin: 20px 0;
	padding: 0 0 10px 0;
	line-height: 1em;
}

h3 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	color: #999;
	line-height: normal;
}

.bubble p {
	color: #eaeaea;
	font-size: 11px;
	padding-right: 10px;
}

.bubble p span.portTitles {
	font-size: 11px;
	font-weight: bold;
	color: #ccc;
}

span.complete {color:#009900;}
span.progress {color:#FF9900;}
span.highlight {color:#4d4d4d;}

.smalltxt {
	font-size: 11px;
	color: #ccc;
	font-style: italic;
}

#footer p {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	color: #ccc;
	text-align: center;
}

/*----------------------
Link Formatting
----------------------*/

p a {
	color: #999;
	background: #eaeaea;
	border-bottom: 1px solid #ccc;
	text-decoration: none;
}

p a:hover {
	background: #eee;
	border-bottom: 1px solid #eaeaea;
}

a.launchLink{
	position: absolute;
	margin: 0 0 0 150px;
	width: 25px;
	height: 25px;
	background: url(/images/launch.png) no-repeat;
	border: none;
}
	a.launchLink:hover {
		background: url(/images/launch.png) top left no-repeat;
		border: none;
	}

	a.launchLink span {display:none;}

a.launchBtn {
	background: #eaeaea;
	border: 1px solid #ccc;
	text-decoration: none;
	padding: 5px 10px;
	margin: 10px 0 0;
}
	a.launchBtn:hover {
		background: #efefef;
		border: 1px solid #ddd;
	}

#twitterPost a {
	color: #999;
	text-decoration: none;
}

#twitterPost a:hover {
	color: #BFD73B;
}

.followLink {
	float: right;
	display: block;
}

/*----------------------
Header Formatting
----------------------*/

#topHeader {
	width: 100%;
	height: 71px;
	background: url(/images/headerbg.jpg) top left repeat-x;
}

#header {
	float: left;
	width: 960px;
	height: auto;
	margin: 0 0 51px 0;
}

/*----------------------
Banner Formatting
----------------------*/

#topBanner {
	float: left;
	width: 960px;
	height: auto;
	background: url(/images/headersplitter.jpg) bottom left no-repeat;
	padding: 0 0 30px 0;
	margin: 0 0 30px 0;
}

#bannerLeft {float: left;}

#bannerRight {
	float: right;
	width: 430px;
	height: 64px;
	background: url(/images/twitterbg.jpg) top left no-repeat;
	border: 1px solid #eaeaea;
}

#twitterPost {
	float: left;
	width: 360px;
	height: auto;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	padding: 10px 0 0 50px;
}

#twitter_update_list li {
	float: left;
	list-style: none;
}


#bannerMid {
	float: left;
	padding: 20px 0 0 205px;
}

/*----------------------
Main Content Formatting
----------------------*/

#mainContent {
	float: left;
	width: 960px;
	height: auto;
}

#contentLeft {
	float: left;
	width: 630px;
	height: auto;
	padding: 0 30px 0 0;
}
	#contentLeftPortfolio {
		float: left;
		width: 660px;
		height: auto;
	}

#contentRight {
	float: right;
	width: 300px;
	height: auto;
}

/*----------------------
Portfolio Formatting
----------------------*/

.featuredBoxFull {
	float: left;
	width: 630px;
	height: 240px;
	position: relative;
}

img.bigImg {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}

.featuredBoxFull .contentTbl {
	width: 100%;
	margin: 0 0 20px 0;
}
.featuredBoxFull .contentTblLeft {width: 120px;}

.featuredBox1 {
	float: left;
	width: 300px;
	height: auto;
	margin-right: 20px;
}
.featuredBox2 {
	float: left;
	width: 300px;
	height: auto;
}

.portfolioItem {
	float: left;
	width: 190px;
	height: 150px;
	padding: 0 30px 30px 0;
}

.portfolioItemHalf {
	position: relative;
	float: left;
	width: 300px;
	height: 270px;
	padding: 0 30px 30px 0;
	overflow: hidden;
}

.portfolioItemHalf .contentTblSmall {
	width: 100%;
	margin: 0 0 20px 0;
}
.portfolioItemHalf .contentTblLeft {width: 100px;}

.imgBorder {
	padding: 10px;
	background: #eaeaea;
}
	a img.imgBorder:hover {
		background: #ccc;
	}

/** Bubble Styling **/

.bubbleInfo {position: relative;}

.bubble {
    position: absolute;
    display: none; /* keeps the bubble hidden if no JS available */
	width: 190px;
	height: 170px;
	background: url(/images/bubble.png) top left no-repeat;
	color: #eaeaea;
	padding: 10px;
}

/** Carousel Formatting **/

.carousel{
	position: relative; /*leave this value alone*/
	overflow: scroll; /*leave this value alone*/
	width: 630px; /*Width of Carousel Viewer itself*/
	height: 240px; /*Height should enough to fit largest content's height*/
}

.carousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.carousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 630px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

/*----------------------
Contact Formatting
----------------------*/

#contactIcons {
	list-style: none;
}

#contactIcons li {float:left;}

#contactIcons li a span{display:none;}

#contactIcons li a.email{
	width: 34px;
	height: 33px;
	background: url(/images/icon_email.jpg) top left no-repeat;
	display: block;
	margin: 0 10px 0 0;
}

#contactIcons li a.twitter{
	width: 33px;
	height: 33px;
	background: url(/images/icon_twitter.jpg) top left no-repeat;
	display: block;
	margin: 0 10px 0 0;
}

#contactIcons li a.delicious{
	width: 32px;
	height: 33px;
	background: url(/images/icon_delicious.jpg) top left no-repeat;
	display: block;
	margin: 0 10px 0 0;
}


#contactIcons li a.flickr{
	width: 32px;
	height: 33px;
	background: url(/images/icon_flickr.jpg) top left no-repeat;
	display: block;
	margin: 0 10px 0 0;
}

#contactIcons li a:hover{background-position:bottom;}

#contactTbl {
	float: left;
	margin: 20px 0 0 0;
}

#contactTbl td {padding:0 0 10px 0;}

#contactTbl p {
	font-size: 11px;
	text-align: right;
	padding: 10px 0 0 0;
}

.textInput {
	width: 288px;
	height: 20px;
	background: url(/images/inputbg.jpg) top left no-repeat;
	border: 1px solid #eaeaea;
	font-size: 11px;
	padding: 10px 0 0 10px;
	cursor: pointer;
}

.textArea {
	width: 288px;
	height: 150px;
	background: url(/images/inputbg.jpg) #fff top left no-repeat;
	border: 1px solid #eaeaea;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 10px 0 0 10px;
	cursor: pointer;
}

.contactSubmit {
	width: 60px;
	height: 36px;
	background: url(/images/sendbtn.jpg) top left no-repeat;
	border: none;
	cursor: pointer;
}

/*----------------------
Resources Formatting
----------------------*/

#sideList {
	width: 290px;
	list-style: none;
}

#sideList li a {
	width: 290px;
	height: auto;
	color: #999;
	text-decoration: none;
	padding: 5px;
	display: block;
	border-bottom: 1px solid #ccc;
}

#sideList li a:hover {
	color: #BFD73B;
	border-bottom: 1px solid #eaeaea;
}

/*----------------------
Footer Formatting
----------------------*/

#footer {
	float: left;
	width: 960px;
	height: auto;
	background: url(/images/footersplitter.jpg) top left no-repeat;
	margin: 30px 0 0 0;
	padding: 30px 0 71px 0;
}

#footer p.footerIcons {
	padding: 0 0 0 466px;
}

#footer p.footerIcons span{display:none;}

#footer p.footerIcons a.htmlIcon {
	float: left;
	width: 16px;
	height: 11px;
	overflow: hidden;
	background: url(/images/icon_html.jpg) top left no-repeat;
	display: block;
}

#footer p.footerIcons a.cssIcon {
	float: left;
	width: 16px;
	height: 11px;
	overflow: hidden;
	background: url(/images/icon_css.jpg) top left no-repeat;
	display: block;
}

#footer p.footerIcons a.htmlIcon:hover,
#footer p.footerIcons a.cssIcon:hover {background-position:bottom;}