/* BEGIN TYPOGRAPHY, COLORS, AND OTHER STYLING */

body {
    margin:0;
    padding:0;
    font-family:"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
    color:#333333;
    background:#fff;
}

a:link, a:visited {
    color:#8ba726;
    font-weight:bold;
}

a:hover {
    color:#444;
    font-weight:bold;
}

#content-left dd a:link, #content-left dd a:visited {
    color:#666;
    text-decoration:none;
}

#content-left dd a:hover {
    color:#06c;
    text-decoration:none;
}

small {
    font-size:11px;
}

small a {
    text-decoration:none;
}    

#screencast p {
    margin:0 25px 15px 0;
    font-size:14px;
}

#main p {
    margin:0 0 1em;
    padding:0;
    font-size:13px;
    color:#4f5b62;
    line-height: 1.35em;
}

#main p a, #main li a {
    font-weight: normal;
    text-decoration: none;
    border-bottom: 1px dotted #8ba726;
}


#main p a:hover {
    font-weight: normal;
    text-decoration: none;
    background: #faffe9;
    border-bottom: 1px dotted #8ba726;
}

h1 {   }

/* END TYPOGRAPHY, COLORS, AND OTHER STYLING */


/* BEGIN STRUCTURE/LAYOUT */

#header {
    width:780px;
    height:110px;
    padding:0 20px;
    margin:0 auto;
    
    position: relative;
}

#header h1 { margin: 0; padding: 0; position: relative; left: -22px; top: 0px; }

#navigation {
    float:right;
    width:357px;
    height:44px;
    background:url('../_img/bgr_nav_01.gif') top center no-repeat;
    display:block;
}

#callout {
    background:url('../_img/bgr_callout_01.gif') top repeat-x;
    margin:5px 0 0 0;    
    height:354px;
}

#callout-inner {
    width:780px;
    margin:0 auto;
    padding:12px 0 0 0; 
}

#calloutsub {
    background:url('../_img/bgr_subgreen_01.gif') top repeat-x;
    margin:5px 0 0 0;
    overflow:auto;
    height:84px;
}

#calloutsub-inner {
    width:780px;
    margin:0 auto;
    padding:8px 0 0 0;
}

#content {
    width:780px;
    margin:20px auto 0 auto;
    padding-top: 20px;
}

#main {
    float:left;
    width:505px;
}

#home #content { margin: 0 auto 1em; }
#home #main { float: left; width: 460px; margin: 1em 40px 0 0; }

#home #sidebar { float: left; width: 280px; margin: 1em 0; }
#home #sidebar ul { list-style: none; margin:  0; padding: 0; }

#sidebar {
    float:right;
    width:200px;
}

#sidebar .section2 .top {
    background: url(../_img/g_sidetop.gif) no-repeat;
    padding-top: 10px;
}
#sidebar .section2 .bottom {
    background: url(../_img/g_sidebot.gif) no-repeat;
    height: 22px;
}

#sidebar .section {
    background-image: url(../_img/g_sidetop.gif);
    background-repeat: no-repeat;
    padding-top: 10px; 
}
#sidebar .section .wrapper {
    background: url(../_img/g_sidebot.gif) no-repeat;
    height: 22px;
}
#sidebar .section .content {
    padding: 10px 22px 0;
    background:#f7f8f8 bottom repeat-x;
}
#ad-bar { position: absolute; right: 20px; top: 75px; } 

#screencast {
    background:#f7f8f8 url('../_img/bgr_gradientgray_01.gif') bottom repeat-x;
    margin:25px auto 0 auto;
    width:780px;
    border-bottom:1px solid #c8d0d2;
}

#screencast .wrapper { background: url(../_img/g_hometop.gif) no-repeat; }

#screencast-side {
    background:#f7f8f8 url('../_img/bgr_gradientgray_01.gif') bottom repeat-x;    
}

#screencast-side p {
    margin:0 25px 15px 12px;
    font-size:12px;
}

#screencast-content {
    float:right;
    width:465px;
}

#adblock {
    margin:0px 0 0 0;
    background:#f8f8f8;
}

#adblock-inner {
    padding:10px 10px 0;
}

#home #footer { margin-top: 0; }

#footer {
    border-top:1px solid #98a0a2;
    width:780px;
    margin: 30px auto 0 auto;
    padding:5px 0;
    background:url('../_img/bgr_hat_01.gif') 98% 0% no-repeat;
    height:48px;
    overflow:hidden;
    font-size:11px;
}

#footer-left {
    float:left;
}
#footer-left p { margin-top: .5em; }

#footer-right {
    float:right;
}
        
/* END STRUCTURE/LAYOUT */


/* BEGIN HEADERS */

h1 {
    margin:0 0 .9em;
    padding:0;
    color:#8ba726;
    font-size: 1.6em;
}

h1 a {
    margin:15px 0 0 0;
    padding:0;
    background:transparent url('../_img/img_logo_01.gif') no-repeat;
    overflow:hidden;
    text-indent:-9999em;
    display:block;
    width:179px;
    height:94px;
    float:left;
}

