/* ----------------------------------------------------------------*/
/*                                                                 */
/*       LAYOUT                                                    */
/*                                                                 */
/* ----------------------------------------------------------------*/
body {font:normal 11px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; color:#444; text-shadow:#f0f0f0 0 0 0; text-align:left; overflow-y:auto; -webkit-font-smoothing:antialiased; background-color:#f0f0f0; height:100%; width:100%; margin:0; padding:0;}	

@font-face {font-weight:normal; font-style:normal; 
font-family:"Variable-Regular"; 
src: url("textpattern/fonts/variable_regular.eot"); 
src: local("☺"), 
url("textpattern/fonts/variable_regular.woff") format("woff"), 
url("textpattern/fonts/variable_regular.ttf") format("truetype"), url("textpattern/fonts/variable_regular.svg#webfont3PB6KqGP") format("svg");}

a:link {color:#fff; font-weight:bold; text-decoration:none; padding:0 3px 0; background:#999; -webkit-border-radius:2px;}
a:visited {color:#fff; font-weight:bold; text-decoration:none; padding:0 3px 0; background:#ccc; -webkit-border-radius:2px;}
a:hover {color:#fff; font-weight:bold; text-decoration:none; padding:0 3px 0; background:#e20036; -webkit-border-radius:2px;}
a:active {color:#fff; font-weight:bold; text-decoration:none; padding:0 3px 0; background:#e20036; -webkit-border-radius:2px;}

h1 {font-family:"Variable-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing:subpixel-antialiased; font-size:14px; font-weight:normal; text-align:center; letter-spacing:1px; color:#333; margin:6px 0 20px;}
h1:after {content:""}

b {font-weight:bold;}
	
#container {height:100%; width:100%;}



/* ----------------------------------------------------------------*/
/*     Header, Main & Footer                                       */
/* ----------------------------------------------------------------*/
#header {color:#333; font-family:"Variable-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing:subpixel-antialiased; height:180px; width:960px; margin:0 auto;}

#header a:link {display:inline-block; font-weight:normal; text-decoration:none; color:#555; height:50px; padding:28px 0 0 15px; background:url("images/layout/slash.gif") no-repeat center left;}
#header a:visited {display:inline-block; text-decoration:none; color:#555; height:50px; padding:28px 0 0 15px; background:url("images/layout/slash.gif") no-repeat center left;}
#header a:hover {display:inline-block; text-decoration:none; color:#e20036; height:50px; padding:28px 0 0 15px; background:url("images/layout/slash.gif") no-repeat center left;}
#header a:active {display:inline-block; text-decoration:none; color:#e20036; height:50px; padding:28px 0 0 15px; background:url("images/layout/slash.gif") no-repeat center left;}	

#header a:link.noSlash {display:inline-block; text-decoration:none; color:#555; height:50px; padding:28px 0 0; background:none;}
#header a:visited.noSlash {display:inline-block; text-decoration:none; color:#555; height:50px; padding:28px 0 0; background:none;}
#header a:hover.noSlash {display:inline-block; text-decoration:none; color:#e20036; height:50px; padding:28px 0 0; background:none;}
#header a:active.noSlash {display:inline-block; text-decoration:none; color:#e20036; height:50px; padding:28px 0 0; background:none;}
	
#title {float:left; font-size:1.8em; height:50px; width:640px; padding:40px 0 0 20px;}
#title a:link.logo {display:inline-block; text-decoration:none; color:#555; height:50px; padding:28px 0 0 95px; background:url("images/layout/coolibaaLogo.gif") no-repeat center left;}
#title a:visited.logo {display:inline-block; text-decoration:none; color:#555; height:50px; padding:28px 0 0 95px; background:url("images/layout/coolibaaLogo.gif") no-repeat center left;}
#title a:hover.logo {display:inline-block; text-decoration:none; color:#e20036; height:50px; padding:28px 0 0 95px; background:url("images/layout/coolibaaLogoOn.gif") no-repeat center left;}
#title a:active.logo {display:inline-block; text-decoration:none; color:#e20036; height:50px; padding:28px 0 0 95px; background:url("images/layout/coolibaaLogoOn.gif") no-repeat center left;}
		
#titleMenu {float:left; font-size:1.8em; height:50px; width:300px; padding:40px 0 0;}

#main {width:960px; margin:0 auto; padding:0 0 0 20px;}
	
#footer {float:left; font-size:1em; height:60px; width:940px; margin:20px auto 0; padding:6px 0; background:url("images/layout/dottedLine.gif") no-repeat;}
#footerLeft {float:left; width:300px;}
#footerRight {float:left; text-align:right; width:640px;}



/* ----------------------------------------------------------------*/
/*     Home                                                        */
/* ----------------------------------------------------------------*/

/*   Cover   */
#homeCover {float:left; width:620px; margin:0 0 40px; background:url("images/layout/dottedLine.gif") no-repeat;}	
#homeCover ul {list-style-type:none;}
#homeCover ul li {float:left;}

#homeCover a:link {color:#fff; text-decoration:none; background:transparent; padding:0;}
#homeCover a:visited {color:#fff; text-decoration:none; background:transparent; padding:0;}
#homeCover a:hover {color:#fff; text-shadow:#e20036 0 0 0; text-decoration:none; background:transparent; padding:0;}
#homeCover a:active {color:#fff; text-shadow:#e20036 0 0 0; text-decoration:none; background:transparent; padding:0;}
	
#hoverInfo {z-index:100; position:absolute; font-family:"Variable-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing:subpixel-antialiased; letter-spacing:1px; color:#fff; text-decoration:none; font-size:4.5em; line-height:1.2em; font-weight:normal; text-shadow:#e20036 0 0 0; height:60px; width:600px; padding:5px 10px; margin:350px 0 0; background:#333; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;}

/*   Cover Navigation   */
#homeCoverNav {z-index:101; float:left; display:inline-block; position:relative; margin:330px 0 0;}
#homeCoverNav a:link {display:inline-block; position:relative; color:#fff; text-decoration:none; font-size:1em; text-align:center; text-shadow:#e20036 0 0 0; height:10px; width:30px; margin:0; padding:2px 5px 8px; background:#333; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;}
#homeCoverNav a:visited {display:inline-block; position:relative; color:#fff; text-decoration:none; font-size:1em; text-align:center; text-shadow:#e20036 0 0 0; height:10px; width:30px; margin:0; padding:2px 5px 8px; background:#333; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;}
#homeCoverNav a:hover {display:inline-block; color:#fff; background:#e20036; filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9;}
#homeCoverNav a:active {display:inline-block; color:#fff; background:#e20036; filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9;}
#homeCoverNav a:hover:after {content:"";}
#homeCoverNav a.activeSlide {color:#fff; background:#e20036; filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9;}
#homeCoverNav a:focus {outline:none;}

/*   Spotlight   */
#homeSpotLight {float:left; width:300px; margin:0 0 40px 20px; background:url("images/layout/dottedLine.gif") no-repeat;}
#homeSpotLight ul {list-style-type:none;}
#homeSpotLight ul li {float:left; margin:0 20px 15px 0;}
#homeSpotLight a:link {color:#fff; text-decoration:none; background:transparent; padding:0;}
#homeSpotLight a:visited {color:#fff; text-decoration:none; background:transparent; padding:0;}
#homeSpotLight a:hover {color:#fff; text-decoration:none; background:transparent; padding:0;}
#homeSpotLight a:active {color:#fff; text-decoration:none; background:transparent; padding:0;}

#hoverInfoSmall {z-index:100; display:block; position:absolute; font-family:"Variable-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing:subpixel-antialiased; letter-spacing:1px; color:#fff; text-decoration:none; font-size:2.2em; line-height:1.2em; font-weight:normal; text-shadow:#e20036 0 0 0; height:60px; width:280px; padding:5px 10px; margin:130px 0 0; background:#333; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;}
	
/*   Latest Blog Posts   */
#homeSub1 {float:left; font-size:1.1em; width:620px; margin:0 0 20px; background:url("images/layout/dottedLine.gif") no-repeat;}
#homeSub1 ul {list-style-type:none; margin:20px 0 0;}
#homeSub1 ul li {display:inline; float:left; margin:0 0 15px;}
#homeSub1 h2 {display:inline;}
#homeSub1 h2:after {content:" / ";}
#homeSub1 p {display:inline; font-size:1.0em;}

/*   Twitter Tweets   */
#homeSub2 {float:left; width:300px; margin:0 0 20px 20px; 
background:url("images/layout/dottedLine.gif") no-repeat;} 
#homeSub2 p {font-size:1.1em; margin:0 0 20px;}
.tweet, .query {color:#555;}
.tweet .tweet_list, .query .tweet_list {font-size:1.1em; list-style-type:none; margin:0; padding:0; background-color:transparent;}
.tweet .tweet_list .awesome, .tweet .tweet_list .epic, .query .tweet_list .awesome, .query .tweet_list .epic { text-transform:uppercase; }
.tweet .tweet_list li, .query .tweet_list li {overflow-y:auto; overflow-x:hidden; margin:0 0 10px; padding:0 0 10px; border-bottom:1px dotted #555;}
.tweet .tweet_list li a, .query .tweet_list li a {color:#fff; font-weight:bold;}
.tweet .tweet_list li a:hover, .query .tweet_list li a:hover {color:#fff; font-weight:bold;}
.tweet .tweet_list .tweet_even, .query .tweet_list .tweet_even {background-color:transparent;}
.tweet .tweet_list .tweet_avatar, .query .tweet_list .tweet_avatar {padding-right:.5em; float:left;}
.tweet .tweet_list .tweet_avatar img, .query .tweet_list .tweet_avatar img {vertical-align: middle; }



/* ----------------------------------------------------------------*/
/*     Work                                                        */
/* ----------------------------------------------------------------*/

/*   Project List   */
#projectList {float:left; width:960px; background:url("images/layout/dottedLine.gif") no-repeat;}
#procectList ul {list-style-type:none;}
#projectList ul li {float:left; margin:0 20px 15px 0; font-weight:normal;}

#projectList a:link {color:#fff; text-decoration:none; background:transparent; padding:0;}
#projectList a:visited {color:#fff; text-decoration:none; background:transparent; padding:0;}
#projectList a:hover {color:#fff; text-shadow:#e20036 0 0 0; text-decoration:none; background:transparent; padding:0;}
#projectList a:active {color:#fff; text-shadow:#e20036 0 0 0; text-decoration:none; background:transparent; padding:0;}

#projectDisplay {float:left; height:420px; width:620px; margin:0 0 40px;}
#projectText {float:left; width:300px; margin:0 0 0 20px;}


/* ----------------------------------------------------------------*/
/*     Blog                                                        */
/* ----------------------------------------------------------------*/

/*   Articles   */
#blogArticles {float:left; width:620px; margin:0 0 40px; background:url("images/layout/dottedLine.gif") no-repeat;}
#blogArticles ul {list-style-type:none;}
#blogArticles ul li {float:left; margin:0 0 60px;}
#blogArticles span {float:left; width:610px; margin:0 0 10px; padding:0 5px; background-color:#ddd; -webkit-border-radius:2px;}
#blogArticles h2 {font-family:"Variable-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing:subpixel-antialiased; font-size:3.2em; line-height:1.2em; font-weight:normal; margin:0 0 6px -1px;}
#blogArticles h3 {color:#222; font-size:1.5em; line-height:1.4em; font-weight:normal;}
#blogArticles p {font-size:1.3em; line-height:1.6em; width:620px; padding:0 0 20px;}
#blogArticles img {margin:0 0 10px;}

#rssIcon {float:right; height:14px; width:14px; margin:8px 0 0; background:url("images/layout/rss.png") no-repeat;}

#blogSide {float:left; width:300px;}

#articleList {float:left; font-size:1.1em; width:300px; margin:0 0 20px 20px; background:url("images/layout/dottedLine.gif") no-repeat;}
#articleList img {padding:0 0 0 20px;}	
#articleList ul {list-style-type:none; margin:20px 0 0;}
#articleList ul li {display:inline; float:left; margin:0 0 15px;}
#articleList h2 {display:inline;}
#articleList h2:after {content:" / ";}
#articleList p {display:inline; font-size:1.0em;}

/*   del.icio.us   */
#blogSub {float:left; width:300px; margin:0 0 20px 20px; background:url("images/layout/dottedLine.gif") no-repeat;} 
#blogSub ul li {font-size:1.1em;}



/* ----------------------------------------------------------------*/
/*     Profile                                                     */
/* ----------------------------------------------------------------*/

/*   Profile Portrait   */
#profilePortrait {float:left; width:940px; margin:0 0 40px; background:url("images/layout/dottedLine.gif") no-repeat;}
#profileInfo {z-index:100; font-family:"Variable-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing:subpixel-antialiased; letter-spacing:1px; display:block; position:absolute; width:580px; margin:0px 0 0; padding:10px 20px;}
#profileInfo p {font-size:3em; color:#e20036; text-shadow:transparent 0 0 0;}

#profileFacts {float:left; width:300px; background:url("images/layout/dottedLine.gif") no-repeat;}
#profileFacts img {padding:0 0 0 20px;}	
#profileFacts ul {list-style-type:none; margin:20px 0 0;}
#profileFacts ul li {display:inline; float:left; margin:0 0 15px;}
#profileFacts h2 {font-size:1.2em; display:inline;}
#profileFacts h2:after {content:" / ";}
#profileFacts p {font-size:1.2em; display:inline;}



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