/* The style of the marketing-playbook-homepage
 * Date: March 09, 2008
 * "Xhtml/CSS" Designed by: Osama Zakaria
 * Contact Info:
 *      E-mail osama.zakaria.cs@gmail.com
 *      Mobile +20125438279
 */

/********* defaults *********/

*{
	margin: 0px;
	padding: 0px;
    font: 13px Verdana;
}

body{
    padding: 0 25px 0 25px;
    text-align: center;
}

fieldset, img{
    border: 0;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
}

h1, h2, h3, h4, h5{
    font-weight: bold;
}

h1, h1 span {
    color: #777;
    letter-spacing: -2px;
    padding-right: 2px;/*solve letter spacing problem of the last character in IE7 and below*/
    font-size: 19px;
}

h2, h2 span{
    color: #555;
    letter-spacing: -1px;
    font-size: 14px;
    font-weight: normal;
}

h3{
    position: relative;
    top: 8px;
    left: 8px;
    color: #AE0000;
    font-size: 12px;
}

/********* classes *********/

.left{
    float: left;
}

.right{
    float: right;
}

.clear{
    clear: both;
}

.red{
    color: #AE0000;
    font-weight: bold;
}

.more{
    border-bottom: 1px dotted #999;
    color: #ccc;
    letter-spacing: -1px;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    top: 25px;
}

* html .more{
    top: "23px"; /*IE5.5 hack*/
}

.more:hover{
    border-bottom: 1px solid #ccc;
}

/*.main-box*/

.bg-mainbox{background: #002442 url(images/main_box_bg.jpg) repeat-x top left; width: 100%;}
.bl-mainbox{background: url(images/bl_main_box.jpg) no-repeat bottom left;}
.br-mainbox{background: url(images/br_main_box.jpg) no-repeat bottom right; height: 571px; padding-top: 20px;}
* html .br-mainbox{height: "591px";}

/*inner-box*/

.t-innerbox{background: #FFF url(images/border_white_box.jpg) repeat-x top left; width: 757px; margin: auto;}
.b-innerbox{background: url(images/border_white_box.jpg) repeat-x bottom left;}
.l-innerbox{background: url(images/border_white_box.jpg) repeat-y top left;}
.r-innerbox{background: url(images/border_white_box.jpg) repeat-y top right;}
.bl-innerbox{background: url(images/bl_white_box.jpg) no-repeat bottom left;}
.br-innerbox{background: url(images/br_white_box.jpg) no-repeat bottom right;}
.tl-innerbox{background: url(images/tl_white_box.jpg) no-repeat top left;}
.tr-innerbox{background: url(images/tr_white_box.jpg) no-repeat top right; height: 332px;}

/*shaded-box*/

.t-shadedbox{background: #FFF url(images/border_shaded_box.jpg) repeat-x top left; text-align: left;}
.b-shadedbox{background: url(images/b_shaded_box.jpg) repeat-x bottom left;}
.l-shadedbox{background: url(images/border_shaded_box.jpg) repeat-y top left;}
.r-shadedbox{background: url(images/r_shaded_box.jpg) repeat-y top right;}
.bl-shadedbox{background: url(images/bl_shaded_box.jpg) no-repeat bottom left;}
.br-shadedbox{background: url(images/br_shaded_box.jpg) no-repeat bottom right;}
.tl-shadedbox{background: url(images/tl_shaded_box.jpg) no-repeat top left;}
.tr-shadedbox{background: url(images/tr_shaded_box.jpg) no-repeat top right; height: 115px;}

/*play-book*/

.bl-playbook{background: #2A3E56 url(images/bl_playbook.jpg) no-repeat bottom left; width: 188px; text-align: left;}
.br-playbook{background: url(images/br_playbook.jpg) no-repeat bottom right;}
.tl-playbook{background: url(images/tl_playbook.jpg) no-repeat top left;}
.tr-playbook{background: url(images/tr_playbook.jpg) no-repeat top right; height: 140px;}

/********* ids *********/

/*wrapper*/

#wrapper{
    width: 800px;
    margin: auto;
}

/*menu*/

#menu{
    height: 25px;
    padding: 6px 23px 0 23px;
    background: #000;
}

#menu .left{
    color: #aaa;
    letter-spacing: 1px;
    font: 15px Impact;
}

#menu .left .sub-phrase{
    margin-left: 10px;
    color: #ccc;
    letter-spacing: normal;
    font: 12px Arial;
}

