/* CSS Stylesheet Example for iBlogger */

/* 
==============================================================
To enable insanely great image styling (and other styling if you wish)
    on your blog for use with iBlogger:

1.  copy this file to your own web server
    (this file is a css stylesheet, you can have more than one) 

2. add the declaration to your HTML template for your blog, either
    near the other stylesheet declaration, or right above the closing </head> tag
    like this:
    <link href='//YOUR_WEB_SERVER.com/css/iblogger-styles.css' rel='stylesheet' type='text/css'/>
    NOTE:  Many hosted blog sites, like Google's Blogspot (aka Blogger) and many others, allow you to 
            customize your CSS. To do so, you may need to paste the CSS styles from this stylesheet,
            into the CSS style declaration at the top of the HTML template for your blog.  
            Each blog type may have a different user interface in their control panel or admin panel.  
            Consult your blog documentation for details.

To enable even more insanely great image styling on your blog for use with iBlogger:

3.  Install Lightbox (very, very easy)
    http://www.huddletogether.com/projects/lightbox2/
    Some blogs have a Lightbox plugin, which makes it even easier.

4.  Turn on the Lightbox feature in your iBlogger Preference Settings
==============================================================
/*

/* notes for me whilst developing this... /*
/* the css padding rule is top right bottom left */

/* The iblogger-post div forms a container around the entire body of the iBlogger post (aka "entry").  
   This allows you to address any tag which appears inside that div with 
   special CSS styles for iBlogger posts, if you like, using the right 
   CSS Selectors.

   You simply make a CSS class in your stylesheet, like this example below, 
   which would style all all the h1 tags in your iBlogger posts, but not the other
   h1 tags on your blog.  If you don't define them specifically, they 
   will default to the style in effect in the parent container.

   div.ibloger-post h1 {
   text-align: center;
   color: purple;
   }
   */
div.iblogger-post {
overflow:hidden;  /* this chops off any overhanging divs */
}

/* Images should have captions. */
/* iBlogger supports captions for pictures, and insanely great CSS styling 
    on those images, if you put these CSS styles in place.
To style an image (such as an iPhone picture), iBlogger will:
    - maike a div container for the image
    - style the div with three classes, 
        -- the figure class, 
        -- the float class, and 
        -- the scaling class.
            (The particular class names depend on what you want, such as a left or right float.)
            The HTML for the div (container or wrapper) looks like this: 
            <div class="iblogger-figure iblogger-left iblogger-third"> </div>   
    - wrap the img tag in an a (anchor) tag, which contains a URL to the full sized image
    - add the the attribute:  rel="lightbox", to the a tag, if you have opted to use Lightbox (see iBlogger Preference Pane)
        */

/* iBlogger image div and related styles for pictures with captions. */
div.iblogger-figure {
/* clear:both; */
padding: 10px; 
margin: 0.67em auto; /* needed to support centering of almost-full-width figures */
border: thin solid silver;  /* border type options are:  none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset */
}

/* style the img tag when it's in an iBlogger figure div */
div.iblogger-figure img { 
width: 100%; 
padding:0; 
border-width: thin;
border-style: solid;
border-color: black;
}

/* style the p tag when it's in an iBlogger figure image div */
div.iblogger-figure p { /* the default "legend" style, as opposed to "caption" */
font-family: verdana, arial, sans-serif;
font-size: 70%;
color: gray;
padding-left: 1%;
padding-right: 1%;
line-height: 1.1;
margin: 0.25em auto 0 auto;
}
div.iblogger-figure p.iblogger-caption { 
text-align: center; 
font-style: italic;
}
/* "caption" for short phrases; "legend" (default) is for continuous prose */

.iblogger-full { width: 90%; padding: 10px; margin: 0.67em auto; }
/* "full" should be unnecessary, but this responds to the box model bugs in IE */
.iblogger-threequaters { width: 75%; padding: 10px; margin: 0.5em 0.67em; }
.iblogger-thowthirds { width: 66%; padding: 10px; margin: 0.5em 0.67em; }
.iblogger-half { width: 50%; padding: 10px; margin: 0.5em 0.67em; }
.iblogger-third { width: 33%; padding: 10px; margin: 0.5em 0.67em; }
.iblogger-quarter { width: 25%; border: none; padding: 5px; margin: 0.25em 0.5em; }
.iblogger-fifth { width: 20%; border: none; padding: 5px; margin: 0.25em 1%; }

/* iBlogger float classes */
div.iblogger-right { float: right; margin-left: 2%; }
div.iblogger-left { float: left; margin-right: 2% }
div.iblogger-center { clear: both; text-align: center; }

div.iblogger-caption { 
    font-size: 70%; 
    color: gray;
    padding-bottom: 1.25em;
    text-align: center; }

/* end iblogger-figure divs */

/* container for default iblogger-location div */
div.iblogger-location-wrapper {
}

/* container for location using geomashup plugin div */
/* to enable this, you need an javascript plugin to modify the HTML, which by default has an inline style to display:none */
div.iblogger-geomashup {
display: block;
}

/* container for signature-footer div */
div.iblogger-footer {
text-align:right;
font-size:0.6em;
color:#808080;
}

/*
The following prevent linked images from getting ugly default borders
in Mozilla-based and IE-based browsers
*/
a img,img[usemap] {
margin:0;
padding:0;
border:0 none transparent!important;
background:fff;
}