@import url("reset.css");
html {background: url(../images/bg-n.jpg) repeat-x top left #ffffff; ;}
body {background: url(../images/stars.png) repeat-x top left; color: #333333; padding-top: 50px; }
a:link, a:visited { color: #2ABF10; text-decoration: underline; }
a:hover {text-decoration: none;}
h1, h2 { padding: 10px 0; color: #0062BF; font-family:  'Century Gothic', Arial, sans-serif; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3, h4 {color: #E51184; padding: 10px 0; font-family:  'Century Gothic', Arial, sans-serif;}
h3 a {text-decoration: none; color:#E51184 !important}
.tweet h3 a {color: #E51184; text-decoration: underline;}
.tweet h3 a:hover {color: #E51184; text-decoration: none;}
.FloatRight { float: right; }
.FloatLeft { float: left; }
p { padding: 5px 0; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: 100; letter-spacing: 0.04em; font-size: 14px; line-height: 20px; }

em {color: #666;}
.cb {clear: both;}
.Portfolio img { border: 2px solid #cccccc; margin: 10px 0 }
#Site, #Header { width: 760px; margin:0 auto; }
#Site { border-left: 1px solid #CCC; border-right: 1px solid #CCC; padding: 10px; margin-bottom: 30px; }
#Header {  font-size: 80px; text-align: center; color: #CCC; font-family:  'Century Gothic', Arial, sans-serif; }
#Header img { border: 0; }
#Nav { background: #3ad243 url(../images/navbg.jpg) top left repeat-x; font-family:  'Century Gothic', Arial, sans-serif; margin-top:10px; font-size: 25px; padding: 10px; margin: 5px 10px; }
#Nav ul { white-space: nowrap; text-align:center; }
#Nav li { list-style-type: none; display: inline; margin-right: 10px }
#Nav a { color: #ffffff; font-family:  'Century Gothic', Arial, sans-serif; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: 100; letter-spacing: 0.04em; text-decoration: none; }
#Nav a:hover { text-decoration: underline; }
.SocialMedia {margin: 10px; display: block; width: 253px; float: right;}
.HomeBlog, .TweetBox { width: 253px; background: #eee url(../images/box-bg.jpg) top left repeat; border: 1px solid #ccc; padding: 10px; float: left; height: 100%; }
.HomeBlog {margin-bottom: 10px;}

.TweetBox {height: 100%; line-height: 16px;}
.tweet, .query { font-size: 14px;}
.tweet .tweet_list, .query .tweet_list { list-style-type: none; margin: 0; padding: 0;}
.tweet .tweet_time {font-size: 12px; margin-top: 10px;}
.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 {}
.tweet .tweet_list li a, .query .tweet_list li a { color: #2ABF10; }
.tweet .tweet_list .tweet_even, .query .tweet_list .tweet_even { }
.tweet .tweet_list .tweet_avatar, .query .tweet_list .tweet_avatar { margin-right: .5em; float: right; border: 1px solid #ccc; }
.tweet .tweet_list .tweet_avatar img, .query .tweet_list .tweet_avatar img { vertical-align: middle; }

.PortfolioBox {width: 354px; height: 185px;}
.PortfolioFade {opacity:0.65; filter:alpha(opacity=65); }
.PortfolioImg {width: 740px; height: 350px;}

#form {width: 500px; display: block; margin: 10px auto;}
#form label {float: left; display: block; width: 290px; color: #E51184; font-weight: bold;}
#form input, #form  textarea {float: right; width: 190px; display: block; color:#0062BF; font-family: Verdana, Geneva, sans-serif; border:1px #ccc solid;}
#form .fields {margin-bottom: 10px; clear: both;height:20px;}
.required {font-size: 10px; color: #666; font-style: italic; font-weight: 100;}
#form input[type=submit] {width: 100px; margin: 20px auto 0;}
/*Tabbed content*/
.tabbed_content { background-color: #ffffff; width: 558px; margin: 10px auto; text-align: right; }
.tabs { height: 62px; position: relative; margin: 0 auto; }
.tabs .moving_bg { background: #eee url(../images/box-bg.jpg) top left repeat;width: 32px; padding: 15px 15px 18px; height: 32px; position:absolute; z-index: 190; border: 1px #cccccc solid; border-bottom: 0; left: 0; }
.tabs .tab_item { display: block; float: left; padding: 15px; width: 32px; color: #ffffff; z-index: 200; position: relative; cursor: pointer; margin: 0 auto; text-align: center; }
.tabbed_content .slide_content { overflow: hidden; background: #eee url(../images/box-bg.jpg) top left repeat; padding: 20px 0 20px 20px; width: 538px; border: 1px #cccccc solid; }
.tabslider { width: 5000px; }
.tabslider ul { float: left; width: 498px; margin: 0px; padding: 0px; margin-right: 40px; }
.tabslider ul a { color: #2ABF10; text-decoration: underline; }
.tabslider ul a:hover { color: #aaaaaa; text-decoration: none; }
.tabslider ul li { padding-bottom: 7px; }

#Content { padding: 15px; font-family: Arial, Helvetica, sans-serif; clear: both; }
#Footer { font-size: 12px; padding: 5px; text-align: center; }
#FooterLinks { font-size: 10px; padding: 5px; text-align: center; color: #666;font-family: Arial, Helvetica, sans-serif;  }
#FooterLinks a { color: #666; text-decoration:underline; }
#FooterLinks a:hover {text-decoration: none;}


/* Blog */

.Blog h1 a {color: #0062BF; text-decoration: none;}
.Blog h1 a:hover {text-decoration: underline;}
.Blog .edit {float: right; font-size: 10px; display: block;}
.Blog p.byline {font-size: 11px; line-height: 14px;}
.Blog .code { background: #eee url(../images/box-bg.jpg) top left repeat; border: 1px solid #ccc; padding: 10px; color: #000; margin: 15px 0; font-size: 12px; line-height:20px;}
.Blog h5 {margin-top: 15px;}
.Blog .previous a, .Blog .next a  {color:#E51184; font-size: 14px;}
.Blog .next {width: 300px; display: block;  float: right; text-align: right;}
.Blog .previous {width: 300px; display: block; float: left; }
.Blog .post {margin-bottom: 15px;}
.Blog .Bottom {display: block; margin: 15px auto; width: 720px;}
.Blog .Bottom div {float: left; display: block; width: 180px; font-size: 12px;}
.Blog .Bottom div ul {list-style-type:square; list-style-position: inside;}
.Blog .Bottom div ul li {margin-bottom: 5px;}

/* Form Validation */

.inputContainer { position:relative; float:left; }
.formError { position:absolute; top:300px; left:300px; padding-bottom:13px; display:block; z-index:5000; cursor:pointer; }
#debugMode { background:#000; position:fixed; width:100%; height:200px; top:0; left:0; overflow:scroll; opacity:0.8; display:block; padding:10px; color:#fff; font-size:14px; z-index:100000; }
.ajaxSubmit { padding:20px; background:#55ea55; border:1px solid #999; display:none }
.formError .formErrorContent { width:100%; background:#33be40; color:#fff; width:200px; font-family:tahoma; font-size:11px; border:2px solid #ddd; box-shadow: 0px 0px 6px #000; -moz-box-shadow: 0px 0px 6px #000; -webkit-box-shadow: 0px 0px 6px #000; padding:4px 10px 4px 10px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin-left:-45px; }
.greenPopup .formErrorContent { background:#33be40; }
.blackPopup .formErrorContent { background:#393939; color:#FFF; }
.formError .formErrorArrow { width:15px; margin:-2px 0 0 13px; z-index:5001; }
.formError .formErrorArrowBottom { top:0; margin:-6px; }
.formError .formErrorArrow div { border-left:2px solid #ddd; border-right:2px solid #ddd; box-shadow: 0px 2px 3px #444; -moz-box-shadow: 0px 2px 3px #444; -webkit-box-shadow: 0px 2px 3px #444; font-size:0px; height:1px; background:#33be40; margin:0 auto; line-height:0px; font-size:0px; display:block; }
.formError .formErrorArrowBottom div { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }
.greenPopup .formErrorArrow div { background:#33be40; }
.blackPopup .formErrorArrow div { background:#393939; color:#FFF; }
.formError .formErrorArrow .line10 { width:15px; border:none; }
.formError .formErrorArrow .line9 { width:13px; border:none; }
.formError .formErrorArrow .line8 { width:11px; }
.formError .formErrorArrow .line7 { width:9px; }
.formError .formErrorArrow .line6 { width:7px; }
.formError .formErrorArrow .line5 { width:5px; }
.formError .formErrorArrow .line4 { width:3px; }
.formError .formErrorArrow .line3 { width:1px; border-left:2px solid #ddd; border-right:2px solid #ddd; border-bottom:0px solid #ddd; }
.formError .formErrorArrow .line2 { width:3px; border:none; background:#ddd; }
.formError .formErrorArrow .line1 { width:1px; border:none; background:#ddd; }