/* foo.css */
/* 
  
  styles here in this folder, in seperate little css files,
  eg: 'main_nav.css', 'header.css', etc. which are
  built into the screen/screen.full.css dist file using
  python bin/buildcss -v bobbooks -f screen
  
  
*/

/* lightbox.css */
html, body {
    height: 100%;
    margin: 0px;
    width: 100%; 
}

/*  This is the CSS for the semi transparent layer that
    covers the page when the lightbox is called */
#screen {
    background : #001122;
    height     : 100%;
    left       : 0px;
    position   : absolute;
    top        : 0px;
    width      : 100%;
    z-index    : 10;
}

/*  This is the CSS for the layer that contains the
    information we want to display in the lightbox */
#light_box {
    background  : #fff;
    height      : 100px;
    left        : 50%;
    margin-left : -50px;
    margin-top  : -50px;
    padding     : 5px;
    position    : absolute;
    top         : 50%;
    width       : 100px;
    z-index     : 12;
}

/* making sure the lightbox and the close button have the same kind of border */
#light_box, #light_box_close{
  border : solid 2px #666;
}

/*  lich_box_content is where the data is actually loaded, inside the lightbox
    this is so that we can make it fade in and fade out independant to the rest
    of the lightbox */
#light_box #light_box_content{
  height : 100%;
  width  : 100%;
}

/* the button to close the lightbox */
#light_box_close{
  background: #fff url("/++resource++bob/img/close.png") 90% 2px no-repeat;
  border-top: 0px;
  bottom: -2.1em;
  cursor: pointer;
  font-size: 1.1em;
  padding: 5px;
  padding-right: 35px;
  position: absolute;
  right: 5px;
}

/*  content resizer should never be seen by the user, it's jsut there to make
    calculations */
#content_sizer{
  font-size : 1em;
  left: -9999px;
  overflow: auto;
  position: absolute;
  top: -9999px;
}

/* style.css */
*{
  margin: 0;
  padding: 0;
}
body{
  background: #B8B8B8;
  font: 12px Arial;
}
#basis{
  width: 851px;
  margin: 0 auto;
}
a img{
  border: 0;
}
a{
  color: #f00;
  text-decoration: none;
}
#topLinks{
  width: 100%;
  overflow: hidden;
  font: 12px Arial, sans-serif;
  padding: 20px 0 8px 0;
}

ul li{
  list-style-type: none;
  list-style-position: outside;
}
#topLinks a{
  float: left;
  color: #fff;
  text-decoration: underline;
}

#topLinks a.active, #topLinks a:hover{
  color: #f00;
}
#sharing {
    color   : #F2F2F2;
display : block;
padding : 5px 10px 5px 0px; margin-top : -5px; position : absolute;
}
#sharing a {
    color   : #F2F2F2;
    float : none;
}
#sharing img {
    vertical-align  : middle;
}
.rightPart{
	float: right;
}
.rightPart a{
  padding: 0 0 0 11px;
}
#topLinks .rightPart a{
  color: #F2F2F2;
}
#topLinks .rightPart a.active, #topLinks .rightPart a:hover{
  color: #f00;
}
.toplinks .rightPart a{
  background: url(/++resource++bob/img/slash.gif) 0 1px no-repeat;
  margin : 0 0 0 13px;
  padding: 0 0 0 13px;
}