#callout-inner h2 {
    margin: 0 auto;
    padding:0;
    background: transparent url('../_img/img_callouttxt_01.gif') no-repeat;
    display:block;
    width:739px;
    height:98px;
    overflow:hidden;
    text-indent:-9999em;
}

#main h2 {
    margin: 0 0 .4em 0;
    color:#8ba726;
    font-size: 1.1em;
}

#main h2.hdrabout {
    background: url('../_img/txt_jssuckless_01.gif') no-repeat;
    display:block;
    margin:0 0 8px 0;
    padding:0;
    width:366px;
    height:21px;
    overflow:hidden;
    text-indent:-9999em;
}

#main h2.hdrdemos {
    background: url('../_img/txt_showmemk_01.gif') no-repeat;
    display:block;
    margin:0 0 8px 0;
    padding:0;
    width:366px;
    height:21px;
    overflow:hidden;
    text-indent:-9999em;
}

#main h2.hdrrelated {
    background: url('../_img/txt_anyoneuse_01.gif') no-repeat;
    display:block;
    margin:0 0 8px 0;
    padding:0;
    width:366px;
    height:21px;
    overflow:hidden;
    text-indent:-9999em;
}

#main h2.hdrdownload {
    background: url('../_img/txt_giveit_01.gif') no-repeat;
    display:block;
    margin:0 0 8px 0;
    padding:0;
    width:366px;
    height:21px;
    overflow:hidden;
    text-indent:-9999em;
}

#screencast h3 {
    background: url('../_img/txt_screencast_01.gif') no-repeat;
    display:block;
    overflow:hidden;
    text-indent:-9999em;
    margin:20px 0 5px 0;
}

#screencast-side h3 {
    background: url('../_img/txt_screencastside_01.gif') no-repeat;
    display:block;
    overflow:hidden;
    text-indent:-9999em;
    margin:5px 0 3px 12px;
}


/* END HEADERS */

/* HOME PAGE */

#home .post div {
    margin: 0 0 1em;
    border-bottom: 1px dotted #ccc;
    padding: 0 0 1em;
}
#home .post div h2 { margin:  0 0 .3em; }
#home .post div h2 a {
    text-decoration: none;
    border-bottom: 1px dotted #8ba726;
}
#home .post div h2 a:hover {
    border-bottom: 1px solid #cbe766;
    color: #8ba726;
    background: #faffe9;
}
#home .post div h2 span {
    color: #aaa;
    font-size: .65em;
    font-weight: normal;
    padding-left: 1em;
}
#home .post div p { margin: 0; font-size: .75em; line-height: 1.5em;  }
#home .post div p a { font-size: .9em; }

#home #sidebar li {
    font-size: .7em;
    margin: 0 0 1em;
    border-bottom: 1px dotted #ccc;
    padding: 0 0 1em;
    clear: both;
}
#home #sidebar li a {
    display: block;
    float: left;
    width: 180px;
    line-height: 1.5em;
    margin-top: -0.2em;
}
#home #sidebar li span {
    display: block;
    float: left;
    margin-right: 1em;
    width: 65px;
    color: #666;
    font-weight: bold;
}

/* END HOME PAGE */

/* BLOG PAGE */

#blog .post {
    margin: 0 0 1em;
    border-bottom: 1px dotted #ccc;
    padding: 0 0 1em;
}
#blog .post h2.post-title { margin:  0 0 .3em; }
#blog .post h2.post-title a {
    text-decoration: none;
    border-bottom: 1px dotted #8ba726;
}
#blog .post h2.post-title a:hover {
    border-bottom: 1px solid #cbe766;
    color: #8ba726;
    background: #faffe9;
}
#blog .post h2.post-title span {
    color: #aaa;
    font-size: .65em;
    font-weight: normal;
    padding-left: 1em;
}
#blog .post div.post-content p {
    margin: 0;
    font-size: .75em;
    line-height: 1.5em;
}
#blog .post div.post-content p a { font-size: .9em; }
#blog .post p.post-actions { margin: 1em 0em 0; font-size: .8em; }

#home #sidebar li {
    font-size: .7em;
    margin: 0 0 1em;
    border-bottom: 1px dotted #ccc;
    padding: 0 0 1em;
    clear: both;
}
#home #sidebar li a {
    display: block;
    float: left;
    width: 180px;
    line-height: 1.5em;
    margin-top: -.2em;
}
#home #sidebar li span {
    display: block;
    float: left;
    margin-right: 1em;
    width: 65px;
    color: #666;
    font-weight: bold;
}

/* END BLOG PAGE */


/* BEGIN IMAGES */

#screencast img {
    margin:20px;
    float:left;
}

#screencast-side img {
    margin:10px;
}

/* END IMAGES */


/* BEGIN LISTS */

#navigation ul {
    list-style:none;
    margin: 15px 0 0 30px;
    padding:0;    
}

#navigation ul li {
    float:left;
}

#navigation ul li a {
    overflow:hidden;
    text-indent:-9999em;
    display:block;
    margin-right:20px;
}

