/*Main screen styles by Jared Cole */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
    outline: none;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end reset */

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

body {
    background: url(../images/hwmi_blue_bg.gif) repeat top left #ffffff;
    color: #666666;
    font: normal normal 14px/24px "Lucida Grande", arial, sans-serif;
    height: 100%;
}

/****** @content styles ******/
article {
    background: url(../images/hwmi_content_bg_top.png) repeat-x top left #ffffff;
    display: block;
    float: left;
    min-height: 300px;
    width: 555px;
}

    article section, aside section {
        margin: 40px 0;
    }
    
    article section {
        padding-right: 10px;
    }
    
        section p {
            color: #444;
            font: normal normal 14px/24px "Lucida Grande", arial, sans-serif;
            margin: 20px 0;
            /*text-shadow: 0 -1px 0 #e1e1e1;*/
        }

section h2 {
    color: #2a828c;
    font: bold 24px/24px "Lucida Grande", arial, sans-serif;
    margin-bottom: 20px;
    text-shadow: 0 -1px 0 #e1e1e1;
    text-transform: uppercase;
}

div.section-sep {
    background: url(../images/hwmi_section_sep.png) no-repeat top center transparent;
    display: block;
    float: left;
    height: 370px;
    margin-top: 70px;
    width: 10px;
}

ul#main-page-cta li {
    float: left;
    height: 100px;
    margin: 0 10px;
    width: 100px;
}

    ul#main-page-cta li a {
        color: #888888;
        display: block;
        font-size: 11px;
        line-height: 12px;
        width: 80px;
    }

    ul#main-page-cta li span {
        background: #888;
        display: block;
        height: 100px;
        width: 100px;
    }

/****** @twitter sidebar ******/
aside {
    background: url(../images/hwmi_content_bg_top.png) repeat-x top left #ffffff;
    display: block;
    float: left;
    min-height: 300px;
    width: 395px;
}

    aside section {
        padding-left: 20px;
    }

    div.content-bottom {
        background: url(../images/hwmi_content_bg_bottom.png) repeat-x top left transparent;
        display: block;
        height: 7px;
    }
    
    aside section ul#tweets li {
        margin-bottom: 20px;
    }
        aside section ul#tweets div.tweet {
            float: left;
        }
        
        aside section ul#tweets li p {
            color: #666;
            font-size: 12px;
            line-height: 16px;
            margin: 0;
            text-shadow: none;
            width: 320px;
        }
        
            aside section ul#tweets li div.tweet span, aside section ul#tweets li div.tweet em {
                font-size: 11px;
            }
            
            aside section ul#tweets li div.tweet em {
                font-style: italic;
            }
            
            aside section ul#tweets li div.tweet span strong {
                color: #2a828c;
                text-shadow: 0 1px 0 #e1e1e1;
            }
            
            aside section ul#tweets li div.tweet a {
                color: #2a828c;
                font-weight: bold;
                text-shadow: 0 1px 0 #ffffff;
            }
    
        aside section ul#tweets li img {
            float: left;
            margin: 0 5px 0 0;
        }
    aside section a.follow {
        color: #f3b351;
        font: bold italic 12px/14px "Lucida Grande", arial, sans-serif;
        float: right;
        text-shadow: 0 1px 0 #ffffff;
    }

/****** @header styles ******/
header {
    background: url(../images/hwmi_blue_bg.gif) repeat top left transparent;
    display: block;
    height: 510px;
}

    header #top-bar {
        background: url(../images/hwmi_header_bg.png) repeat-x top left transparent;
        display: block;
        height: 160px;
    }
    
        header #top-bar h1.logo {
            /*background: url(../images/hwmi_logo.png)  no-repeat top left transparent;*/
            display: block;
            float: left;
            height: 52px;
            margin: 54px 0;
            width: 315px;
        }
        
        header #top-bar nav {
            float: right;
            margin: 115px 0 0;
            position: relative;
            /*top: 115px;*/
        }
            header #top-bar nav span.sep {
                display: block;
                float: left;
                margin-top: 2px;
            }
        
            header #top-bar nav ul {
                float: left;
            }
                header #top-bar nav ul li {
                    float: left;
                }
                header #top-bar nav ul li a {
                    color: #fff;
                    font: normal 14px/20px "Lucida Grande", arial, sans-serif;
                    margin: 0 6px;
                    text-decoration: none;
                    text-transform: uppercase;
                }
                
                header #top-bar nav ul li a.active {
                    color: #2a828c;
                }
                
    /*slider styles */
    
    header div.slider-wrapper {
        background: url("../images/hwmi_slider_bg_texture.jpg") no-repeat scroll left top transparent;
        display: block;
        height: 350px;
        margin: 0 auto;
        overflow: hidden;
        padding: 0;
        position: relative;
        width: 1000px;
    }
    
        header div.slider-wrapper #slider {
            background: url("../images/hwmi_slider_bg.png") no-repeat scroll center top transparent;
            display: block;
            height: 291px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            top: 25px;
            width: 790px;
        }
        
            header div.slider-wrapper #slider ul#slide-container {
                display: block;
                height: 231px;
                margin: 20px 20px 0;
            }
            header div.slider-wrapper #slider ul#slider-nav {
                cursor: pointer;
                display: block;
                height: 40px;
                margin: 0 auto;
                padding-top: 10px;
                width: 76px;
            }
            header div.slider-wrapper #slider ul#slider-nav li {
                background: url(../images/slider/menu_dot.png) no-repeat top center transparent;
                display: block;
                float: left;
                height: 15px;
                margin: 0 2px;
                opacity: .5;
                width: 15px;
            }
            header div.slider-wrapper #slider ul#slider-nav li.active {
                opacity: 1;
            }

