/* css3 document */

/* Designed by Red Balloon - www.redballooncreative.com */

/***********************************
Reset 
***********************************/

@import url("reset.css");


/***********************************
Layout 
***********************************/

body { margin: 0px; margin-top: 5px; }

#header { width:100%; height: 50px; background:url(images/header-15.png) repeat-x; border-top-style: solid; border-top-width:1px; border-bottom-style:solid; border-bottom-width:1px;}

/* #sidebar { width:244px; padding: 6px 8px 72px 8px; margin-bottom: 0px; float:left; position: relative;} */
#sidebar { width:244px; padding: 0px 8px 62px 8px; position: absolute;	top: 63px; left: 0px;	bottom: 0px; }

#frame {	position: absolute;	top: 63px; left: 260px;	right: 5px;	bottom: 5px; overflow: auto; border-style: solid; border-width: 1px;}

iframe#mainframe { width: 100%;	height: 100%;	border: none;	margin: 0;	left: 0;	top: 0;	bottom: 0;	right: 0;	position: absolute; z-index: 1000; }
iframe#contactmeframe { width: 100%;	height: 100%;	border: none;	margin: 0;	left: 0;	top: 0;	bottom: 0;	right: 0;	position: absolute; visibility: hidden; z-index: 500; }

#main {padding: 20px 30px; padding-bottom: 10px; width: 640px; position: relative; }

/***********************************
Typography 
***********************************/

/*** Base ***/
body { font-size:62.5%; /* Resets font size to 10px */
			 font-family:"Lucida Grande", "Lucida Sans", Verdana, Helvetica, Arial;}

div.scrollable div.items div a, #title p, #sidebar p, h4, a.link, #sidebar dt, #sidebar dd, #sidebar li {font-size: 1.1em; line-height: 1.3em;}
#sidebar p { margin-bottom: 5px; text-align: justify; }
.about-me p {padding: 0px 2px;}

#main p, h3, button.submit, #main dt, #main dd, #main li  {font-size: 1.2em; line-height: 1.5em;}
#main p { margin-bottom: 12px; }


#sidebar dl.latest-activity dd {font-size: 1em; line-height: 1.4em;}

/*** Links ***/

a, p a {text-decoration:none;}

a:link {text-decoration:none;}
a:visited { }
a:hover {text-decoration:none;}
a:active { }

a.link { position: absolute; top:3px; right: 3px; 
				 display: block; padding: 4px 7px 5px 7px;
				 border: 1px solid; 
				 background-image:url(images/link.png); background-position: bottom; background-repeat: repeat-x;
				 text-align: center; }

a.link, button {-moz-border-radius: 5px; -webkit-border-radius: 5px;}

/*** Lists ***/

ul, ol, li {list-style-position:inside;}

dt, dd {margin-bottom: 4px; padding-bottom: 4px; }
dt {width: 45px; float: left; text-align: right; padding-right: 20px; font-weight: bold; background-position: right 2px; background-repeat: no-repeat;}
#sidebar dt {width: 35px;}
#main dt {background-position: right 4px;}

dt.nofloat { float: none; width: auto; text-align: left; margin-bottom: 0; padding-bottom: 0; }
dd.nofloat { padding-left: 20px; }

dd {padding-left: 68px; border-bottom: 1px solid;}
#sidebar dd {padding-left: 58px;}
/*dl.latest-activity dd:last-child, dd:last-child {border-bottom: 0;}*/

#sidebar dl.latest-activity dt, #sidebar dl.latest-activity dd {border-bottom: 0;}
#sidebar dl.latest-activity dt {width: 14px; padding-right: 0;}
#sidebar dl.latest-activity dt img {width: 14px; height: 14px; padding-left:2px; }
#sidebar dl.latest-activity dd {padding-left: 22px; font-size: 1em; padding-top: 1px; border-bottom: 1px solid; margin-bottom: 6px; }

.address dl dd, .address dl dt {float: left; width: auto; padding-left: 0; margin-left: 0; border: 0;}
.address dl dt {padding-right: 4px;}

#main .stream dt {float: left; padding-right: 0; padding-left: 8px; margin-bottom: 8px; display: block; font-size: 0px;  width: 24px; height: 24px; background-repeat: no-repeat;}
#main .stream dd {border-bottom: 0; padding: 5px 40px 0px 40px;} 

