/*------------------------------------------------------------------
TABLE OF CONTENTS
.................
1. GENERAL
2. LAYOUT
3. NAVIGATION
4. HEADER
5. VIEW SWITCHER
6. BLOGGERS
7. CLEARFIX
8. jTIP
------------------------------------------------------------------*/


/*------------------------------------------------------------------
1. GENERAL
------------------------------------------------------------------*/
*
{
 margin             : 0;
 padding            : 0;
}

body
{
 background         : #e5e5e5 url(../images/layout/bg_main.gif) repeat-x top left;
 color              : #333;
 font-family        : Arial, Tahoma, Sans-serif;
 font-size          : 62.5%;
 line-height        : 1.4;
 text-align         : center;
}

div#background
{
 background         : url(../images/layout/bg_content.gif) no-repeat top center;
}

img
{
 border             : 0;
 display            : block;
}

p,
li
{
 padding            : 5px 0;
}

li
{
 list-style-type    : none;
}

a
{
 color              : #333;
 cursor             : pointer;
 font-weight        : 700;
 text-decoration    : none;
}

ul.navigation li a:hover
{
 color              : #727272;
}

.hidden
{
 display            : none;
}

.invisible
{
 visibility         : hidden;
}

.draggable
{
 cursor             : move;
}

.clear
{
 clear              : both;
}

/*------------------------------------------------------------------
2. LAYOUT
------------------------------------------------------------------*/
div#header,
div#content,
div#footer
{
 clear              : both;
 font-size          : 1.2em;
 margin             : 0px auto;
 text-align         : left;
 width              : 995px;
}

div#header
{
 margin-top         : 25px;
}

div#bloggers_wrapper
{
 background         : #fff;
 padding            : 10px 0;
 text-align         : left;
}

div#footer
{
 padding            : 20px 0;
}


/*------------------------------------------------------------------
3. NAVIGATION
------------------------------------------------------------------*/
div#header ul.navigation
{
 float              : right;
 margin-top         : 22px;
}

div#footer ul.navigation
{
 float              : left;
}

div#footer ul.navigation.legals
{
 float              : right;
}

ul.navigation li
{
 border-right       : 1px solid #333;
 float              : left;
 padding            : 0 10px;
}

ul.navigation li.first_child
{
 padding-left       : 0;
}

ul.navigation li.last_child
{
 border-right       : none;
 padding-right      : 0;
}


/*------------------------------------------------------------------
4. HEADER
------------------------------------------------------------------*/
div#header h1
{
 float              : left;
 width              : 460px;
}

div#header h1 a
{
 background         : url(../images/layout/logo.png) no-repeat top left;
 display            : block;
 height             : 44px;
 overflow           : hidden;
 text-indent        : -5000px;
}

div#content dl.intro
{
 margin             : 10px 0;
}


/*------------------------------------------------------------------
5. VIEW SWITCHER
------------------------------------------------------------------*/
div.view_switcher
{
 float              : right;
 margin-top         : 20px;
 width              : 184px;
}

div.view_switcher div.t,
div.view_switcher div.b
{
 clear              : both;
 font-size          : 1%;
 height             : 5px;
 width              : 184px;
}
 
div.view_switcher div.t
{
 background         : url(../images/layout/bg_view_switcher_t.png) no-repeat top left;
}

div.view_switcher div.b
{
 background         : url(../images/layout/bg_view_switcher_b.png) no-repeat top left;
}

div.view_switcher div.c
{
 background-color   : #eee;
 padding            : 0 10px;
}

div.view_switcher ul
{
 margin             : 0 auto;
 width              : 110px;
}

div.view_switcher ul li
{
 float              : left;
}

div.view_switcher ul li.arranged a
{
 background         : url(../images/layout/bg_icon_arranged.png) no-repeat top left;
 display            : block;
 height             : 25px;
 overflow           : hidden;
 text-indent        : -5000px;
 width              : 55px;
}