.rightPart a#firstLink{
  background : none;
}
.top-welcome-message {
    float: left;
    color: #F2F2F2;
    padding-right: 10px;
}
#menu td{
  border-left: 1px solid #fff;
  font: 12px Arial;
  text-align: center;
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
}
#menu td.active, #menu td:hover{
  background: #EC1C24;
}
#menu a{
  display: block;
  text-decoration: none;
  color: #fff;
  line-height: 13px;
  padding: 2px 0 1px 0;
}
/*
#menu a:hover{
  color: #f00;
}
    
    #menu td.active a:hover{
      color: #FFF;
    }
*/
#menu td#firstChild{
  border-left: 0;
}
#data{
  background: #fff;
  width: 100%;
  min-height: 500px;
  padding-bottom: 13px;
}
#sideCol{
  float: left;
  width: 188px;
  display: inline;
  margin: 20px 19px 21px 25px;
  color: #666;
}
#sideCol p{
  padding: 0 0 14px 0;
  line-height: 14px;
}
#sideText{
  padding: 55px 0 20px 0;
}
#sideMenu{
  font: 12px Arial;
  padding-bottom: 94px;
}
#sideMenu li{
  padding-bottom: 5px;
}
#sideMenu li.active a{
  color: #f00;
}
#sideMenu a{
  color: #000;
  text-decoration: none;
}
/* pire */
#sideMenu li a:hover{
  color: #f00;
}
/* pire */
#sideCol ol li{
  list-style-position: outside;
  list-style-type: none;
  line-height: 14px;
  padding-top: 14px;
}
h3{
  font-size: 12px;
  font-weight: bold;
  line-height: 14px;
}
#sideCol ol li strong{
  padding-right: 3px;
}
#content{
  float: right;
  display: inline;
  margin: 0 29px 0 0;
  width: 590px;
  color: #B2B2B2;
  font: 12px/14px Arial, sans-serif;
  /*font: 31px/33px "Times New Roman";*/
  padding: 17px 0 21px 0;
}
*html #content{
    overflow:hidden;
}
#content span{
  color: #808080;
}
#content p{
  padding-bottom: 15px;
}

/* pire */
#content-footer {
    display:block;
    color:#000000;
    font: 12px Arial;
    float:left;
    margin-left:-232px;
    position: relative; 
    width:851px;
}
/*
#content-footer {
    color:#000000;
    font: 12px Arial;
    margin-left:-232px;
    width:851px;
    position: absolute;
    bottom:0px;
}
*/
#botImgs{
  float: right;
  padding: 67px 8px 0 0;
}
.illustration{
  float: left;
  display: inline;
  margin: 0 0 0 11px;
}
.illustration img{
  display: block;
}
#footer{
  background: url(/++resource++bob/img/border.gif) 0 0 repeat-x;
  width: 100%;
  overflow: hidden;
  padding-bottom: 37px;
}
#footer a{
  float: left;
  color: #fff;
  text-decoration: underline;
}
#footer a.active, #footer a:hover{
  color: #f00;
}
#footer .rightPart{
  padding: 13px 0px 0px 0px;
  height: 34px;
}
#footer .rightPart a{
  padding: 0 0 0 11px;
}
.leftPart{
  float: left;
  padding: 13px 0 0 0;
}
.leftPart a{
  padding: 0 8px 0 2px;
}
#topBanner{
  background: url(/++resource++bob/img/top_img.jpg) 0 0 no-repeat;
  width: 802px;
  height: 253px;
  margin: 0px 0 0 24px;
  border-top:18px solid #FFFFFF;
}
#topBannerSWF {
    margin-left: 25px;
    margin-top: 22px;
}
#topBanner h1{
  color: #808080;
  font: 48px/40px "Times New Roman";
  padding: 19px 0 0 24px;
}
#topBanner h1 span{
  color: #000;
}
.topic{
  float: left;
  width: 142px;
  background: url(/++resource++bob/img/dash.gif) 0 100% repeat-x;
  margin: 0 0 0 23px;
  display: inline;
  padding-bottom: 14px;
}
.imgWrap{
  height: 99px; /* pire : was 126px */
  background: url(/++resource++bob/img/dash.gif) 0 100% repeat-x;
}

.topic h2{
  font-size: 12px;
  padding: 9px 0 6px 2px;
}
.topic p{
  padding: 0 0 0 0;
}
#topicsWrap{
  float: left;
  padding: 20px 0 0 3px;
}
#caption{
  clear: both;
  font-size:1.2em;
  color:#FF0000;
  /*padding-top: 15px;*/
}
#caption img{
  display: block;
}
#columnList{
  font: 12px/14px Arial, sans-serif;
  color: #666;
  padding: 2px 0 0 0;
}
#columnList li{
  float: left;
  width: 164px;
  margin-right: 30px;
}
.clear{
  clear: both;
  font-size: 0;
  line-height: 0;
  height: 0;
}
.num{
  display: block;
  color: #4D4D4D;
  font-weight: bold;
}
/*.xsmallitem,*/
.smallitem,
.item{
  float: left;
  position: relative;
  display: inline;
}
.item{
  height: 224px;
  width: 224px;
  margin: 0 29px 16px 29px;
}
.smallitem{
  height: 185px;
  width: 185px;
  margin: 0 13px 16px 13px;
}
.xsmallitem, .itemImgWrap{
    display:inline;
}

