/**
* stylesheet.main.css
* Clubbyclub main stylesheet
*
* Works with: FF, IE6, IE7, Safari, Opera
*
* SOME RULES IF YOU EDIT THIS STYLESHEET:
* #1		Try to keep it working for FF, IE6, IE7, Safari and Opera
* #2		Try to use as less CSS hacks as possible! If you need to apply hacks, first try other ways of styling! The need to apply a lot of hacks is mostly caused by bad styling!
* #3		Do not mix id's and classnames! id's should be unique names to elements, classnames to style!
* #4		Keep things tidy
* #5		Give the sheet a logical order
* #6		Do not change the standard properties of items! (Like giving all divs a display : inline :S)
*/

/* MAIN / STANDARD ELEMENTS */
body
{
    padding					: 0px;
    margin					: 0px;
    margin-bottom			: 13px;

    background-color		: #4ABADF;

    font-family				: Arial, Helvetica, sans-serif;
    font-size 				: 12px;
    color					: #000000;
}

img
{
    border					: none;
}

h1
{
    font-size				: 20px;
    display					: inline;
}

h2
{
    display					: inline;

    font-size				: 16px;
}

h3
{
    display					: inline;
    margin-top 				: 0px;
    font-size				: 12px;
    _margin-bottom			: 4px;
}

*:first-child+html h3
{
    margin-bottom			: 4px;
}

h4
{
    font-size				: 20px;
    margin-left				: auto;
    margin-right			: auto;
    margin-bottom			: 5px;
}

h5
{
    font-size				: 15px;
    display					: inline;
}

hr
{
    color					: #CCCCCC;
    background-color		: #CCCCCC;
    height					: 1px;
    border					: 0px;
}

hr.full
{
    width					: 768px;
    margin-left				: -20px;
    _margin-right			: -20px;

    color					: #93C0EE;
    background-color		: #93C0EE;
}

a
{
    font-weight				: bold;
    text-decoration			: none;

    color					: #42ABCE;
}

a:hover
{
    color					: #FF9900;
}

a img
{
    vertical-align			: middle;
}

p.center
{
    text-align				: center;
}

th
{
    text-align				: left;
}

/* FORMS */
input
{
    border					: 1px solid #E0DFDF;
}

select
{
    border					: 1px solid #E0DFDF;
}

span.inputTextBlueBg
{
    display                 : block;
    float                   : left;
    background-color		: #93C0EE;
    background-image		: url('../graphics/forms/input_text-bluebg.gif');
    background-repeat		: no-repeat;
    background-position     : top left;
    height                  : 20px;
    padding                 : 0px;
    margin                  : 0px;
}

span.inputTextBlueBg input
{
    width					: 132px;
    height					: 20px;

    padding-left			: 4px;
    padding-right			: 4px;
    background				: transparent;
    border                  : none;
}

input.textMedium
{
    width					: 196px;
    height					: 21px;
    line-height				: 21px;

    padding-top				: 3px;
    padding-left			: 3px;
    padding-right			: 3px;

    margin-top				: 2px;

    background				: transparent;
    background-image		: url('../graphics/forms/input_text_medium.gif');
    background-repeat		: no-repeat;

    border					: none;

    _background-attachment	: fixed;
    _padding-top			: 0px;
}

*:first-child+html input.textMedium
{
    background: url('../graphics/forms/input_text_medium.gif') no-repeat 100% 100%;
}

input.textMediumBlueBG
{
    width					: 196px;
    height					: 21px;
    line-height				: 21px;

    padding-top				: 3px;
    padding-left			: 3px;
    padding-right			: 3px;

    margin-top				: 2px;

    background				: transparent;
    background-image		: url('../graphics/forms/input_text_medium-bluebg.gif');
    background-repeat		: no-repeat;

    border					: none;

    _background-attachment	: fixed;
    _padding-top			: 0px;
}

*:first-child+html input.textMediumBlueBG
{
    background: url('../graphics/forms/input_text_medium-bluebg.gif') no-repeat 100% 100%;
}