div.view_switcher ul li.cloud a
{
 background         : url(../images/layout/bg_icon_cloud.png) no-repeat top left;
 display            : block;
 height             : 25px;
 overflow           : hidden;
 text-indent        : -5000px;
 width              : 55px;
}
div.view_switcher dl dt
{
 font-weight        : 700;
}


/*------------------------------------------------------------------
6. BLOGGERS
------------------------------------------------------------------*/
h2,
div#bloggers_wrapper h4,
div#content dl.intro dt
{
 font-size          : 1.8em;
 font-weight        : 400;
}

div#bloggers_wrapper h4
{
 margin             : 0 auto;
 padding-left       : 6px;
 width              : 989px;
}

div.bloggers_scroll_pane
{
 clear              : both;
 font-size          : 1.2em;
 margin             : 0px auto;
 width              : 995px;
}

.scroll_enable
{
 overflow           : scroll;
 overflow-y         : hidden;
}

.scroll_disable
{
 overflow           : hidden;
}

div.bloggers_scroll_link_wrapper
{
 clear              : both;
 margin             : 0 auto;
 width              : 995px; 
}

div#bloggers_wrapper div.bloggers_scroll_link_wrapper
{
 font-size          : 1.2em;
}

div.bloggers_scroll_link_wrapper *
{
 float:right;
}

button.bloggers_scroll
{
 border             : 0;
 cursor             : pointer;
 height             : 11px;
 margin             : 2px 6px;
 overflow           : hidden;
 text-indent        : -5000px;
 width              : 6px;
}

button.scroll_left
{
 background         : url(../images/layout/bg_bloggers_scroll_left.gif) no-repeat 0 0;
}

button.scroll_left:hover
{
 background         : url(../images/layout/bg_bloggers_scroll_left.gif) no-repeat 0 -11px;
}

button.scroll_right
{
 background         : url(../images/layout/bg_bloggers_scroll_right.gif) no-repeat 0 0;
}

button.scroll_right:hover
{
 background         : url(../images/layout/bg_bloggers_scroll_right.gif) no-repeat 0 -11px;
}

ul.bloggers
{
 clear              : both;
 margin             : 0 0 20px 0;
}

ul.bloggers li
{
 float              : left;
}

ul.bloggers li dl
{
 border-top         : 4px solid #8e8e8e;
 margin             : 0 7px;
 padding-top        : 8px;
 width              : 185px;
}

ul.bloggers li dl dt,
div.get_involved_spotlight div.c dl dt
{
 font-size          : 1.4em;
 font-weight        : 700;
}

dd.image
{
 float              : left;
 padding            : 3px 5px 0 0;
}


/*------------------------------------------------------------------
7. CLEARFIX
------------------------------------------------------------------*/
.clearfix:after
{
 clear              : both; 
 content            : "."; 
 display            : block; 
 height             : 0; 
 visibility         : hidden;
}

.clearfix
{
 display            : inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix
{
 height             : 1%;
}

.clearfix
{
 display            : block;
}
/* End hide from IE-mac */


/*------------------------------------------------------------------
8. jTIP
------------------------------------------------------------------*/
.JT_loader
{
 background         : url(../images/content/preloader.gif) no-repeat top center;
 height             : 22px;
 width              : 100%;
}

#JT 
{
 background-color   : #fff;
 border             : 2px solid #ccc;
 font-size          : 1.1em;
 position           : absolute;
 text-align         : left;
 z-index            : 16000;
}

#JT_close_left
{
 background-color   : #CCC;
 font-weight        : 700;
 padding            : 2px 10px;
}

#JT_arrow_left
{
 background         : url(../images/content/arrow_up.gif) no-repeat 0 0;
 height             : 11px;
 left               : 66px;
 position           : absolute;	
 top                : -12px;
 width              : 23px;
 z-index            : 16000;
}

#JT_copy
{
 padding            : 10px;
}