/* pire */
.examples-container{
    position: absolute;
    margin-top: -5em;
}

.examples-container_hidden{
    visibility: hidden;
    margin-bottom: -6em;
}

*html .examples-container_hidden{
    margin-top: -6em;
}
/*
.itemImgWrap{
  position: absolute;
  bottom:0;
  width: 224px;
}
.xsmallitem{
  width: 144px;
  height: 144px;
  margin: 0px 16px 13px;
}
}
.xsmallitem .itemImgWrap{
  width: 144px;
}
  .xsmallitem img,
*/
.smallitem img,
.item img{
  display: block;
  margin: 0 auto;
}
.smallitem .itemImgWrap{
  width: 185px;
}
.centerLink{
  width: 172px;
  margin: 24px auto 145px auto;
  background: url(/++resource++bob/img/arrow.gif) 50% 0 no-repeat;
  font: 12px/14px Arial;
  text-align: center;
  padding: 115px 0 0 0;
}
.centerLink#flickbook{
  background-image: url(/++resource++bob/img/book_12.gif);
}
#smallFont{
  font: 12px/14px Arial, sans-serif;
  color: #666;
}
#smallFont ol li{
  list-style-position: inside;
}
#contentList{
  font-weight: bold;
  padding: 69px 0 27px 0;
}
#smallFont #contentList li{
  padding: 0;
}
#contentList a{
  color: #666;
}
#contentList li.active{
  color: #f00;
}
#contentList li.active a{
  color: #f00;
}

#smallFont li{
  padding: 0 0 25px 0;
}
#content #smallFont li p{
  padding-bottom: 0;
}
#pageForm{
  font: 12px/14px Arial, sans-serif;
  color: #666;
  padding: 2px 0px 33px 0;
  margin: 53px 1px 0 0;
}
#actual-form {
padding-right : 323px;
}
#pageForm p{
  padding: 12px 0 0 0;
}
.textField{
  border: 0;
  background: #ccc;
  color: #666;
  width: 161px;
  padding: 1px 0px;
  padding-left:4px;
}
.textField.long{
  width: 183px;
}
.textField.short{
  width: 31px;
}