#menu .right li, #menu .right li a{
    float: left;
}

#menu .right li{
    color: #666;
    font-size: 12px;
    padding-top: 2px;

}

#menu .right li a, #menu .right li a:visited, #menu .right li a:active{
    color: #999;
    border-bottom: 1px dotted #444;
}

#menu .right li a:hover{
    color: #ccc;
    border-bottom: 1px solid #999;
}

#menu .right .checked{
    color: #ccc;
    font-weight: bold;
}

#menu .right a br{
    display: none;
    visibility: hidden;
}

/*john-fox*/

#john-fox{
    position: relative;
    top: 7px;
    left: 17px;
    text-align: left;
}

#john-fox li{
    float: left;
}

#john-fox li p{
    position: relative;
    top: 126px;
    left: 2px;
    color: #666;
    letter-spacing: -1px;
    line-height: 10px;
    font-size: 10px;
}

/*build-now*/

#build-now{
    width: 450px;
    text-align: right;
    position: relative;
    top: 30px;
    right: 17px;
}

/*search-keyword*/

#search-keyword{
    width: 434px;
    margin-left: 14px;
}

* html #search-keyword{
    margin-left: 7px;
}

#search-keyword form{
    width: 100%;
    position: relative;
    top: 18px;
    left: 8px;
}

#search-keyword form .text{
    float: left;
    width: 310px;
    height: 21px;
    padding: 7px 3px 0 3px;
    margin-bottom: 3px;
    border: 1px solid #333;
    font-size: 14px;
}

* html #search-keyword form .text{
    width: "316px";
    height: "30px"; /*IE5.5 hack*/
}

#search-keyword .submit{
    background: url(images/search_button-off.gif) no-repeat right;
    width: 84px;
    height: 30px;
    margin-left: 3px;
    border: none;
    cursor: pointer;
}

* html #search-keyword .submit{
    margin-left: 0;
}

#search-keyword form p{
    color: #333;
    font-size: 10px;
}

/*search-topic*/

#search-topic{
    width: 299px;
    margin-left: 4px;
}

#search-topic ul{
    margin: 18px 0 0 8px;
}

#search-topic li, #search-topic li a{
    float: left;
    color: #336699;
    line-height: 19px;
    font-weight: bold;
}

#search-topic a{
    text-decoration: underline;
    font: bold 12px Arial;
}

#search-topic a:hover{
    color: #003366;
}

/*buzz*/

#buzz{
    width: 460px;
    margin: 55px 0 0 35px;
    text-align: left;
}

* html #buzz{
    margin: 55px 0 0 18px;
}

#buzz a{
    border-bottom: 1px dotted #999;
    color: #ccc;
    font: bold 16px Arial;
}

#buzz a:hover{
    border-bottom: 1px solid #ccc;
}

#buzz p{
    position: relative;
    top: 5px;
}

#buzz p, #buzz p i{
    color: #999;
    letter-spacing: -1px;
    font-size: 14px;
}

#buzz p i{
    font-style: italic;
}

/*playbook*/

#playbook{
    margin: 45px 22px 0 0;
}

* html #playbook{
    margin: 45px 11px 0 0;
}

#playbook li{
    position: relative;
    top: 10px;
    left: 12px;
}

#playbook .top{
    padding-bottom: 5px;
    color: #ccc;
    font-size: 11px;
    font-weight: bold;
}

#playbook .left{
    width: 103px;
    color: #999;
    letter-spacing: -1px;
    font-size: 13px;
}

#playbook .left li{ /*star*/
    float: left;
    background: url(images/star.jpg) no-repeat;
    padding: 6px;
    position: relative;
    top: 5px;
    left: 25px;
}

#playbook .right{
    float: left;
}

/*footer*/

#footer{
    padding: 16px 23px 0 23px;
}

#footer .right li, #footer .right li a{
    float: left;
    padding-bottom: 2px;
    color: #ccc;
    font-size: 12px;
}

#footer .right li a, #footer .right li a:visited, #footer .right li a:active{
    color: #999;
    border-bottom: 1px dotted;
}

#footer .right li a:hover{
    color: #444;
    border-bottom: 1px solid;
}

#footer .copyright{
    color: #ccc;
    font-size: 10px;
}