/****** @footer styles ******/
footer {
    background: url(../images/hwmi_blue_bg.gif) repeat top left transparent;
    display: block;
}

    footer #footer-content {
        background: url(../images/hwmi_footer_texture.jpg) no-repeat top center transparent;
        display: block;
        height: 205px;
        margin: 0 auto;
        padding: 20px 0 0;
        width: 1000px;
    }
    
        footer #footer-content div.footer-col {
            float: left;
            width: 320px;
        }
        
            footer #footer-content div.footer-col h3 {
                color: #f3b351;
                text-transform: uppercase;
                text-shadow: 0 1px 0 #38aebb;
            }
        
            footer #footer-content div.footer-col ul.secondary-menu li {
                float: left;
                margin: 0 20px 0 0;
            }
            
            footer #footer-content div.footer-col ul.secondary-menu li a {
                color: #fff;
                font-size: 12px;
            }
            
            footer #footer-content div.footer-col div.blog-post {
                margin: 0 20px 0 0;
            }
            
            footer #footer-content div.footer-col div.blog-post span.blog-avatar-steve {
                background: url(../images/hwmi_crowder_sprite.png) 0 0 transparent;
                display: block;
                float: left;
                height: 56px;
                margin: 8px 5px 5px 0;
                text-indent: -99999px;
                width: 56px;
            }

            footer #footer-content div.footer-col div.blog-post span.blog-avatar-missy {
                background: url(../images/hwmi_crowder_sprite.png) 0 -70px transparent;
                display: block;
                float: left;
                height: 56px;
                margin: 8px 5px 5px 0;
                text-indent: -99999px;
                width: 56px;
            }
            
            footer #footer-content div.footer-col div.blog-post h4:first-child {
                margin: 0;
            }

            footer #footer-content div.footer-col div.blog-post h4 {
                margin: 10px 0 0;
            }
            
            footer #footer-content div.footer-col div.blog-post h4 a {
                color: #ffffff;
                font: bold 12px/14px "Lucide Grande", arial, sans-serif;
                text-transform: uppercase;
            }
            
            footer #footer-content div.footer-col div.blog-post p {
                color: #ffffff;
                font: normal 11px/14px "Lucide Grande", arial, sans-serif;
                margin: 0 20px 0 0;
            }
            
            footer #footer-content div.footer-col div.blog-post p a.more-link {
                color: #F3B351;
            }
            
            footer #footer-content div.footer-col ul#social-icons {
                margin-top: 6px;
            }
            
            footer #footer-content div.footer-col ul#social-icons li {
                float: left;
                margin: 0 5px;
            }
            
                footer #footer-content div.footer-col ul#social-icons li:first-child {
                    margin-left: 0;
                }
                
                footer #footer-content div.footer-col ul#social-icons li:last-child {
                    margin-right: 0;
                }
            
            footer #footer-content div.footer-col ul#social-icons li.facebook a {
                background: url(../images/hwmi_social_sprite.png) no-repeat 0 0 transparent;
                display: block;
                height: 49px;
                width: 49px;
            }
            
            footer #footer-content div.footer-col ul#social-icons li.twitter a {
                background: url(../images/hwmi_social_sprite.png) no-repeat -60px 0 transparent;
                display: block;
                height: 49px;
                width: 49px;
            }
            
            footer #footer-content div.footer-col ul#social-icons li.podcast a {
                background: url(../images/hwmi_social_sprite.png) no-repeat -120px 0 transparent;
                display: block;
                height: 49px;
                width: 49px;
            }
            
            footer #footer-content div.footer-col ul#social-icons li.rss a {
                background: url(../images/hwmi_social_sprite.png) no-repeat -180px 0 transparent;
                display: block;
                height: 49px;
                width: 49px;
            }
            
            footer #footer-content div.footer-col iframe {
                margin: 20px 0 0;
            }

    footer #copyright {
        background: url(../images/hwmi_header_bg.png) repeat-x left -94px transparent;
        border-top: 3px solid #000;
        display: block;
        height: 50px;
		color: #ffffff;
		font-size: 11px;
		text-align: center;
    }
	footer #copyright p {
		margin: 10px 0;
	}

.content-wrapper {
    background: url(../images/hwmi_content_bg_top.png) repeat-x top left #ffffff;
    display: block;
    padding-bottom: 40px;
}

.wrapper {
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
}

.launch-contact-modal {
    cursor: pointer;
}

/*utils*/
.clearfix {
    clear: both;
    display: block;
    zoom: 1;
}

.dashed-border {
    border-top: 1px dashed #CCCCCC;
    margin: 20px 0;
    width: 500px;
}

p.podcast-desc {
    margin-top: 0;
}

p.podcast-desc a {
    color: #2A828C;
    font-weight: bold;
    text-shadow: 0 1px 0 #FFFFFF;
}

img.main-cta {
	border: 4px solid #3A2B24;
}

ul#tweets img {
	border: 0;
}