h1 { margin: 10px 0 0 0; padding:0; 
       letter-spacing: 0.1em; font-size: 1.3em; color: #3db3d9; 
       line-height: 1.4em;
  }

  h4 { letter-spacing: 0.05em; } 

/*
  pre {
    border: 1px solid #d2dcf4;
    background-color: #f3f5f9;
    clear: both;
    padding: 10px;
    display: table;
  }
*/

.post img.framed { 
          padding: 0;
          border: 1px solid #c5c5c5; 
          margin-top: 5px;
         
}

/* for blogger images in EDIT mode*/
img.ctr { margin: 2px auto; display:block; }

div.post-body img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}




/* GOOGLE FADE HORIZONTAL*/
.ds {
background:#000000 none repeat scroll 0 0;
overflow:hidden;
position:absolute;
top: 0px;
z-index:2;
min-width:1026px;
width: 100%;
}

.shadowStart {
left:0;
}

#ds .o1 {
opacity:0.1;
filter:alpha(opacity=10);

}
#ds .h1 {  height:1px; }


#ds .o2 {
opacity:0.08;
filter:alpha(opacity=8);

}
#ds .h2 {
height:2px;
}

#ds .o3 {
opacity:0.06;
filter:alpha(opacity=6);

}
#ds .h3 {
height:3px;
}

#ds .o4 {
opacity:0.04;
filter:alpha(opacity=4);
}
#ds .h4 {
height:4px;
}

#ds .o5 {
opacity:0.02;
filter:alpha(opacity=2);
}
#ds .h5 {
height:5px;
}







/* portfolio */
/* div#main-wrapper { overflow: visible; } */

div.containing-block {
   position: relative;
   margin: 5px auto; padding: 0;
   width:  428px;
   height: 198px;
}

ul.portfolio {
   position: absolute;
   top: 43px; left:2px;
   width:  428px;
   list-style-type: none;
   margin: 0;
   padding: 0;
}


/*
ul.portfolio {
   position: relative;
   list-style-type: none;
   width: 428px;
   height: 220px;
   margin: 15px auto; 
   padding: 0;
}
*/

/*ul.portfolio li a:link, ul.portfolio li a:visited, ul.portfolio li a:hover { */

ul.portfolio li a {
   text-decoration: none;  
   z-index: 10;
}

ul.portfolio li { 
   position: absolute; 
   padding: 0; margin: 0; 
   text-align: center;  
}

ul.portfolio li img { 
   margin: 0; padding: 0;
   width: 132px; height: 112px; 
   position: relative;
   /*z-index: 98;*/ 
}

ul.portfolio li#slot1 { top:0; left: 0; }
ul.portfolio li#slot2 { top:0; left: 148px; }
ul.portfolio li#slot3 { top:0; left: 296px; }

ul.portfolio h3 { text-align: center;  }

.portfolio a:hover img {
   width: 232px;
   height: 196px;
   padding: 5px;
   background-color: white;
   border: 1px solid #333;
 
}
/* move the anchor a which includes both the a and img tag
   so unlike what we were doing before now the a moves too
   and thus the text align works. Before it was oblivious
   to the relative's shifting
*/
.portfolio a:hover {
   position: relative;
   left: -49px;
   top: -49px;
   z-index: 100; 
   font-size: 120%;
}
/* end of portfolio */




/* related */
.related {
   /* was 390 pixels */
   width: 560px;
   background:   url(http://pics.cssbakery.com/pics/bluegradient.jpg) 
                 no-repeat scroll 0 0;
   margin-top: 8px;
   margin-bottom: 20px;
}

.related h4 {
  color:#305CB6;
  font-family:Georgia,Times,Times New Roman,serif;
  font-size:1.2em;
  font-weight:normal;
  letter-spacing:0.1em;
  line-height:1em;
 
  text-transform:uppercase;
  margin:0; padding:0; padding-top: 14px; padding-left: 22px;
  margin-bottom: 25px;
}

.related h4 span {
  text-transform: none;
  letter-spacing: 0.05em;
}

.related ul { list-style-type: none; margin:0; padding: 0; margin-left:25px;}

.related ul li {
     background: url(http://pics.cssbakery.com/pics/check.gif) 
                 no-repeat scroll 0 5px ;
     display:block;
     line-height:1.4;
     padding: 0 0 0 20px;
}


.related ul a {
     color:#305CB6;
}

.related a.icon {
    /*first position is the x-value (1px) , second position (1px) is the y-axis*/
    background: url(http://pics.cssbakery.com/pics/firefox_icon.jpg) 
                no-repeat scroll 1px 1px;
    padding: 0 0 0 20px;
}
/* end of related */



#w3iframe {
    border: none;
}

/* sliding doors vertical */
#gallery {
  padding:0; 
  margin:0; 
  list-style-type:none; 
  overflow:hidden; 
  width:320px; 
  height:426px; 
  border:1px solid #888; 
  background:#fff url(http://pics.cssbakery.com/pics/winbackv.jpg) 100% 100%;
  }
#gallery li {
  float:left;
  }