#main .stream dd.date {clear: both; border-top: 1px solid; text-align: right; font-size: 1.1em; padding-right: 5px;}

/* Youtube Videos */
#main .stream dd.stream-object object, #main .stream dd.stream-object embed {width: 534px; height: 330px;}

/* Stream Icons */

.twitter {background: url(images/stream/Twitter_24x24.png);}
.youtube {background: url(images/stream/Youtube_24x24.png);}
.delicious {background: url(images/stream/Delicious_24x24.png);}
.digg {background: url(images/stream/Digg_24x24.png);}
.facebook {background: url(images/stream/Facebook_24x24.png);}
.feed {background: url(images/stream/Feed_24x24.png);}
.feedburner {background: url(images/stream/FeedBurner_24x24.png);}
.flickr {background: url(images/stream/Flickr_24x24.png);}
.furl {background: url(images/stream/Furl_24x24.png);}
.google {background: url(images/stream/Google_24x24.png);}
.magnolia {background: url(images/stream/Magnolia_24x24.png);}
.misterwong {background: url(images/stream/Misterwong_24x24.png);}
.myspace {background: url(images/stream/Myspace_24x24.png);}
.netvibes {background: url(images/stream/Netvibes_24x24.png);}
.newsvine {background: url(images/stream/Newsvine_24x24.png);}
.reddit {background: url(images/stream/Reddit_24x24.png);}
.stumbleupon {background: url(images/stream/Stumbleupon_24x24.png);}
.technorati {background: url(images/stream/Technorati_24x24.png);}

/* Country Flags */
.uk {background-image: url(images/flags/gb.png);}
.us {background-image: url(images/flags/us.png);}

/* IM icons */
.msn {background-image: url(images/im/msn.png);}
.skype {background-image: url(images/im/skype.png);}
.yahoo {background-image: url(images/im/yahoo.png);}
.trillian {background-image: url(images/im/trillian.png);}
.icq {background-image: url(images/im/icq.png);}
.aim {background-image: url(images/im/aim.png);}


/*** Extra Typographic Classes ***/

.alignleft {float:left;}
.alignright {float:right;}

.margin {margin-bottom:1.6em;}
.half-margin {margin-bottom:0.8em;}
.no-margin {margin-bottom:0em;}


/*** Headings ***/

h1, h2, h3, h4, h5, h6 {}
h1 {font-size:1.8em;}
h2 {font-size:1.8em; margin-bottom: 30px;}
h3 {font-size:1.2em;}
h4 {font-size:1.1em;}
h5 {font-size:1em;}

h3, h4 {background: url(images/title-25.png) center repeat-x; border-bottom: 1px solid;}
h3 {margin: 0px -12px 12px -12px; text-indent: 12px; padding-top: 6px; height: 24px;}
h4 {margin: 0px -8px 8px -8px;  text-indent: 8px; padding-top: 8px; height: 24px;}

h2.rss-large {background: url(images/rss-large.png) left center no-repeat; padding: 2px 0px 2px 25px;}
h4 img {vertical-align: middle;}

/***********************************
Content 
***********************************/

/*************** 
Header 
***************/

#title { width: 260px;  vertical-align: middle; display: table-cell; height: 50px;}
h1, #title p {text-align: center;}

#menu { position:absolute; top:13px; right:10px; left:260px; height: 36px; padding: 0px 38px 0px 43px;}

div.scrollable { position:relative; overflow:hidden; width: 100%; height:55px;  } 
div.scrollable div.items { width:20000em; position:absolute; } 


div.scrollable div.items div {margin-right: 4px; float: left; }

div.scrollable div.items div a, .browse {border-width: 2px; border-style: solid; -moz-border-radius: 5px; -webkit-border-radius:5px;}

div.scrollable div.items div a, .browse {
						display: block; height: 23px; padding: 9px 10px 0px 10px; background: url(images/tab.png) 0px -64px repeat-x;
						border-style: solid;  
						font-weight: bold;}
div.scrollable div.items div a img {vertical-align: middle; margin-top:-3px;}

div.scrollable div.items div a:hover, .browse:hover {background-position: 0px 0px;}
div.scrollable div.items div a:active, .browse:active {background-position: 0px 0px;}


