/* @override http://runplaybook.com/ui/style/main.css */



/*----------Clear defaults - inspired from Tantek Celik*/

:link,:visited {text-decoration:none;} 

ul,ol,dl {list-style:none;} 

h1,h2,h3,h4,h5,h6,pre,code {font-size:1em; font-weight:normal;}

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,dl,dt,dd {margin:0; padding:0;} 

a img,:link img,:visited img {border:none;}

address {font-style:normal;}

strong {font-weight:bold;}

em {font-style:italic;}

i {display:none; font-style:normal;}

b {font-weight:normal;}



/*----------Default Styles*/

body {

    background:#fff;

    color:#4c5954;

    font:12px/15px Arial, Helvetica, sans-serif;

    overflow-y:scroll;

}

a {

    color:#d93e0b;

    text-decoration:none;

    padding:0 1px;

}

a:hover {

    color:#fff;

    background:#d93e0b;

}

h1 {

    font:72px/60px Arial, Helvetica, sans-serif;

    letter-spacing:-3px;

    margin-bottom:25px;

    margin-left:-10px;

    float:left;

    width:375px;

}

h2 {

    clear:both;

    font:36px/30px Arial, Helvetica, sans-serif;

    letter-spacing:-1px;

}

h3, h4, h5 {

    font:15px/30px "Segoe UI", Tahoma, "Arial Narrow", Arial, Helvetica, sans-serif;

    font-weight:bold;

    margin-bottom:10px;

}

h3 {

    padding:0 10px;

    background:#a3cccc;

    color:#fff;

}

h5 {

    color:#7a9999;

    margin-top:10px;

}

h6, h6 a, h6 a:hover {

    width:165px;

    height:70px;

    display:block;

    padding:0;

    background:none;

}

h6 {

    background:url(../media/images/playbook.gif) no-repeat 0 0;

    position:absolute;

    top:0;

    left:0;

}

p, ul, ol, form {padding-bottom:10px;}

#email_form input {

    font:12px/15px Arial, Helvetica, sans-serif;

    color:#858c87;

    padding:5px;

    width:170px;

    margin-bottom:5px;

    background:#fafaf6;

    border:1px inset #d1d1c7;

}

#email_form input input:focus {background:#fff;}

#email_form input input.button {

    padding:0;

    width:auto;

    cursor:pointer;

    background:none;

    border:0;

}

blockquote {

    margin:0 0 20px 15px;

    font-family:Georgia, "Times New Roman", Times, serif;

    font-style:italic;

    color:#858c89;

    border-left:1px solid #a3cccc;

    padding-left:10px;

}

table {

    width:100%;

    margin-bottom:20px;

}

td, th {

    font:12px/25px Arial, Helvetica, sans-serif;

    height:25px;

    padding:0 15px;

    text-align:left;

    color:#4c5954;

    border-right:1px solid #fff;

    border-bottom:5px solid #fff;

}