input.textLarge
{
    width					: 372px;
    height					: 21px;
    line-height				: 21px;

    padding-top				: 3px;
    padding-left			: 3px;
    padding-right			: 3px;

    margin-top				: 2px;

    background				: transparent;
    background-image		: url('../graphics/forms/input_text_large.gif');
    background-repeat		: no-repeat;

    border					: none;

    _background-attachment	: fixed;
    _padding-top			: 0px;
}

*:first-child+html input.textLarge
{
    background: url('../graphics/forms/input_text_large.gif') no-repeat 100% 100%;
}

textarea
{
    border					: 1px solid #E0DFDF;
}

/* FONTS */
font.black
{
    font-weight				: normal;
    color					: #000000;
}

font.small
{
    font-size				: 10px;
}

/* LISTS */
ul.numbered
{
    list-style-type			: decimal;
}

/* MESSAGES */
span.message
{
    display					: block;

    background-color		: #FFFF9B;

    padding					: 10px;

    border					: 1px solid #CCCCCC;
}

span.notice
{
    display					: block;

    background-image		: url('../graphics/icons/info.gif');
    background-position		: center left;
    background-repeat		: no-repeat;
    background-color		: #FFFF9B;

    padding					: 10px;
    padding-left			: 55px;

    border					: 1px solid #CCCCCC;
}

span.error
{
    display					: block;

    background-image		: url('../graphics/icons/error.gif');
    background-position		: center left;
    background-repeat		: no-repeat;
    background-color		: #FFFF9B;

    padding					: 10px;
    padding-left			: 55px;

    border					: 1px solid #CCCCCC;
}

/* FRAME */
div.frame
{
    display					: block;

    width					: 952px;

    margin					: 0px;
    margin-top				: 13px;
    margin-left				: auto;
    margin-right			: auto;
    margin-bottom			: 13px;

    padding					: 0px;
}

/* CORNERS FOR DIVS */
/* Grey */
div.topLeftGrey
{
    height					: 8px;

    margin					: 0px;

    _font-size 				: 2px;

    background-image		: url('../graphics/corners/border-top-left-grey.gif');
    background-position		: top left;
    background-repeat		: no-repeat;
}

div.topLeftGreyStraight
{
    height					: 7px;

    margin					: 0px;

    _font-size				: 2px;

    border-top				: 1px solid #E6E6E6;
    border-left				: 1px solid #E6E6E6;

    background-color		: #FFFFFF;
}

div.topRightGrey
{
    height					: 8px;

    margin					: 0px;
    margin-top				: -8px;

    background-image		: url('../graphics/corners/border-top-right-grey.gif');
    background-position		: top right;
    background-repeat		: no-repeat;
}

div.innerGrey
{
    padding					: 0px;
    margin-top				: 0px;
    margin-bottom			: -8px;

    _margin-top				: -6px;

    height					: 100%;
    border-left				: 1px solid #E6E6E6;
    border-right			: 1px solid #E6E6E6;
}

div.bottomLeftGrey
{
    height					: 8px;

    margin					: 0px;

    _font-size				: 2px;

    background-image		: url('../graphics/corners/border-bottom-left-grey.gif');
    background-position		: bottom left;
    background-repeat		: no-repeat;
}

div.bottomRightGrey
{
    height					: 8px;

    margin					: 0px;
    margin-top				: -8px;

    _font-size 				: 2px;

    background-image		: url('../graphics/corners/border-bottom-right-grey.gif');
    background-position		: bottom right;
    background-repeat		: no-repeat;
}

/* Blue */
div.topLeftBlue
{
    height					: 8px;

    margin					: 0px;

    _margin-right 			: 8px;

    _font-size 				: 20px;

    background-image		: url('../graphics/corners/border-top-left-blue.gif');
    background-position		: top left;
    background-repeat		: no-repeat;
}

div.topLeftBlueStraight
{
    height					: 7px;

    margin					: 0px;

    _font-size				: 2px;

    border-top				: 1px solid #93C0EE;
    border-left				: 1px solid #93C0EE;

    background-color		: #FFFFFF;
}

div.topRightBlue
{
    height					: 8px;

    margin					: 0px;
    margin-top				: -8px;

    _margin-top				: -23px;

    _font-size 				: 20px;

    background-image		: url('../graphics/corners/border-top-right-blue.gif');
    background-position		: top right;
    background-repeat		: no-repeat;
}