.browse {font-size: 2.6em; padding: 0px 10px 9px 10px; }
.browse:hover {cursor: pointer;}
.left { margin-left: -43px; float: left; }
.right {margin-right: -43px; float: right; margin-top: -55px;}		

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 
/***************
Content
***************/

.content {position:relative; background: url(images/bg-25.png);}

#sidebar .content {width: 228px; padding: 0px 8px 1px 8px; margin-bottom: 8px;}
#main .content {width: 220px; padding: 0px 12px 1px 12px; margin-bottom: 20px;}

#main .cform {float: right; width: 352px;}

#main .address, #main .stream {clear:both; width: 616px; padding: 0px 12px 1px 12px; margin-bottom: 20px;}
.address iframe {width:614px; height: 350px; border: 1px solid;}

#main .stream {margin-bottom: 10px; padding-top: 12px;}

ul#utilities {position: absolute; right: 30px; top: 8px;}
#utilities li {background: url(images/bg-25.png); float: left; padding: 8px;}
#utilities li:first-child{margin-right: 1px;}
#utilities li a {display:block; height: 24px; padding-top: 5px; font-weight: bold;}
li.vcard a { padding-right: 42px;  background: url(images/vcard.png) top right no-repeat;}
li.help a {width: 29px; background: url(images/help.png) top right; text-align: center; font-size: 1.2em; color: #efefef;}
li.rss a {width: 28px; background: url(images/rss.png) top right; text-indent: -9999px;}
li.help a span {display: none;}
li.help a:hover, li.vcard a:hover, li.rss a:hover {background-position: bottom right;}
li.help a:hover {color: #ffea00;}

/* Help box */
#basic-modal-content {display:none;}
#simplemodal-overlay {background-color:#000; cursor:wait;}

#simplemodal-container {height:320px; width:500px; color:#efefef; background-color:#0082c8; border:1px solid #fff; -moz-border-radius: 10px; -webkit-border-radius:10px; padding:12px; padding-top: 0px;}
#simplemodal-container h3 {color:#ffea00; }
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(images/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container #basic-modal-content {padding:0px;}

/***************
Sidebar 
***************/

.user-img { display: block; margin: 0px auto; margin-bottom: 6px; padding: 3px; background-color: #efefef; border-width: 1px; border-style: solid; }

#powered_by {display: block; width: 222px; height: 28px; padding-top: 14px; position: absolute; bottom: 10px; left: 20px; background: url(images/powered_by.png) no-repeat;}
#powered_by p {text-align: center; color: #4c4d4f; font-size: 1em;}
#powered_by p a {font-weight: bold; background: url(images/cmn-logo.png) left center no-repeat; padding: 7px 0px 7px 41px; margin-left: 1px; color: #4c4d4f; font-size:1.1em; }
#powered_by p a span {color: #0082c8;} 


/*** Contact Form ***/

span.email {float: left; margin-top: -6px;}


label, input, textarea, button {font-size:1.2em; font-family:"Lucida Grande", "Lucida Sans", Verdana, Helvetica, Arial; float:left;}
.fielddiv { float: left; width:231px; height:15px; padding:5px; margin-bottom:4px;}
#email_captcha { float: left: width: 355px; margin-bottom: 4px; clear: left; }
label, span.email { display:block; width:100px; height:15px; padding-top:6px; padding-right:8px; text-align:right; font-weight: bold; }
input, textarea {width:231px; height:15px; padding:5px; border:1px solid; margin-bottom:4px;  background: url(images/input.png);}
textarea { height:108px; margin-top:0; margin-bottom:8px;}
span.req {display:block; text-align:center; width:44px; height:20px; padding-top:6px; background:url(images/required.png) right no-repeat; font-size:1.2em; float:right;}

.screenreader {display:none;}

.error {color:#C00; font-size:1.1em; text-align:left; text-indent:110px; margin-bottom:0.31em;}
.thanks {color:#090; text-align:center; margin-bottom: 1em;}

button.submit {float:right; height: 32px; padding: 0px 12px 2px 12px; margin-bottom: 12px; text-decoration:none; background:url(images/submit.png) bottom; border: 1px solid; }
button.submit:hover {background-position:right bottom;  cursor:pointer;}