#gallery li a {
  display:block; 
  height:30px;
  width:320px; 
  float:left; 
  text-decoration:none; 
  border-bottom:1px solid #fff; 
  cursor:default;
  overflow: hidden; /* going to hide the extra pixels thats going to overflow from 
                       the a - a being 30 px but image being much larger
                    */
  }
#gallery li a img {
  width:320px; 
  border:0;
  margin:0; padding:0;
  }
#gallery li a:hover {
  background:#eee; 
  height:240px;
  }
#gallery li a:hover img {
  height:240px;
  }
/*end of sliding doors */





/* sliding doors vertical */
#galleryh {
  padding:0;   margin:0; 
  list-style-type:none; 
  height:240px; 
  width:500px; 
  border:1px solid #888; 
  overflow: hidden;
}

#galleryh li {
  float:left;
}

#galleryh li a {
  float: left;
  width:30px;
  height: 240px;
  text-decoration:none; 
  cursor:default;
  /* without the overflow statement the image will reach its
     full 320px instead of 30px because it will overflow
     overflow: hidden;
  */
}

#galleryh li a:hover {
  width: 320px;
}

#galleryh li a img {
  border:0; margin:0; padding:0;
}

/*end of sliding doors */



/* sliding doors vertical */
#gallerydiv {
  padding:0;   margin:0; 
  list-style-type:none; 
  height:240px; 
  width:500px; 
  border:1px solid #888; 
  overflow: hidden;
}

#gallerydiv a {
  float: left;
  width:30px;
  height: 240px;
  text-decoration:none; 
  cursor:default;
}

#gallerydiv a:hover {
  width: 320px;
}

#gallerydiv a img {
  border:0; margin:0; padding:0;
}


/* new gallery */
/* sliding doors vertical */
#gallerydivn {
  padding:0;   margin:0; 
  list-style-type:none; 
  height:267px; 
  width:520px; 
  border:1px solid #888; 
  overflow: hidden;
}

#gallerydivn a {
  float: left;
  width:40px;
  height: 267px;
  text-decoration:none; 
  cursor:default;
}

#gallerydivn a:hover {
  width: 400px;
}

#gallerydivn a img {
  border:0; margin:0; padding:0;
}



/* negative positioning */
ul.rainbow {
    margin: 20px;
    list-style-type: none;
 }

ul.rainbow li {
     border: 1px solid black;
     width: 28px;
     height: 200px;
     float: left;
     margin-right: 10px;

     color: white;
     font-weight: bold;
}