div.innerBlue
{
    padding-bottom			: 8px;
    padding-left			: 5px;
    padding-right			: 5px;

    margin-top				: 0px;
    margin-bottom			: -8px;

    _margin-top				: -15px;

    height					: 100%;

    border-left				: 1px solid #93C0EE;
    border-right			: 1px solid #93C0EE;
}

div.bottomLeftBlue
{
    height					: 8px;

    margin					: 0px;

    _font-size				: 2px;

    background-image		: url('../graphics/corners/border-bottom-left-blue.gif');
    background-position		: bottom left;
    background-repeat		: no-repeat;
}

div.bottomRightBlue
{
    height					: 8px;

    margin					: 0px;
    margin-top				: -8px;

    _font-size 				: 2px;

    background-image		: url('../graphics/corners/border-bottom-right-blue.gif');
    background-position		: bottom right;
    background-repeat		: no-repeat;
}

/* Blue Full Filled */
div.topLeftBlueFull
{
    height					: 8px;

    margin					: 0px;

    _font-size 				: 2px;

    background-image		: url('../graphics/corners/border-top-left-blue-full.gif');
    background-position		: top left;
    background-repeat		: no-repeat;
}

div.topRightBlueFull
{
    height					: 8px;

    margin					: 0px;
    margin-top				: -8px;

    background-image		: url('../graphics/corners/border-top-right-blue-full.gif');
    background-position		: top right;
    background-repeat		: no-repeat;
}

div.bottomLeftBlueFull
{
    height					: 8px;

    margin					: 0px;

    _font-size				: 2px;

    background-image		: url('../graphics/corners/border-bottom-left-blue-full.gif');
    background-position		: bottom left;
    background-repeat		: no-repeat;
}

div.bottomRightBlueFull
{
    height					: 8px;

    margin					: 0px;
    margin-top				: -8px;

    _font-size 				: 2px;

    background-image		: url('../graphics/corners/border-bottom-right-blue-full.gif');
    background-position		: bottom right;
    background-repeat		: no-repeat;
}

/* LOADING DIV */
div.loading
{
    position				: fixed;
    top						: 0px;
    left					: 0px;

    width					: 100%;
    height					: 30px;
    line-height				: 12px;
    background-color		: #CCCCCC;

    z-index					: 100;
}

/* HEADER */
div.header
{
    display					: block;

    height					: 95px;
    width					: 952px;

    padding					: 0px;
    padding-bottom			: 8px;
    _padding-bottom : 0px;
    margin					: 0px;

    background-color		: #FFFFFF;
}

div.header div.logo
{
    position				: relative;

    top						: 0px;
    left					: 8px;

    width					: 273px;
    height					: 90px;
}

div.header div.log img.logo
{
    width					: 273px;
    height					: 90px;
}

/* TOP BLOCKS */
div.topBlocks
{
    display					: block;

    position				: relative;

    width					: 952px;
    height					: 30px;

    _margin-bottom : -10px;
    z-index					: 1;
}

/* MENU */
div.menu
{
    float					: left;

    width					: 952px;
    height					: 40px;

    padding					: 0px;
    margin					: 0px;

    position				: relative;

    top 					: 10px;
    left					: 0px;

    border					: none;

    text-transform			: uppercase;
    font-weight				: bold;
}

div.menu ul
{
    display					: block;

    height					: 40px;

    padding					: 0px;
    margin					: 0px;

    list-style				: none;
}

div.menu li
{
    height					: 40px;
    float					: left;

    margin					: 0px;
    margin-right			: 4px;
    padding-left			: 18px;

    background-image		: url('../graphics/buttons/menu_button_left.gif');
    background-repeat		: no-repeat;
    background-position		: top left;

    text-align				: center;
}

div.menu li.right
{
    height					: 40px;
    float					: right;

    margin					: 0px;
    padding-left			: 18px;

    background-image		: url('../graphics/buttons/right_menu_button_left.gif');
    background-repeat		: no-repeat;
    background-position		: top left;

    text-align				: center;
}