.nav1 a, .nav1 a:visited {
    background:url('../_img/btn_home_01.gif') no-repeat;
    width:50px;
    height:14px;
}

.nav1 a:hover {
    background:url('../_img/btn_home_01.gif') 0 -14px no-repeat;
    width:50px;
    height:14px;
}

.nav2 a, .nav2 a:visited {
    background:url('../_img/btn_about_01.gif') no-repeat;
    width:57px;
    height:14px;
}

.nav2 a:hover {
    background:url('../_img/btn_about_01.gif') 0 -14px no-repeat;
    width:57px;
    height:14px;
}

.nav3 a, .nav3 a:visited {
    background:url('../_img/btn_blog_01.gif') no-repeat;
    width:44px;
    height:14px;
}
.nav3 a:hover {
    background:url('../_img/btn_blog_01.gif') 0 -14px no-repeat;
    width:44px;
    height:14px;
}

.nav4 a, .nav4 a:visited {
    background:url('../_img/btn_projects_01.gif') no-repeat;
    width:85px;
    height:14px;
}

.nav4 a:hover {
    background:url('../_img/btn_projects_01.gif') 0 -14px no-repeat;
    width:85px;
    height:14px;
}

#callout ul {
    list-style:none;
    margin:30px 0 0 0;
    padding:0;
}

#calloutsub ul {
    list-style:none;
    margin:6px 0 0 0;
    padding:0;
}

* html #calloutsub ul {
    margin:13px 0 0 0;
}

#callout ul li,#calloutsub ul li {
    float:left;
}

#callout ul li a, #calloutsub ul li a {
    overflow:hidden;
    text-indent:-9999em;
    display:block;
}

.subnav1 a,.subnav1 a:visited {
    background:url('../_img/btn_download_01.gif') top no-repeat;
    width:238px;
    height:178px;
    margin-right:33px;
}

.subnav1 a:hover {
    background:url('../_img/btn_download_01.gif') bottom no-repeat;
    width:238px;
    height:178px;
    margin-right:33px;
}

.subnav2 a,.subnav2 a:visited {
    background:url('../_img/btn_docs_01.gif') top no-repeat;
    width:238px;
    height:178px;
    margin-right:33px;
}

.subnav2 a:hover {
    background:url('../_img/btn_docs_01.gif') bottom no-repeat;
    width:238px;
    height:178px;
    margin-right:33px;
}

.subnav3 a,.subnav3 a:visited {
    background:url('../_img/btn_demos_01.gif') top no-repeat;
    width:238px;
    height:178px;
}

.subnav3 a:hover {
    background:url('../_img/btn_demos_01.gif') bottom no-repeat;
    width:238px;
    height:178px;
}

.subgnav1 a,.subgnav1 a:visited {
    background:url('../_img/btn_subdownload_01.gif') top no-repeat;
    width:238px;
    height:58px;
    margin-right:33px;
}

.subgnav1 a:hover {
    background:url('../_img/btn_subdownload_01.gif') bottom no-repeat;
    width:238px;
    height:58px;
    margin-right:33px;
}

.subgnav2 a,.subgnav2 a:visited {
    background:url('../_img/btn_subdocs_01.gif') top no-repeat;
    width:238px;
    height:58px;
    margin-right:33px;
}

.subgnav2 a:hover {
    background:url('../_img/btn_subdocs_01.gif') bottom no-repeat;
    width:238px;
    height:58px;
    margin-right:33px;
}

.subgnav3 a,.subgnav3 a:visited {
    background:url('../_img/btn_subdemos_01.gif') top no-repeat;
    width:238px;
    height:58px;
}

.subgnav3 a:hover {
    background:url('../_img/btn_subdemos_01.gif') bottom no-repeat;
    width:238px;
    height:58px;
}

#main ul {
    margin: 10px 10px 10px 0;
    list-style-type:circle;
    font-size:13px;
    color:#4f5b62;
}


/* END LISTS */

/* BEGIN FORM ELEMENTS */

fieldset div {
    display:block;
    margin-bottom:8px;
}

input, textarea {
    margin-bottom:8px;
}

label {
    float:left;
    width:150px;
    text-align:right;
}
    

/* END FORM ELEMENTS */

/* BEGIN MISC ELEMENTS */

.clearer {
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
}     

/* END MISC ELEMENTS */




/* These are standard sIFR styles... do not modify */

.sIFR-flash {
    visibility: visible !important;
    margin: 0;
}

.sIFR-replaced {
    visibility: visible !important;
}

span.sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
}


/* These "decoy" styles are used to hide the browser text before it is
replaced... the negative-letter spacing in this case is used to make the
browser text metrics match up with the sIFR text metrics since the sIFR text
in this example is so much narrower... your own settings may vary... any weird
sizing issues you may run into are usually fixed by tweaking these decoy
styles */

.sIFR-hasFlash #content h1#title {
    visibility: hidden !important; font-size: 25px; letter-spacing: 2px;
}

.sIFR-hasFlash .sifr { visibility: hidden !important; }