.show-border select, .show-border input, .show-border textarea {
    border: 1px solid #FF0000;
}
#pageForm ul{
  padding: 12px 0 12px 1px;
}
#pageForm ul li{
  background: url(/++resource++bob/img/bullet.gif) 0 6px no-repeat;
  padding: 0 0 0 43px;
}
.show_ul ul li{
  list-style-type: disc !important;
  list-style-position: inside !important;
  margin-left: 30px;
}
.submitBtn{
  background: #fff;
  border: 0;
  color: #f00;
  padding: 0 0 0 0;
  margin: 26px 30px 0 0;
}
.errors {
    color: #FF0000;
}
.errors ul {
  margin-bottom: 1em;
}
.errors li {
  list-style-type: disc; 
  list-style-position: inside;
  padding: 0.15em;
}
.invalid-field {
    border: 1px solid #FF0000;
}
.sideForm h3{
  padding: 0 0 0 0;
}
#sideCol .sideForm p{
  padding: 14px 30px 12px 0;
}
.sideForm .textField{
  padding: 2px 0 3px 0;
	display: block;
  margin-bottom: 6px;
}
.sideForm label{
  display: block;
}
.sideForm .submitBtn{
  margin: 0 0 13px 0;
  display: block;
}
#avatarWrap{
  padding: 43px 0 31px 0;
}
#imgWithTxt{
  padding: 66px 10px 151px 0;
  float: left;
  width: 580px;
}
#imgWithTxt img{
  float: right;
  display: inline;
  margin: 1px 0 5px 5px;
}
#centerImg{
  display: block;
  margin: 33px auto 22px auto;
}
.dataTable{
  font: 12px/14px Arial, sans-serif;
  text-align: left;
  border-collapse: collapse;
  width: 605px;
  margin: 46px 0 0 0;
}
.dataTable th{
  vertical-align: bottom;
  font-weight: bold;
  padding: 3px 0 4px;
}
.dataTable .topAlign th{
  vertical-align: top;
  color: #4D4D4D;
  padding: 3px 0 4px 11px;
}
.dataTable th span{
  display: block;
  font-weight: normal;
  color: #4D4D4D;
}
.dataTable th, .dataTable td{
    overflow: hidden;
}
.yellow{
  background: #FDF259;
}
.green{
  background: #C7FF7F;
}
.jetstream{
  background: #B9D1CF;
}
.lilac{
  background: #BAA3C2;
}
.pink{
  background: #edaebf;
}
.dataTable td{
  border: 1px solid #000;
  color: #666;
  padding: 2px 12px 3px 12px;
}
.dataTable td.space{
  border-style: none solid;
}
#itemText{
  width: 184px;
  color: #666;
  padding:0 0 0 26px;
  line-height: 14px;
}
#itemText p{
  padding: 0 0 14px 0;
}
#openBook{
  background: url(/++resource++bob/img/book_bg.gif) 0 0 repeat-y;
  width: 809px;
  font: 12px/14px Arial, sans-serif;
  _font-size: 10px/12px;
  *font-size: 10px/12px;
  color: #666;
  margin: 0px 0 0 25px;
}
#topPart{
  background: url(/++resource++bob/img/top_part.gif) 0 0 no-repeat;
}
#botPart{
  background: url(/++resource++bob/img/bot_part.gif) 0 100% no-repeat;
  width: 100%;
  overflow: hidden;
  padding: 41px 0 117px 0;
  height:270px;
}
#firstCol{
  float: left;
  width: 328px;
  padding: 0 0 0 57px;
}
#secondCol{
  float: right;
  width: 318px;
  padding: 0 62px 0 0;
}
#openBook em{
  display: block;
}
#openBook p{
  padding: 14px 0 0 0;
}
#object{
  width: 346px;
  margin: 32px auto 0 auto;
}
#linksList{
  padding-bottom: 14px;
}
#linksList li{
  padding: 0 0 5px 0;
}

#magnifyingGlass{
  display: block;
  margin: 13px 0 0 0;
}

#book-details {
    display:block;
    float:left;
    margin-left:-353px;
    position: relative; 
    width:850px;
}

/*** Links Page ***/

.link-page-menu {
    display:block;
    height:115px;
    overflow:hidden;
    padding-bottom:0px;
}

.link-list {
    display:block;
    margin-top: 45px;
}

.link-list li {
    display:block;
    margin-top:15px;
}

.link-page-link {
    display:block;
    float:left;
    margin-left:25px;
    width:207px;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.link-page-description {
    display:block;
    margin-right:29px;
    width:590px;
    float:right;
    color:#7d7d7d;
}


/*** Book Gallery ***/

.book-archive-link {
    display:block;
}
.book-archive-link:hover, .book-archive-link:hover span {
    color:#959595;
}

.gallery-book-description, .book-preview {
    display:block;
    font: 12px/14px Arial, sans-serif;
    color: #666666;
    margin-top:20px;
    min-height : 323px;
    height : auto !important;
    height : 323px;
}
.gallery-book-description{
    float:left;
    width:200px;
    margin-right:15px;
}
.book-preview a {
    font: 12px/14px Arial, sans-serif;
}

/*** About Us: See for yourself ***/

.view-description {
    margin: 5px 0px 10px 0px;
}

a.view-trigger.active {
    color: #666666;
    font-weight:bold;
}



/*** Forms ***/ 
 
.field{ 
  display: block; 
  width: 100%; 
  overflow: hidden; 
  padding: 4px 0 5px 0; 
} 
.field label{ 
  display: block; 
  /*float: left; 
  width: 130px; */
  padding: 3px 2px 0 0; 
} 
.field label.longLabel{ 
  width: 170px; 
  padding: 0 0 0 0; 
  text-align: left; 
  float:left;
}
input.checkbox {
    float:left;
    margin-right:5px;
}

#registration-form-errors {
    margin-top:10px;
}