.rainbow li.bar1 {
      background: url(http://pics.cssbakery.com/pics/rainbow.jpg) 0 bottom no-repeat; 
}

.rainbow li.bar2 {
      background: url(http://pics.cssbakery.com/pics/rainbow.jpg) -28px bottom no-repeat; 
}
.rainbow li.bar3 {
      background: url(http://pics.cssbakery.com/pics/rainbow.jpg) -56px bottom no-repeat; 
}
.rainbow li.bar4 {
      background: url(http://pics.cssbakery.com/pics/rainbow.jpg) -84px bottom no-repeat; 
}
/* end of negative pos */

.sidebar-thumbnail { margin-top: 15px; margin-bottom: 5px;}


    /* css bar graph */
    .bargraph {   
          /* 253 -229 = 24 */                 
          height: 229px; 
          position: relative; 
          /* barstripdarkest */
        background: 
           url(http://pics.cssbakery.com/pics/papergrid.jpg) repeat-x; 
        border-left: 1px solid #d4d4d4;
        margin: 15px auto 50px;
    }

    .bargraph ul.bars {
        margin: 0; 
        padding: 0; 
        /* getting rid of bullets */
        list-style-type: none;
    }

    .bargraph ul.olympic-watermark {
        background: url(http://pics.cssbakery.com/pics/orings.png) no-repeat;
        background-position: 50% 50%;
        height: 122px; /* IE fix */
        z-index: 98; /*not working*/
    }

    .bargraph ul.euro-watermark {
        background: url(http://pics.cssbakery.com/pics/sapphire5.png) no-repeat;
        height: 201px; /* IE fix was 164*/
        background-position: 0 0;
    }
   
    .bargraph ul.stars-watermark {
        background: url(http://pics.cssbakery.com/pics/starcoinX.png) no-repeat;
        background-position: 50% 50%;
        height: 174px; /* IE fix */
    }

    div.bargraph div.colorfilter {
        position: absolute;
        top: 0; left: 0;
        height: 201px;
        background-color: black;
        opacity:0.2;  filter:alpha(opacity=20);
        z-index: 97;
    
    }

    div.bargraph div.colorfilter2 {
        position: absolute;
        top: 0; left: 0;
        height: 201px;
        background-color: black;
        opacity:0.4;  filter:alpha(opacity=40);
        z-index: 97;
    
    }

    .bargraph ul.bars li {  
        position: absolute; 
        width: 30px; 
        height: 200px; 
        /*move it up from bottom label*/
        bottom: 29px; 
        padding: 0; 
        margin: 0; 
        background: url(http://pics.cssbakery.com/pics/bars200.jpg) 
                    no-repeat;
        text-align: center; 
        font-weight: bold; 
        color: white; 
        line-height: 2.5em;
        font-size: 13px; /*my tinkering*/
        z-index: 99;
    }

   
    .bargraph ul.bars li span {
        position: relative;
        top: -25px;
        color: #7c7c7c;
     }
    .bargraph ul.bars li img {        
           margin: 0; padding: 0;
           position: relative;
           top: -71px;
           left: 0;
    }

    .bargraph ul.bars li span.darkpen {
        color: #515151;
        position: static;
    }
    .bargraph ul.bars li span.whitepen {
        color: red;
    }

    .bargraph ul.bars li.bar1 { left: 21px;  }
    .bargraph ul.bars li.bar2 { left: 94px;  }
    .bargraph ul.bars li.bar3 { left: 167px; }
    .bargraph ul.bars li.bar4 { left: 240px; }
    .bargraph ul.bars li.bar5 { left: 313px; }
    .bargraph ul.bars li.bar6 { left: 386px; }
    .bargraph ul.bars li.bar7 { left: 459px; }
    .bargraph ul.bars li.bar8 { left: 532px; }
    .bargraph ul.bars li.bar9 { left: 605px; }

    /* bottom means 100% in background-position */
    .bargraph ul.bars li.bluebar  { background-position: 0px bottom; }
    .bargraph ul.bars li.redbar   { background-position: -30px bottom; }
    .bargraph ul.bars li.greenbar { background-position: -60px bottom; }
    .bargraph ul.bars li.orangebar  {  background-position: -90px bottom; }
    .bargraph ul.bars li.grapebar   {  background-position: -120px bottom; }
    .bargraph ul.bars li.purplebar  {  background-position: -150px bottom; }
    .bargraph ul.bars li.crimsonbar {  background-position: -180px bottom; }
    .bargraph ul.bars li.navybar    {  background-position: -210px bottom; }
    .bargraph ul.bars li.goldbar    {  background-position: -240px bottom; }
    .bargraph ul.bars li.tealbar    {  background-position: -270px bottom; }

    .label { list-style-type: none; 
             position: absolute; bottom: 3px; 
             margin: 0; padding: 0; }
    .label li { 
        color: white; 
        text-transform: uppercase; 
        letter-spacing: 0.1em;
        font-size: 11px;
        width: 73px;
       
        float: left;
        text-align: center;
       /*safeguard against a label that is too long - if they type
          that in from the HTML
        */
        overflow: hidden;
    }


    ul.y-axis { list-style-type: none; position: absolute; 
                /*
                  positioning the ul box - the box that goes 
                  around the list, 100, 75,... */
                  /* -26px works fine for 100 changing it */
                  left: -45px; /* -36 */
                  width: 40px;
                  text-align: right;
                  bottom: 0;
                  margin: 0; padding: 0; 
    }

    ul.y-axis li:first-child {
         height: 40px;
         line-height: 40px;
    }

    ul.y-axis li { 
        color: #aba8a8;  
        font-size: 12px;
        height: 51px;
        line-height: 51px;
        text-align: right;
    }

    ul.y-axis li.units {
        position: absolute;
        bottom: 110px;
        right: 20px;
        line-height: 1.2em;
        height: auto;
    }
  /*labeling of the graph*/
  .bargraph  p { 
                position: absolute; 
                left: 0; 
                /* 260 - 24 */
                top: 236px; 
                
                padding: 0; 
                margin:0; 
                text-align: left; 
     
                width: 100%;
                font-family: Verdana, sans-serif;
                font-size: 10px; color: black;
                line-height: 1.3em;
                
              }
   .bargraph p.centered { text-align: center; }

   /* end of css bar graph */


 .horizontalgraph {                    
    width: 253px; 
    position: relative; 
    background: url(http://pics.cssbakery.com/pics/bluegraph.jpg) repeat-y; 
    border-bottom: 1px solid #c0c0c0;

    margin: 25px auto;
  }

  .horizontalgraph ul.bars {
        margin: 0; 
        padding: 0; 
        /* getting rid of bullets */
        list-style-type: none;
   
  }
  .horizontalgraph ul.bars li {  
        position: absolute; 
        left: 1px;
        height: 21px; 
        padding: 0; margin: 0; 
        background: url(http://pics.cssbakery.com/pics/pinkbar2.jpg) 
                    no-repeat;

        border-right: 2px solid black;
        padding-right: 3px;

        text-align: right;
        font-size: 12px;
        letter-spacing: 0.1em;
        font-weight: 800; 
        color: white; 
    }

    .horizontalgraph ul.bars li.blue {  
        background: url(http://pics.cssbakery.com/pics/bluebar.jpg) 
                    no-repeat;
    }

    .horizontalgraph ul.bars li span {
        color: black;
    }

    .horizontalgraph ul.bars li span.outside {
        position: relative;
        right: -30px;
        color: black;
        letter-spacing: normal;

        display: block;
        position: absolute;
        right: -42px;
        text-align: left;
        width: 3em;

    }

    /* bottom means 100% in background-position */
    /* add 44 pixels for the next bar */
    .horizontalgraph ul.bars li.bar1 { top: 11px; }
    .horizontalgraph ul.bars li.bar2 { top: 55px; }
    .horizontalgraph ul.bars li.bar3 { top: 99px; }
    .horizontalgraph ul.bars li.bar4 { top: 143px; }
    .horizontalgraph ul.bars li.bar5 { top: 187px; }
    .horizontalgraph ul.bars li.bar6 { top: 231px; }
    .horizontalgraph ul.bars li.bar7 { top: 275px; }
    .horizontalgraph ul.bars li.bar8 { top: 319px; }
   
    
    .horizontalgraph ul.ylabel {
       padding: 0; margin: 0;
       list-style-type: none;
       position: absolute;
       width: 100px;
       left: -107px;
       bottom: 0;
       text-align: right;
    }
    .horizontalgraph ul.ylabel li { height: 44px; line-height:44px; 
                                    text-transform: uppercase; font-size: 11px;
                                    letter-spacing: 0.1em; }

    .horizontalgraph p { position: absolute; left: 0; top: 100%;
                         margin: 8px 0 0 0; padding:0; 
                         text-align: left; 
                         width: 100%;
                         font-family: Verdana, sans-serif;
                         font-size: 10px; color: black;
                         line-height: 1.3em;
                          
                       }

/* end of horizontal graph */






.swatch {   
   height: 150px;
   width: 500px;
   background: url(http://pics.cssbakery.com/pics/color-swatch-3.gif) no-repeat 0 0;
   margin:30px;
}
div.swatch img { margin:0; padding: 0; }

.swatch2 {   
   height: 150px;
   width: 500px;
   background: url(http://pics.cssbakery.com/pics/wheel.jpg) no-repeat 0 0;
   margin:30px;
}
div.swatch2 img { margin:0; padding: 0; }



/*social links */
a.digg, a.bloglines, a.stumbleupon, a.magnolia, a.rss, a.delicious,
a.twitter, a.facebook, a.buzz, a.technorati {
         display:block;
         height:13px;
         width:13px;
         margin-right:3px;
         overflow:hidden;
}

a.delicious {
background:transparent url(http://pics.cssbakery.com/pics/social_delicious.gif) no-repeat scroll 0 0;
}

a.bloglines {
background:transparent url(http://pics.cssbakery.com/pics/social_bloglines.gif) no-repeat scroll 0 0;
}

a.stumbleupon {
background:transparent url(http://pics.cssbakery.com/pics/social_stumbleupon.gif) no-repeat scroll 0 0;
}

a.twitter {
background:transparent url(http://pics.cssbakery.com/pics/social_twitter.jpg) no-repeat scroll 0 0;
}

a.magnolia {
background:transparent url(http://pics.cssbakery.com/pics/social_magnolia.gif) no-repeat scroll 0 0;
}

a.digg {
background:transparent url(http://pics.cssbakery.com/pics/social_digg.gif) no-repeat scroll 0 0;
}

a.rss {
background:transparent url(http://pics.cssbakery.com/pics/social_rss.gif) no-repeat scroll 0 0;
}

a.facebook {
background:transparent url(http://pics.cssbakery.com/pics/social_facebook.jpg) no-repeat scroll 0 0;
}

a.technorati {
background:transparent url(http://pics.cssbakery.com/pics/social_technorati.jpg) no-repeat scroll 0 0;
}

a.buzz {
background:transparent url(http://pics.cssbakery.com/pics/social_buzz.jpg) no-repeat scroll 0 0;
}

.social {
  margin: 18px 0 0 0;
  padding: 0;
}

.alignleft { float: right; }



/*
 #photobox {
      float:left;
      margin: 12px 18px 18px 0;
      width:292px;
      
  }
  #photobox img { margin: 0; padding: 0; display: block; }
  .photobox-footer img { display: block; }

  .captionbox p {
     font-family :arial,sans-serif;
     font-size:	10px;
     font-weight:	400;
     font-style:        normal;
     color:	#666666;
     letter-spacing:	normal;
     word-spacing:	normal;
     line-height:	13px;
     text-align: left;
     vertical-align:	baseline;
     direction:	ltr;
  
  }
   .captionbox { width: 290px; margin:0; padding: 0; border-right: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf;}

   .captionbox p {
     margin: 0;    padding: 4px; padding-left: 8px; padding-right: 6px;
   }
   .photobox-footer { margin: 0; padding: 0; }
*/




.w3logo { 
          text-align: right;
          padding-right: 10px;
        }
#left-sidebar-wrapper div.w3logo { margin: 10px 0 0 0; }


.w3logo img 
        { margin-top: 2px;  }


#photobox {
    float:left;
    margin: 12px 18px 18px 0;
    width:292px;
}
#photobox img { margin: 0; padding: 0; display: block; }
.photobox-footer img { display: block; }

.captionbox p {
    font-family :arial,sans-serif;
    font-size:	10px;
    font-weight: 400;
    font-style:  normal;
    color:  #666666;
    line-height: 13px;
    text-align: left;
    vertical-align: baseline;
}
.captionbox { 
    width: 290px; margin:0; padding: 0; 
    border-right: 1px solid #dfdfdf; 
    border-left: 1px solid #dfdfdf;
}
.captionbox p {
    margin: 0; padding: 4px; 
    padding-left: 8px; padding-right: 6px;
}
.captionfooter { 
 margin: 0; padding: 0; 
 height: 6px; width: 292px;
 background: url(http://pics.cssbakery.com/pics/bottomcurve.jpg) top left no-repeat;
}




/* draw a rectangular bottom - no curves 
#photobox2 {
    float:left;
    margin: 12px 18px 18px 0;
    width:292px;
}
#photobox2 img { margin: 0; padding: 0; display: block; }
*/
.captionboxR p {
    font-family :arial,sans-serif;
    font-size:	10px;
    font-weight: 400;
    font-style:  normal;
    color:  #666666;
    line-height: 13px;
    text-align: left;
    vertical-align: baseline;
}
.captionboxR { 
    width: 290px; margin: 0; padding: 0; 
    border-right: 1px solid #dbdbdb; 
    border-left: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}
.captionboxR p {
    margin: 0; padding-top: 6px; padding-bottom: 8px;
    padding-left: 8px; padding-right: 6px;
}
/* end of draw a rectangular caption box */



/* trying the corner will delete this later */
 #photobox2 {
      float:left;
      margin: 6px 18px 18px 0;
      width:292px;
  }

  #photobox2 img { margin: 0; padding: 0; display: block; }

  .captionbox2 p {
     font-family :arial,sans-serif;
     font-size:	10px;
     font-weight:	400;
     font-style:        normal;
     color:	#666666;
     letter-spacing:	normal;
     word-spacing:	normal;
     line-height:	13px;
     text-align: left;
     vertical-align:	baseline;
     direction:	ltr;
  
  }
    /*subtracted 2 pixels from width because of the two borders on 
      each side of the captionbox*/
   .captionbox2 {   
           width: 290px; 
           margin:0; padding: 0; 
    }
   .frame-with-rounded-bottom-corners  {
         position: relative;
         border-right: 1px solid #dfdfdf; 
         border-left: 1px solid #dfdfdf;
         border-bottom: 1px solid #dfdfdf;
   }

   .captionbox2 p {
        margin: 0;    
        padding: 6px 6px 8px 8px;

   }

 .photobox-footer2 { margin: 0; padding: 0; }
 .photobox-footer2 img { display: block; }
 
 .leftedge, .rightedge {
       width: 4px; height: 6px;
       position: absolute;
       bottom: -1px;
  }
  .leftedge { 
       left: -1px; 
       background: url(http://pics.cssbakery.com/pics/lc.gif) 0 0 no-repeat; }
  .rightedge { 
       right: -1px; 
       background: url(http://pics.cssbakery.com/pics/rc.gif)  0 0 no-repeat; }


/* end of delete section */



  /*MSX Fix for removing the Blogger search from the top*/
  #navbar { display: none; } 

  /*to put space between the search box and categories */
  .navdiv { margin-bottom: 17px; }


  .hilite {
      /* a yellow highlighter */
      background-color: #f9fd8d;
     
  }

  .hilite_blue {
      background-color: #dde8ea;
  }

#left-sidebar-wrapper div { margin-top: 30px; }

#amazon { text-align: center; }
#amazon_sidebar { float: right; margin-right: 15px;}

.tags-css li, .tags-css2 li {  
    /*background-color: #e3eef0;*/

    display: inline;
    font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
/*new stuff added*/
font-size: 12px;
letter-spacing: normal;
line-height: 21px;
vertical-align: baseline;
font-weight:  400;
font-style  :  normal;
color : #999999;
    /* font-size: 11px;
       line-height: 1.9em;
    */


}





.tags-section h4 { margin-left: 10px; }

.tags li {
    background-color: #e3eef0;
    display: inline;
    margin-right: 0px;
    line-height: 1.9em;
    font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
}

        ul.tags { 
               list-style-type: none; padding: 0; 
               /*position: relative; left: -15px;*/
               padding-right: 15px;
               padding-left: 10px;
               margin: 0; 
               text-align: justify;
        }

        ul.tags-css { 
               list-style-type: none; padding: 0; 
               padding-right: 15px;
               padding-left: 10px;
               margin: 0; 
               text-align: justify;
        }
        ul.tags-css2 { 
               list-style-type: none; padding: 0; 
               padding-right: 15px;
               padding-left: 10px;
               margin: 0; 
               text-align: right;
        }

.tags-css li a:link, .tags-css2 li a:link, .tags li a:link {
    color:#999999;
 }
        .tags li a:hover, .tags-css li a:hover, .tags-css2 li a:hover {
              color:black;
              text-decoration:none;
              background-color: pink;
        }             

        .tags-css li a:visited, .tags-css2 li a:visited { 
              /*color: #afb62f; */
              color: #999999;
        }

/* recently */

#previously { text-align: center; }

#main-wrapper #previously h4 {
  background-color:#FFFFFF;
  border-bottom:1px dotted #CCCCCC;
  color:#666666;
  font-family:Georgia,Times,Times New Roman,serif;

  font-size:1.2em;
  font-weight:normal;
  height:24px;
  letter-spacing:0.1em;
  line-height:1em;
  margin: 0;
  margin-bottom:1em;
  margin-top: .5em;

  padding-left: 10px;
  /*padding-top:5px;*/
  text-transform:uppercase;
  /*equal to the width of main-wrapper div */
  width:584px;

}

#links .left  { float: left; margin: 0; padding: 0;}
#links .right { float: left; margin: 0; padding: 0; margin-left: 60px;}

#links li a {
   font-family	: Arial,Helvetica,Verdana,sans-serif;
   font-size	: 12.3167px;
   font-weight	: 400;
   color	:#4B4B4B;
   line-height	:19.7px;
   text-decoration: underline;
}

#links ul { margin: 0; padding: 0; }

#links li {
    list-style-type:none;
    margin-left:0;
    margin-top:0;
    padding-left:0;
    color	:#4B4B4B;
}

#links ul {
    padding: 0; margin: 0;
    padding-top: 10px;
    padding-bottom: 20px;
}

#links {
    padding: 0 0 20px 0;
    height: 120px;
    border-bottom: 1px dotted #CCCCCC;
    margin: 0 0 2px 31px;
    text-align: left;
}

#thumbnails {
   margin-bottom:10px;
   margin-top:10px;
}

#thumbnails img {
   padding-right: 2px;
 
}
/* end of mock recently */





/* PUPPY CSS */
/* Puppy with transparent bar caption */
 .contain_image { 
       width: 395px; 
       height: 484px;
       margin: 0; padding: 0;
       font: .75em/1.75em Verdana, sans-serif;
       position: relative;
  }

  .post img.captioned {
       margin:0; padding: 0;
  }

  .contain_image p {
       margin: 0; padding: 0;
       background: url(http://pics.cssbakery.com/pics/whitedot51.png) bottom left;
       position: absolute;
       bottom: 0;
       left: 0;
       padding: 10px;
       padding-bottom: 14px;
       color: #444343;
     
  }


  /* Puppy with transparent bar caption BLACK
       width: 395px; 
       height: 484px;
   */
  .image_wrapper_siyah { 
       width: 395px; 
       height: 484px;
       margin: 0; padding: 0;
       font: .75em/1.75em Verdana, sans-serif;
       position: relative;

      
  }
  .image_wrapper_siyah p {
       margin: 0; padding: 0;
       background: url(http://pics.cssbakery.com/pics/semiblack.png);
       position: absolute;
       bottom: 0;
       left: 0;
       padding: 10px;
       padding-bottom: 14px;
       color: white;
    
  }



 /* Puppy with transparent bar caption ALL CSS*/
  .image_wrapper_mavi { 
       width: 395px; 
       height: 484px;
       margin: 0; padding: 0;
       font: .75em/1.75em Verdana, sans-serif;
       position: relative;
  }
  .transbox {
       margin: 0; padding: 0px;
       background-color: #5396fa;
       opacity:0.6;
       filter:alpha(opacity=60);
       position: absolute;
       bottom: 0; left: 0;
       width: 100%;
       height: 5em;
     
  }
  .image_wrapper_mavi p {
       margin: 0; padding: 10px;
       color: white;
       position: absolute;
       bottom: 0; left: 0;
  }


/* Puppy with transparent bar caption ALL CSS for rounded corner puppy*/
  .image_wrapper_white { 
       width: 376px; 
       height: 484px;
       margin: 0; padding: 0;
       font: .75em/1.75em Verdana, sans-serif;
       position: relative;
  }
  .transbox_white {
       margin: 0; padding: 0px;
       background-color: white;
       opacity:0.4;
       filter:alpha(opacity=40);
       position: absolute;
       bottom: 0; left: 0;
       width: 100%;
       height: 5em;
     
  }
  .image_wrapper_white p {
       margin: 0; padding: 10px;
       color: white;
       position: absolute;
       bottom: 0; left: 0;
  }



/*
  .ribbon-divider { background: url(http://pics.cssbakery.com/pics/ribbon.jpg); 
                    height: 24px; width: 79px; margin-top: 5px;
                    margin-bottom: 5px; margin-left: 218px;}
*/
  .divider { 
       background: url(http://pics.cssbakery.com/pics/bow1s.jpg) 50% 0 no-repeat; 
       opacity:0.9;
       filter:alpha(opacity=90);
       height: 14px; width: 100%; 
       margin-top: 15px;
       margin-bottom: 15px; 
       clear: both;
       padding: 0;
   }
   .divider2 { 
       background: url(http://pics.cssbakery.com/pics/ribbon.jpg) 50% 0 no-repeat; 
       height: 24px; width: 100%; 
       margin-top: 5px;
       margin-bottom: 5px; 
   }

   hr {   
       background: url(http://pics.cssbakery.com/pics/ribbon.jpg) 50% 0 no-repeat; 
       height: 24px; width: 100%; 
       margin-top: 5px;
       margin-bottom: 5px; 
       border: none;
   }



/* same puppy image with double frame 

  .contain_image { 
      width: 395px; margin: 0 0 2px 0;
      font: .75em/1.75em Verdana, sans-serif;
  }

  .captioned {
      padding: 5px;
      border: 3px double #ccc;
      background-color: #fff;
      margin: 0;  
   }
   descendant selector for p
   .contain_image p { margin: 0; padding: 0;}

*/





/*

  .post img.captioned {
       margin:0; padding: 0;
       border: 3px double #ccc;
       background-color: #fff;
   }
   .contain_image p { 
       margin: 0; padding: 0; 
       background: url(http://pics.cssbakery.com/pics/wamu.png) bottom left repeat-x;
       position: absolute;
       bottom: 2.25em;
       left: 1.375em;
   }
*/

   /*any input in navdiv will have the layoutlinks kinda font*/
   /*any input class that comes under a navdiv parent class*/

   .navdiv input {
         color: #999999; 
         font-size: 12px; 
         font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
         font-weight: bold;
    }

   /* .layoutlinks input { */

   .sbutton { margin-top: 5px; 

              /*in order to move the button around first declare position as 
                relative meaning to move the origin(0,0) to its present
                position in the normal flow and move it from there
              */
              position: relative; 
              /* this will move the button down by 4 pixels and shift it to the
                 right by 1 pixels*/
              top:4px; 
              left: 1px;
   }
   .sbox { margin-top: 2px; }

   /*change the default border color for input element to a light blue*/
   input.sbox { border: 1px solid  #b4d1dc; }
   input.spbox { border: 1px solid #cec1c7; }

   .n2 { 
         background:  url('http://pics.cssbakery.com/pics/btop.jpg') no-repeat 0 0; 
         text-align: left;
         margin-bottom: 10px;
   }
   .ng2 { 
         background:  url('http://pics.cssbakery.com/pics/pbtop.jpg') no-repeat 0 0; 
         text-align: center;
         margin-bottom: 10px;
   }
   /*inner div, this is inside n2 */
   .n1 { 
         background:url('http://pics.cssbakery.com/pics/bcurve.jpg') no-repeat 0 100%;         
         height: 32px;
         padding-top: 2px;
         padding-bottom: 4px;
         /*to push the input field and center it in the blue search area*/
         padding-left: 10px;
         
    }
    /* IE FIX for search boxes */
    .n1 #searchthis, .ng2 #cse-search-box {
        vertical-align: middle;
    }
   
    .ng { 
         background:url('http://pics.cssbakery.com/pics/pbcurve.jpg') no-repeat 0 100%;     
         /*    
         height: 37px;
         padding-top: 6px;
         padding-bottom: 4px;
         */
         height: 32px;
         padding-top: 2px;
         padding-bottom: 4px;
         padding-left: 1px;
    }
 
   .vcounter { padding-left: 25px; }

   .cse-branding-bottom  .cse-branding-text { 
       padding-top: 0;            
       padding-left: 10px; 
       line-height: 1em;
       color: #a28f99;
    }
    .cse-branding-bottom .cse-branding-text {
       display: block; 
       float: right;
       margin-right: 32px;
    }

   .categories_div {
       margin-top: 8px;
   }

   .categories_div li div {
       height: 60px;
       width: 50px;
       background: url('http://pics.cssbakery.com/pics/sidebaricons.jpg') no-repeat;
       display: block;
       float: left;
       margin-right: 5px;
       padding-bottom: 5px;
    }

    div#cat2 { background-position: 0px -85px; }
    div#cat3 { background-position: 0px -170px; }
    div#cat4 { background-position: 0px -255px; }
    div#cat5 { background-position: 0px -340px; }
    div#cat6 { background-position: 0px -425px; }
    div#cat7 { background-position: 0px -510px; }
    div#cat8 { background-position: 0px -595px; }
    div#cat9 { background-position: 0px -680px; }
    div#cat10 { background-position: 0px -765px; }
    div#cat11 { background-position: 0px -850px; }
    div#cat12 { background-position: 0px -935px; }
    div#cat13 { background-position: 0px -1020px; }
    div#cat14 { background-position: 0px -1105px; }
    div#cat15 { background-position: 0px -1190px; }
    div#cat16 { background-position: 0px -1275px; }
    div#cat17 { background-position: 0px -1360px; }
    div#cat18 { background-position: 0px -1445px; }
    div#cat19 { background-position: 0px -1530px; } 
    div#cat20 { background-position: 0px -1615px; } 

   /* .techno-div { border: 1px solid red; } */

   .layoutlinks .techno-div img {
       margin-bottom: 10px;
       float: none;      
    }

   #layoutlinks_right .cse-branding-form { 
      margin: 0; margin-bottom: 0;
   }
   .status-msg-wrap { display: none; }

   .labeldiv { margin-top:7px; 
               margin-bottom: 7px;
               padding-left: 25px;
             }

   .blog-pager { text-transform: uppercase; 
                 font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
                 font-size: x-small;
                 margin-top: 0;
                 line-height: 1.4em;
                 letter-spacing: 0.1em;}

   .blog-pager a:link { color: #999999; }

   .blog-feeds, .feed-links {    
                    font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
                    font-size: 78%;      
                    color: #666666;    
                    text-transform: uppercase;
                    line-height: 1.4em;
                    letter-spacing: 0.1em;
               }
   /* MS 
   .blog-pager {
        display: inline;

   }
   */
   .feed-links { text-align: right; }