td.odd {background:#e6ebeb;}

td.even {background:#dde2e2;}

td.price {

    background:#7ca6a6;

    color:#fff;

    font-weight:bold;

    text-align:right;

}

th {

    background:#fff;

    font-weight:bold;

}

th.price {

    color:#7ca6a6;

    text-align:right;

}



/*----------Common Styles*/

.gray {color:#858c89;}

.gray strong {

    color:#4c5954;

    font-weight:normal;

}

.section {margin-bottom:10px;}

.blue {

    background:#a3cccc;

    color:#fff;

    padding:3px 10px;

    display:inline;

    position:relative;

    left:-10px;

}



.green {

    background:#A0E072;

    color:#fff;

    padding:3px 10px;

    display:inline;

    position:relative;

    left:-10px;

}

a.blue:hover {background:#4c5954;}
a.green:hover {background:#4c5954;}

.text {padding:0 280px 0 190px; clear: both;}

.top {

    width:740px;

    text-align:right;

    font:9px/10px Tahoma, Arial, Helvetica, sans-serif;

    color:#858c89;

    padding-bottom:20px;

}

body.know .top {width:auto;}

.top a {

    padding:0 10px 0 0;

    color:#858c89;

    background:url(../media/images/etc/top.gif) no-repeat 100% 60%;

}

.top a:hover {

    background:url(../media/images/etc/top.gif) no-repeat 100% 60%;

    color:#858c89;

    border-bottom:1px dotted #858c89;

}

ul.list li {

    padding-left:25px;

    background:url(../media/images/etc/bullet.gif) no-repeat 15px 5px;

    padding-bottom:2px;

}

.more {

    font:9px/11px Tahoma, Arial, Helvetica, sans-serif;

    color:#fff;

    font-weight:bold;

    background:#de613a;

    padding:1px 4px;

    text-transform:uppercase;

}

.more:hover {background:#4c5954;}

.thumb {

    float:right;

    margin:0 0 20px 25px;

}



/*----------Layout*/

#container {

    width:970px;

    margin:40px auto 20px auto;

}

#header {

    height:110px;

    position:relative;

}

#main {

    width:100%;

    overflow:hidden;

    min-height:335px;

}

#left, #center, #right {float:left;}

#left {

    width:175px;

    background:url(../media/images/layout/vline-left.gif) no-repeat 100% 0;

    min-height:335px;

}

#center {width:580px;}

#right {

    width:180px;

    padding:60px 0 0 30px;

    background:url(../media/images/layout/vline-right.gif) no-repeat 0 0;

    min-height:275px;

}

#content { padding-top:20px;}

/*.s0, .s1, .s2, .s3, .s4, .s5, .s6, .s7 { display: none; }*/


#footer {

    clear:both;

    height:20px;

    width:780px;

    margin-left:190px;

    overflow:hidden;

    padding-top:20px;

}



/*----------Header*/

#header ul {

    height:25px;

    position:absolute;

    left:170px;

    top:42px;

}

#header li {

    display:inline;

    float:left;

    font:15px/25px "Arial Narrow", Arial, Helvetica, sans-serif;

    font-weight:bold;

}

#header li a {

    display:block;

    height:25px;

    padding:0;

    outline:none;

}

#header li.m0 a {width:50px; background:url(../media/images/nav/m0.gif) no-repeat 0 0;}
#header li.m1 a {width:66px; background:url(../media/images/nav/m1.gif) no-repeat 0 0;}
#header li.m2 a {width:56px; background:url(../media/images/nav/m2.gif) no-repeat 0 0;}
#header li.m3 a {width:111px; background:url(../media/images/nav/m3.gif) no-repeat 0 0;}
#header li.m4 a {width:62px; background:url(../media/images/nav/m4.gif) no-repeat 0 0;}
#header li.m5 a {width:77px; background:url(../media/images/nav/m5.gif) no-repeat 0 0;}

#header li a:hover {background-position:0px 50%;}
#header li.active a {background-position:0px 100%;}


/*----------Overview*/

#overview {height:335px;}

#overview div h1 {margin:0;}

#overview div a {

    display:block;

    margin:0;

    width:580px;

    height:335px;

    padding:0;

    background:none;

    outline:none;

}

.a0 {display:block;}

.a1, .a2, .a3, .a4, .a5, .a6 {display:none;}

.a0 {background:url(../media/images/overview/r08-ov-what-is-playbook.gif) no-repeat 0 0;}

.a1 {background:url(../media/images/overview/r08-ov-roll-out-open-source.gif) no-repeat 0 0;}

.a2 {background:url(../media/images/overview/r08-ov-play-nice-with-cisco.gif) no-repeat 0 0;}

.a3 {background:url(../media/images/overview/r08-ov-safeguard-configs.gif) no-repeat 0 0;}

.a4 {background:url(../media/images/overview/r08-ov-free-up-engineers.gif) no-repeat 0 0;}

.a5 {background:url(../media/images/overview/r08-ov-be-infosec-good-cops.gif) no-repeat 0 0;}