div.menu a
{
    display 				: block;
    _width					: 0%;
    height					: 40px;
    line-height				: 35px;

    margin					: 0px;
    padding					: 0px;
    padding-right			: 18px;

    background-image		: url('../graphics/buttons/menu_button_right.gif');
    background-repeat		: no-repeat;
    background-position		: top right;

    color					: #42ABCe;

    text-decoration			: none;
    font-weight				: bold;
    font-size				: 15px;
}

div.menu li.right a
{
    display 				: block;
    _width					: 0%;
    height					: 40px;
    line-height				: 35px;

    margin					: 0px;
    padding					: 0px;
    padding-right			: 18px;

    background-image		: url('../graphics/buttons/right_menu_button_right.gif');
    background-repeat		: no-repeat;
    background-position		: top right;

    color					: #FF9900;

    text-decoration			: none;
    font-weight				: bold;
    font-size				: 15px;
}

div.menu a:hover
{
    text-decoration			: underline;
}

div.menu li.right a:hover
{
    text-decoration			: underline;
}

/* MAIN (wrapper around content) */
div.main
{
    background-color		: #FFFFFF;

    height 					: 100%;
    width 					: 100%;

    margin-top				: 10px;
}

/* FOOTER */
div.footer
{
    width					: 952px;

    margin-top				: 10px;

    text-align				: center;
    vertical-align			: middle;

    font-size				: 12px;

    color					: #FFFFFF;
}

div.footer a
{
    color					: #FFFFFF;
    text-decoration			: underline;
    font-weight				: normal;
}

div.footer a:hover
{
    text-decoration			: none;
}

/* LEFT BLOCKS */
div.leftBlocks
{
    width					: 153px;

    float 					: left;

    margin-bottom 			: 10px;

    padding-left			: 18px;
    padding-right			: 5px;
}

div.leftBlock
{
    margin-top				: 10px;
}

div.leftBlock div.innerBlue
{
    padding-left			: 0px;
    padding-right			: 0px;
}

/* CENTER(CONTENT) BLOCK */
/* I give no dimensions yet, modules should do that as their layout varies a lot */
div.centerBlocks
{
    margin-bottom			: 10px;

    padding-left			: 5px;
    padding-right			: 5px;

    float					: left;
}

div.centerBlock
{
    margin-top				: 10px;
}

div.centerBlockFullWidth
{
    width 					: 912px;
    display 				: block;
}

/* RIGHT BLOCKS */
div.rightBlocks
{
    float					: right;

    width					: 120px;

    margin-bottom			: 10px;

    padding-left			: 5px;
    padding-right			: 18px;
}

div.rightBlock
{
    margin-top				: 10px;
}

/* CENTER_TOP BLOCKS */
div.centerTopBlocks
{
    width					: 550px;

    float 					: left;

    margin-top				: 10px;

    padding-left			: 5px;
}

div.centerTopBlock
{
    margin-top				: 10px;
}

/* CENTER_LEFT BLOCKS */
div.centerLeftBlocks
{
    width					: 367px;

    float 					: left;

    margin-top				: 10px;
    margin-bottom 			: 10px;

    padding-left			: 5px;
    padding-right			: 5px;
}

div.centerLeftBlock
{
    margin-top				: 10px;
}

/* CENTER_RIGHT BLOCKS */
div.centerRightBlocks
{
    float					: right;

    width					: 300px;

    margin-bottom			: 10px;

    padding-left			: 5px;
    padding-right			: 18px;
}

div.centerRightBlock
{
    margin-top				: 10px;
}

/* BOTTOM BLOCKS */
div.bottomBlocks
{
    float					: right;
}


div.bottomBlock
{
    padding 				: 5px;
    padding-bottom			: 10px;
    padding-left			: 9px;
    margin					: 10px;
    margin-right			: 13px;
}

/* PLAIN CONTENT */
div.content
{
    width					: 580px;

    margin					: 0px;
    margin-top				: -5px;
}

div.content p
{
    width 					: 96%;
}

/* MOUSEOVER MESSAGE */
div.mouseoverMessage
{
    display					: none;
    position				: absolute;
    background-color		: #FFFFFF;
    z-index					: 100;
}

*:first-child+html div.mouseoverMessage
{
    width 					: 220px;
    height 					: 90px;
}

*:first-child+html div.mouseoverMessage div.innerBlue
{
    background-color        : #FFFFFF;
}