/* Sweetcron CGBox CSS - 08/09/2008
Table of Contents:
Reset
Typography
Positioning
Per-Domain Styling
IE Fixes
3rd Party
*/

/* ******************************************** */

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100% }
q:before, q:after { content:''}
a { text-decoration:none }
/* Global reset-RESET */

/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
* a { position:relative } /* Gets links displaying over a PNG background */
a img { border:none } /* Gets rid of IE's blue borders */


/* Basics
---------------------------------------------------------------------------------------- */
body{ background: url(images/dark-speckle3.gif) top left repeat fixed; font-family: "Helvetica Neue", helvetica, arial, sans-serif; color: #fff;  text-shadow: #000 0px 2px 0; font-size:1em; line-height: 1; word-wrap:break-word;-webkit-text-size-adjust:none;}
p { line-height: 1.5 !important; }
a{ color: #fff; text-decoration:none; border-bottom: 1px solid #fff; text-shadow: #000 0px 2px 0; }
a:hover{ text-decoration:none; border-bottom: none; color: #F5104C; text-shadow: #000 0px 2px 0px;}
.clear { clear:both;}


/* Typography
---------------------------------------------------------------------------------------- */
h1{ font-size:25px;}
h2  { font-size:15px;}

/*** Font Faces ***/
@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('fonts/Chunkfive-webfont.eot');
	src: local('☺'), url('fonts/Chunkfive-webfont.woff') format('woff'), url('fonts/Chunkfive-webfont.ttf') format('truetype'), url('fonts/Chunkfive-webfont.svg#webfont4CzPTNtF') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* Navigation
---------------------------------------------------------------------------------------- */
#header {margin:0 auto; width:80%; min-height:105px; height: auto; position:relative;}

.title-bubble { position: absolute; top: 0px; right: 0px; background:#F5104C; border:5px solid #c10536; line-height:1.5em; margin:10px auto; padding:20px 10px; text-align:center; width: 25%; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:0 0 5px #000; -webkit-box-shadow:0 0 5px #000; z-index: 99; -moz-transform: rotate(5deg); -webkit-transform:rotate(5deg);}
.title-bubble-arrow-border { border-color: #c10536 transparent transparent transparent; border-style: solid; border-width: 10px; height:0; width:0; position:absolute; bottom:-24px; right:30px;}
.title-bubble-arrow { border-color: #F5104C transparent transparent transparent; border-style: solid; border-width: 10px; height:0; width:0; position:absolute; bottom:-19px; right:30px;}
.title-bubble a:hover { color: #fff; text-shadow: #000 0 -2px 0px;}

.return-bubble { position: absolute; top: 30px; left: 0px; background:#0e5876; border:2px solid #0e5876; font-size: 0.8em; line-height:1.5em; margin:10px auto; padding:5px; text-align:center; min-width: 20%; -moz-border-radius:0px 10px 10px 0px; -webkit-border-top-right-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-box-shadow:0 0 5px #000; -webkit-box-shadow:0 0 5px #000; z-index: 99;}
.return-bubble-arrow-border { border-color: transparent #333 transparent transparent; border-style: solid; border-width: 17px; height:0; width:0; position:absolute; bottom:-3px; left:-40px;}
.return-bubble-arrow { border-color: transparent #0e5876 transparent transparent; border-style: solid; border-width: 17px; height:0; width:0; position:absolute; bottom:-3px; left:-36px;}
.return-bubble a { display:block; border-bottom: none; font-weight: bold;  color: #88bcd1; text-shadow: #111 0 2px 1px;}
.return-bubble a:hover { color: #ccc; text-shadow: #000 0 2px 0;}

.css-arrow-multicolor { border-color: black transparent transparent transparent; border-style:solid; border-width:10px; width:0; height:0;}
.css-arrow-right {border-color: transparent transparent transparent #333333;border-style:solid;border-width:10px 0 10px 20px;float:left;height:0;margin:0 10px;width:0;}

#header a {border-bottom: none;}

#overlay .ie6, 
#overlay .ie7,
#overlay .ie8 { display: none !important;}

#overlay .venn1 { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); -moz-border-radius: 600px; -webkit-border-radius: 600px; position: absolute; top: 10%; left: 42%; width: 350px; height: 350px; z-index: -1; position:fixed;}
#overlay .ampersand { background: url(images/ampersand.png) center no-repeat; position: absolute; top: 30%; left: 65%; width: 50px; height: 50px; z-index: -1; position:fixed;}
#overlay .venn2 { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.2); -moz-border-radius: 600px; -webkit-border-radius: 600px; position: absolute; top: 2%; right: 8%; width: 350px; height: 350px; z-index: -1; position: fixed;}



/* Main
---------------------------------------------------------------------------------------- */

div#main_container { clear: both; margin:0 auto; width:80%; height: auto; overflow: hidden; border: 1px solid #999; border: 1px solid rgba(255,255,255,0.3); -moz-border-radius: 10px; -webkit-border-radius: 10px; padding-bottom: 40px; -moz-box-shadow: inset #000 0px 1px 2px; -webkit-box-shadow: inset #000 0px 1px 2px; position:relative;}
ul#activity_list {}
ul#activity_list li.item {  float:none; list-style-type:none !important; border-bottom: 1px solid #999; border-bottom: 1px solid rgba(255,255,255,0.3); -moz-box-shadow: rgba(0,0,0,0.8) 0px 1px 2px; -webkit-box-shadow: rgba(0,0,0,0.8) 0px 1px 2px;}
ul#activity_list li.item:hover { background: rgba(255,255,255,0.1)}
div.item_inner{ position:relative; padding:5px;}
div.activity_list_inner img{float:left; margin-right:10px}
li.activity_item{clear:both;}
p.site_info img { padding: 7px 0 0 10px; float: left; margin: 0 10px 0px 0;}


/* Items, Per-Domain Styling
---------------------------------------------------------------------------------------- */
p.date { text-decoration:none; padding-left:3px;}
ul#activity_list li { clear: both;}
ul#activity_list li.item { width: 100%; padding-right: 60px;}
ul#activity_list li.item p.date {color:#999}
ul#activity_list li.item p.date{font-size:9px;}



/* Flickr */
li.item.flickr_com .item_inner { background-color:#fff;}
a.activity_image{display:block;}
p.activity_image_text{position:absolute; top:0; padding:3px 5px; background:black; display:none;}
p.activity_image_text{line-height:1.5em}

/* ColourLovers */
a.activity_image{display:block;}
p.activity_image_text{position:absolute; top:0; padding:3px 5px; background:black; display:none;}
p.activity_image_text{line-height:1.5em}

/* Vimeo */
li.item.vimeo_com div.item_inner object{border:1px solid white; border-style:none none solid none}

/* Twitter */
p.twitter_user img{display:block; text-align:left;}
p.twitter_user{ display: none;}
p.twitter_tweet{padding:8px 10px; padding-left: 50px;}

/* Dribbble */
.dribbble_image{ border: 5px solid rgba(0,0,0,0.5); margin-left: 45px; width: 50%; min-height: 100px;}
p.dribbble_image_text{ float: right; margin: 5px; text-align: center; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #000; background: rgba(0,0,0,0.85); width: 200px; padding: 5px;}
p.dribbble_image_text a { border-bottom: none; display: block;}

/* LastFM */
p.wsaudioscrobblercom_song{ padding:8px 10px; overflow:hidden;margin:0 10px}
p.wsaudioscrobblercom_song a { color:#fff;}

/* Delicious */
p.delicious_link{padding:8px 10px; overflow:hidden;}

/* Dopplr */
p.dopplr_link{ padding:8px 10px; overflow:hidden;}

/* LinkedIn */
p.linkedin_link{ position:absolute; top:90px; right:0px; padding:8px 10px; background-color:#FFF;overflow:hidden;}

/* CG Blog */
ul#activity_list li.item.carbongraffiti_com div.item_inner{position:relative;}
ul#activity_list li.item.carbongraffiti_com div.inner_container{padding:8px 10px;}
p.blog_title {margin:10px 0 15px 50px; padding-right: 140px; font-family: "ChunkFiveRegular", Georgia, "Times New Roman", Times, serif; text-transform: uppercase; font-weight: bold; font-size:180%; }
p.blog_cite{  position:absolute; bottom:10px; right:0px; border:1px solid #eee; font-family: baskerville, georgia, times, serif; font-style: italic; border-width:1px 0px 1px 0px; padding-right: 5px; font-size: 90%; color: #ccc}

/* SweetCron Blog */
ul#activity_list li.item.carbongraffiti_com div.inner_container{padding:8px 10px; }
p.curly { font-size:300%; font-family:Georgia, "Times New Roman", Times, serif; line-height:100%; margin:0px; color:#999}

/* YouTube */
ul#activity_list li.item.youtube_com div.item_inner{background:#FE3333 url(images/youtubeback.gif) bottom right repeat-x;}
ul#activity_list li.item.youtube_com div.item_inner object{border:1px solid white; border-style:none none solid none; margin-bottom:7px;position:relative; z-index:0;}
ul#activity_list li.item.youtube_com div.item_inner p{padding:0 10px}

/* Digg */
ul#activity_list li.item.digg_com div.item_inner{background:#1b5790 url(images/diggback.gif) bottom right no-repeat}
li.item.digg_com div.item_inner{color:#7698b7}
li.item.digg_com .inner_container .digg_title { background-color:#fff; padding:3px; text-align:center;}
li.item.digg_com .inner_container .digg_title a { color:#333}
li.item.digg_com .inner_container p { padding-top:5px;}


/* Footer
---------------------------------------------------------------------------------------- */
div#footer{ width: 80%; height: 50px; margin: 0 auto; padding: 10px; position:relative;}
div#footer p {text-align: right; color: #ccc}

div#footer #logo { float: left;}

div#footer p#pagination { font-size: 0.9em;}
div#footer p#pagination a { background: #fff; margin: 0 2px; background: rgba(255,255,255,0.3); padding: 2px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-bottom: none;}
div#footer p#pagination a:hover { color: #000; text-shadow: #fff 0px 1px 0px; background: #fff; background: rgba(255,255,255,0.8);}
div#footer p#copyright { font-size: 0.7em; margin-top: 15px;}
div#footer p#rss { font-size: 0.7em; margin-top: 5px;}
div#footer a { text-shadow: #000 0px 1px 0;border-bottom: none;}
div#footer a:hover { text-shadow: #000 0px 1px 0;}
a.rss { padding-right:20px; background:url(images/feedicon.png) no-repeat right;} 


/* IE Fixes (lulz)
---------------------------------------------------------------------------------------- */


/* 3rd Party
---------------------------------------------------------------------------------------- */
a.tt{ position:relative; z-index:24; font-weight:bold; text-decoration:none}
a.tt span{display:none}
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{z-index:25; color:#fff;}
a.tt:hover span.tooltip{ font-size: 0.6em; display:block; background:#063D53; position:absolute; top:12px; left:0px; padding:5px; width:150px; color:#fff; border: 6px solid #032533; text-align:center; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
a.tt:hover span.top{display:block; padding:2px;  background:url(bubble.gif) no-repeat top}
a.tt:hover span.middle{/* different middle bg for stretch */display:block; padding:0 4px; }
a.tt:hover span.bottom{display:block; padding:2px;}


@media (max-width: 600px) {

#overlay .ampersand { background: url(images/ampersand.png) center no-repeat; position: absolute; top: 50%; left: 65%; width: 50px; height: 50px; z-index: -1; position:fixed;}

.title-bubble h1 { font-size: 13px;}
.title-bubble { position: absolute; top: 25px; right: -30px; background:#F5104C; border:5px solid #c10536; line-height:1em; margin:10px auto; padding:5px 5px; text-align:center; width: 40%; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:0 0 5px #000; -webkit-box-shadow:0 0 5px #000; z-index: 99; -moz-transform: rotate(5deg); -webkit-transform:rotate(5deg);}

.return-bubble { position: absolute; top: 30px; left: 0px; background:#0e5876; border:2px solid #0e5876; font-size: 0.7em; line-height:1.5em; margin:10px auto; padding:5px; text-align:center; min-width: 20%; -moz-border-radius:0px 10px 10px 0px; -webkit-border-top-right-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-box-shadow:0 0 5px #000; -webkit-box-shadow:0 0 5px #000; z-index: 99;}
.return-bubble-arrow-border { border-color: transparent #333 transparent transparent; border-style: solid; border-width: 17px; height:0; width:0; position:absolute; bottom:-3px; left:-37px;}
.return-bubble-arrow { border-color: transparent #0e5876 transparent transparent; border-style: solid; border-width: 17px; height:0; width:0; position:absolute; bottom:-3px; left:-36px;}

p.blog_title {margin:10px 0 35px 50px; padding-right: 10px; font-family: "ChunkFiveRegular", Georgia, "Times New Roman", Times, serif; text-transform: uppercase; font-weight: bold; font-size:180%; }

}