.a6 {background:url(../media/images/overview/r08-ov-end-zero-day-attacks.gif) no-repeat 0 0;}

.b0 {background:url(../media/images/overview/feature-0.gif) no-repeat 0 0;}

.b1 {background:url(../media/images/overview/features-navigate.gif) no-repeat 0 0;}

.b2 {background:url(../media/images/overview/features-design.gif) no-repeat 0 0;}

.b3 {background:url(../media/images/overview/features-track.gif) no-repeat 0 0;}

.b4 {background:url(../media/images/overview/features-document.gif) no-repeat 0 0;}

.e0 {background:url(../media/images/overview/signup.gif) no-repeat 0 0;}

.c0 {background:url(../media/images/overview/whatsnew-0.png) no-repeat 0 0;}

.homegal:hover{

    background:none;
}




/*----------Left*/

#left ul {margin-top:60px;}

#left li {

    width:175px;

    height:25px;

    float:left;

    font:15px/25px "Arial Narrow", Arial, Helvetica, sans-serif;

    font-weight:bold;

    margin-bottom:5px;

    text-align:right;

}

#left li a {
    display:block;
    float:left;
    width:175px;
    height:25px;
    outline:none;
}

#left li.active a, #left li a:hover {background-position:0 0;} 

#left li.p1 {background:url(../media/images/nav/p1.gif) no-repeat 0 0;}

#left li.p2 {background:url(../media/images/nav/p2.gif) no-repeat 0 0;}

#left li.p3 {background:url(../media/images/nav/p3.gif) no-repeat 0 0;}



/*----------Right*/

.e a {

    padding:0;

    color:#4c5954;

}

.e a:hover {

    color:#000;

    background:none;

    border-bottom:1px dotted #000;

}

#right .section h4 {margin-bottom:0;}



/*----------Footer*/

#footer p {

    font:9px/15px Arial, Helvetica, sans-serif;

    color:#bfbfbf;

    float:left;

}

#footer ul {

    width:180px;

    float:right;

    font:9px/15px Arial, Helvetica, sans-serif;

}

#footer li {

    display:inline;

    margin-right:10px;

}



/*----------Articles*/

body.know #center {

    padding:58px 15px 0 15px;

    width:550px;

}

body.know #center h4 a {

    display:block;

    color:#fff;

}

body.know #center .section {

    padding-right:50px;

    margin-bottom:30px;

}

.title {

    height:25px;

    margin-bottom:10px;

}

.title h4 {float:left;}

.title p.meta {

    float:right;

    text-align:right;

    font:9px/12px Tahoma, Arial, Helvetica, sans-serif;

    text-transform:uppercase;

    color:#999;

    padding:3px 0 0 0;

}

.title p.meta strong {

    font-weight:normal;

    color:#4c5954;

}

.article {clear:both;}



/*----------Pricing*/

body.pricing table {width:565px;}

body.pricing #center {

    padding-top:30px;

    padding-right:15px;

    width:565px;

}

body.pricing #center p {

    padding-left:15px;

    padding-right:50px;

}

.shots { padding:0 280px 0 190px; 
    clear: both; 
}

.shot1 { float: left; width: 130px; margin-bottom: 20px; }
.shot2 { float: left; width: 130px; margin-left: 44px; }
.shot3 { float: left; width: 130px; margin-left: 44px; }

#email_confirmation { display: none; }

#new {
    position: absolute;
    left: 8em;
    z-index: 0;
    display: inline;
    cursor: pointer;
}

.highlighted {
    background-color: yellow;   
}

.selected {
    background-color: blue;   
}

.hidden { 
    display: none;
}

.matrix table {
    border: 0px;
    table-layout:fixed;
}
.matrix th {
    font-size:8px;
    line-height:8px;
}

.matrix input {
    font:12px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#858c87;
    padding:3px;
    width:20px;
    background:#fafaf6;
    border:0px;
}

.popup_form {
    background-color:#eee;
    padding:10px;
}
.popup_form input {
    width:350px;
}