#gv_t_link{
    background: url("/++resource++bob/img/voucher_bow.png") no-repeat;
    height: 2.2em;
    margin-left: -30px;
    padding-left: 30px;
    position: absolute;
}
    #gv_t_link:hover {
        background: url("/++resource++bob/img/voucher_bow_over.png") no-repeat;
    }

.flickbooks-examples {
    margin-top:0px;
    position: relative;
    margin-left: 234px;
    margin-top: -22em;
}
.flickbooks-examples .itemImgWrap{
    width: 190px;
    margin: 0px 10px 10px 0px;
    overflow:hidden;
    display: block;
    float: left;
}

#discount-table {
  width:175px;
  margin:20px auto;
  color:#7D7D7D;
}
#discount-table td, #discount-table th {
  width:50px;
  padding:5px 10px;
  text-align:left;
  font-weight: normal;
}
#discount-table td {
  background-color:#EBEBEB;
}
  #discount-table td.dark-grey {
    background-color:#C1C1C1;
  }

.inner-loggin a{
    color : #000;
}

.inner-loggin a:hover{
    color : #ff0000;
}

/*
 * comments area
 */
    #book-description {
        color       : #444;
        float       : right;
        width       : 400px;    
    }
    #comments, #add-comment-form {
        clear       : both;
        height      : 200px;
        margin      : 0px;
        width       : 590px;
    }
    
    #add-comment-form {
        height      : 100px;
        position    : absolute;
        margin      : 20px 0 0;
    }
    
    #add-comment-form{
        *margin-left : -68px !important; /* ie7 */
        *margin-top  : 18px !important; /* ie7 */
    }
    
    #add-comment-form textarea {
        border      : solid 1px #336699;
        height      : 100px;
        margin      : 0px;
        width       : 590px;
    }
    
    #add-comment-form input {
        background  : #ff0000;
        border      : none;
        color       : #fff;
        float       : right;
        font-weight : bold;
        height      : 20px;
        margin      : 0 -2px 0 0;
        padding     : 2px 10px;
    }
    
    #submited-area {
        background  : #fff;
        float       : right;
        padding     : 2px 20px;
        
    }
    
    #submited-area img {
        vertical-align : bottom;
    }
    
    #error-area {
        background  : #fff;
        color       : #ff0000;
        float       : right;
        padding     : 2px 20px;
    }

    #post-comment-title{
        float       : left;
        margin      : 0 0 5px;
    }
    
    #post-a-comment, .logintocomment {
        float       : right;
    }
    
    #comments-holder {
        border      : solid 1px #777;
        clear       : both;
        height      : 200px;
        overflow    : auto;
        width       : 100%;
        _width      : 580px;
    }
    
    #comments-holder li {
        background  : url(/++resource++bob/img/dot-red.png) left 7px no-repeat;
        margin      : 0 0 0 20px;
        padding     : 3px 15px;
    }
    
    .comment {
        clear   : both;
    }
    .comment span{
        float : right;
        font-weight : bold;
    }

a.book-archive-link span {
    float           : left;
}

a.book-archive-link span.clear {
    display         : block;
    float           : none;
    height          : 10px;
}

span.img-listing {
    display         : block;
    height          : 50px;
    overflow        : hidden;
    margin-right    : 6px;
    width           : 50px;
}

span.img-listing img {
    height          : 75px;
    width           : auto;
}

#snow-flake {
    background  : url(/++resource++bob/img/snowflake.png) 0 0 no-repeat;
    height      : 190px;
    margin-left : 720px;
    width       : 216px;
    position    : absolute;
}

* html #snow-flake {
    background-image : url(/++resource++bob/img/snowflake_ie.png);
}

#reduced {
    background  : url(/++resource++bob/img/reduced.png) 0 0 no-repeat;
    height      : 158px;
    margin-left : 780px;
    margin-top  : 4px;
    width       : 158px;
    position    : absolute;
}

* html #reduced {
    background-image : url(/++resource++bob/img/reduced-ie6.png);
}