/* CSS DOCUMENT */
*{ margin: 0; padding: 0; }

body { font-size: 62.5%; background: url(images/bg.png) repeat-x #ebf0f0; font-family: Palatino, Georgia, Times, "Times New Roman", serif;}

h1, h2, h3, h4, h5 { font-family: "Trebuchet MS", Helvetica, Arial, san-serif; }
img.box { background: #fff; padding: 5px; border: 1px solid #ccc; }
.clearer { clear: both; }
.left { float: left;}
.right{ float: right; }

/* Header
----------------------------------*/
#header { width: 944px; margin: 10px auto 0 auto; position: relative; height: 115px;}

#logo { color: #aaa; font-size: 5em; padding-left: 130px; background: url(images/rg_logo.gif) no-repeat;}

#top_links { position: absolute; top: 0; right: 0; height: 82px; width: 466px;}
#viaduct-link, #trapdoor-link, #reidgivens-link {display: block; width: 233px; height: 82px; text-indent: -999999em;float: left;}

#viaduct-link  { background: url(/images/top-link-viaduct.png) no-repeat;  }
#trapdoor-link  { background: url(/images/top-link-trapdoor.png) no-repeat; }
#reidgivens-link  { background: url(/images/top-link-reidgivens.png) no-repeat; }


.contact {color: #aaa; font-size: 1.5em;}
#connect { width: 149px; margin: 7px 7px 0 0; float: left;}
#connect .icons { list-style: none; position: relative; height: 60px}
#connect .icons img { border: none; }
#connect .icons dt { float: left; width: 31px; height: 31px; padding: 2px; margin-left: 3px;}
#connect .icons dt.twitter { margin: 0;}
#connect .icons dd { position: absolute; top: 35px; background: #aaa; width: 143px; padding: 3px 3px 0 3px; font-size: 1.5em; display: none;}
#connect .icons dd .title { color: #444; width: 70px; display: block; float: left;}
#connect .icons dd a { color: #fff; text-decoration: none; }
#connect .icons dd a:hover { text-decoration: underline;}

/* Content
----------------------------------*/

#content { width: 944px; margin: 0 auto; position: relative; padding: 0 7px;}
#content #top_fade_left { position: absolute; top: 94px; left: 294px; }
#content #top_fade_right { position: absolute; top: 94px; right: 0; }

/* Main
----------------------------------*/
#main { width: 650px; float: right; background: url(images/main_bg.png) repeat-x #ebf0f0;}
#main h2, #sidebar h3 { color: #a1b3b3; font-size: 3em; padding: 2px 10px; }
p { color: #444; font-size: 1.4em; padding: 10px; }

.highlight { background: #444; margin-bottom: 1em;}
.highlight h2, .highlight h3 { color: #aaa; }
.highlight p { color: #aaa; }

/* workshop */
#workshop { height: 260px; position: relative; margin-bottom: 1em;}

#frames { width: 350px; background: url(images/workshop_bg.png) repeat-x #fff; height: 260px; position: absolute; top: 0; right: 0; }
#frames .frame { width: 330px; height: 240px; background: url(images/frame_bg.png) repeat-x bottom right; padding: 10px;  }
.frame .img_wrapper { float: left; margin-right: 10px; background: url(images/img_shadow_frame.png) no-repeat center bottom; padding-bottom: 9px;}
.frame img {padding: 9px; border: 1px solid #ccc;}
#main .frame p { padding-top: 0; font-size: 1.4em;}
.frame a { display: block; width: 70px; text-align: center; background: #444; border: 1px solid #ccc; padding: 5px 7px; font-size: 1.4em; color: #ccc; text-decoration: none; float: left;}
.frame a:hover { background: #ccc; color: #444; border-color: #444; }
.frame span.title { display: none; }

#workshop .items { list-style: none; width: 300px; height: 260px; background: url(images/workshop_list_bg.png) no-repeat top right; margin-top: -40px; padding-top: 50px;}
#workshop .items li { }
#workshop .items li a { font-size: 2em; text-decoration: none; color: #444; padding: 8px 10px 8px 10px; display: block;}
#workshop .items li a.activeSlide { background: url(images/workshop_list_item_bg.png) no-repeat bottom right #fff; border-top: 1px solid #ccc; padding-top: 7px}

/* trapdoor */
#trapdoor { height: 100px; position: relative; margin-bottom: 1em; padding: 7px 15px;}

/* call outs */
a.callout { padding: 10px; background: url(images/callout_bg.png) repeat-x #fff; border: 1px solid #ccc; font-family: "Trebuchet MS", Helvetica, Arial, san-serif; color: #5A7568; font-size: 1.5em; text-decoration: none; display: block; }
a.callout:hover { background: url(images/callout_over_bg.png) repeat-x bottom #fff;}
a.callout img { border: none;}
/*a.roi { width: 270px; float: left; text-align: center; height: 140px; margin-left:-1px;}
a.roi img { margin: 0 20px;}
a.upgrade, a.barcamp { width: 329px; margin: 0 0 8px 300px; height: 55px;}
a.upgrade img, a.barcamp img { float: left; margin-right: 20px;}*/
a.roi { width: 630px; text-align: center; height: 95px; margin-left:-1px; margin-bottom: 10px;}
a.roi img { margin: 0 20px; float: left;}


/* stuff i've done */

#web, #logos, #ads_and_print, #outdoor, #direct_and_reports, #tunes { background: #fff; height: 555px; overflow-y: scroll; clear: left;}

.portfolio { list-style: none;}
.portfolio li { padding: 10px; background: #fff; clear: left; height: 200px; }
.portfolio li.odd { background: #eaefdd; }
.portfolio li .img_wrapper { float: left; padding-bottom: 8px; background: url(images/img_shadow_portfolio.png) no-repeat center bottom; margin: 0 10px 10px 0;}
.portfolio .odd .img_wrapper {background: url(images/img_shadow_portfolio_odd.png) no-repeat center bottom; }
.portfolio .img_wrapper img { border: 1px solid #ccc; padding: 5px; background: #fff;}
.portfolio h4 { color: #8C8C74; font-size: 2em; }
.highlight .portfolio p { color: #444; }

.logo.portfolio li { float: left; width: 189px; clear: none; border-bottom: 1px solid #eaefdd; height: 210px}
.logo.portfolio li.odd { background: #fff; }
.logo.portfolio .img_wrapper { float: none; margin: 0 auto 10px auto; width: 162px;}
.logo.portfolio .odd .img_wrapper {background: url(images/img_shadow_portfolio.png) no-repeat center bottom; }
.logo.portfolio .img_wrapper img {background: #f3f3f3; }
.logo.portfolio h4 { text-align: center; font-size: 1.2em; }

#tunes .portfolio li { height: 100px;}

#feedback { margin-bottom: 10px;}
#feedback .field { width: 97%; padding: 3px; border: 1px solid #999; background: #fff; margin: 2px; }


/* Sidebar
----------------------------------*/

#sidebar { width: 250px; position: relative; top: 120px;}

#family {height: 130px; margin-bottom: 10px; padding-top: 10px;}
#family .img_wrapper { background: url(images/img_shadow_family.png) no-repeat center bottom; padding-bottom: 5px; width: 57px;}
#family .reid { background: url(images/img_shadow_reid.png) no-repeat center bottom; padding-bottom: 7px; width: 117px}
#family .wife { margin: 0 15px 0 45px; padding-bottom: 3px;}
#family .coty {margin-left: 15px;}
#family .xander { margin-left: 3px;}

/* recomended */
#books, #blogs, #podcasts, #equipment, #recording { height: 338px; overflow-y: scroll; background: #fff; clear: left;}
#equipment, #recording { height: 245px; }
.recomended {list-style: none;}
.recomended li {clear: left; background-color: #fff;}
.recomended li li { margin-left: 1.5em; padding: 3px; list-style: none;}
.recomended li.odd { background: #eaefdd;}
.recomended a {display: block; text-decoration: none; padding: 5px; height: 75px;}
.recomended li li a {display: inline; text-decoration: none; }
.recomended li a:hover { background: #eeeeff;}
.recomended li.odd a:hover { background: #ddddff;}
.recomended h4 { font-size: 1.4em; font-weight: bold; color: #444; padding: 3px 0 3px 10px; }
.recomended h5 { font-size: 1.2em; font-weight: bold; color: #444; padding: 3px 0 3px 15px; }
.recomended p {color: #444; padding: 3px 0 3px 10px; font-size: 1.2em;}
.recomended img { float: left; margin-right: 10px; border: 1px solid #ccc;}

p.quote { padding:20px 20px 0 20px; background: url(images/quotes.png) no-repeat; }
p.attribution { font-weight: bold; font-style: italic; text-align: right; }

#yard { padding: 1px; border: 1px solid #444; background: #fff; height: 164px;}
#yard a { height: 164px; width: 246px; display: block; margin: 1px 0 0 1px;}
#yard img { border:none;}

#testimonials { background: #ebf0f0; height: 210px; border: 1px solid #444;}
#testimonials div { margin: 0 5px 5px 0;}
#testimonials div p { color: #444;}
/* Footer
----------------------------------*/

#footer { background: url(images/footer_bg.png) repeat-x #444; margin-top: 10px; font-family: "Trebuchet MS", Helvetica, Arial, san-serif; padding: 10px; height: 50px;}
#footer a  { text-decoration: none; font-size: 1.5em; color: #aaa;}
#footer .legal { text-align: right; float: right; color: #aaa; }


/* Tabs
----------------------------------*/
.ui-tabs { padding: .1em; zoom: 1; }
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .1em 0 .2em;}
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .25em .5em 0 .5em; color: #8C8C74; font-size: 2em; font-family: "Trebuchet MS", Helvetica, Arial, san-serif;}
.ui-tabs .ui-tabs-nav li a:hover { color: #ccc;}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; background: url(images/tab_bg.png) repeat-x; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {-moz-border-radius-topleft:.5em; -moz-border-radius-topright:.5em; -webkit-border-top-left-radius:.5em; -webkit-border-top-right-radius:.5em}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a { color: #444; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }