/***************************
 **       Defaults        **
 ***************************/
a
{
    color       : #a8ff00;
    font-size   : 12px;
}
a:link
{
    color       : #a8ff00;
}
a:visited
{
    color       : #a8ff00;
}
a:hover
{
    color       : #00b4ff;
}
a:active
{
    color       : #00b4ff;
}
p, li, td, th
{
    color       : #cdcdcd;
    font-size   : 11px;
    font-family : "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}
h1, h2, h3, h4, h5, h6
{
    color       : #00b4ff;
    font-family : "Georgia", serif;
}
h1 { font-size  : 18px; text-decoration : underline; padding-bottom : 20px; }
h2 { font-size  : 16px; }
h3 { font-size  : 15px; }
h4 { font-size  : 14px; }
h5 { font-size  : 13px; }
h6 { font-size  : 12px; }

body
{
    background  : black url("../images/back-pattern.gif") repeat;
}
#site
{
    background  : url("../images/grass.png") repeat-x 100px bottom;
}
* html #site
{
    border : 1px solid black;
}
/***************************
 **      Structure        **
 ***************************/
#root
{
    width   : 1000px;
    margin  : 0 auto;
}

#header
{
    height  : 160px;
}

#footer
{
    height  : 100px;
}

/***************************
 **      Header        **
 ***************************/
#header
{
    position    : relative;
}

#header #user-menu
{
    padding-top     : 15px;
    padding-right   : 60px;
}

#header #user-menu a
{
    color           : #a8ff00;
    font-family     : "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    font-size       : 12px;

    text-decoration : none;
    border-bottom   : 1px dashed #a8ff00;

    float           : right;
}

#header #logo
{
    position    : absolute;
    top         : 45px;
    left        : 100px;
    display     : block;
}

#header #main-menu
{
    position    : absolute;
    top         : 40px;
    left        : 320px;

    width       : 381px;
    height      : 81px;

    padding-top : 10px;
    padding-left: 10px;

    background  : url("../images/menu-back.png") no-repeat;
}
* html #header #main-menu
{
    background-position: 10px top;
}

#header #main-menu a,
#header #drop-menu a
{
    color       : #00b4ff;
    font-family : "Georgia", serif;
    font-size   : 14px;
    padding     : 3px 12px;
    display     : block;
    float       : left;
}

#header #main-menu a:hover,
#header #drop-menu a:hover
{
    color   : #a8ff00;
}

#header #main-menu a.more
{
    background          : url("../images/more.png") no-repeat right 8px;
    padding-right       : 12px;
    text-decoration     : none;
}
* html #header #main-menu a.more
{
    padding-right       : 24px;
}
#header #main-menu a.more span
{
    border-bottom       : 2px dotted #00b4ff;
}
#header #main-menu a.more:hover span
{
    border-bottom       : 2px dotted #a8ff00;
}

#header #navigation
{
    position    : absolute;
    right       : 50px;
    top         : 75px;
}
#header #navigation div
{
    width       : 25px;
    height      : 25px;
    float       : left;
    padding     : 0px 5px;
}
#header #navigation div.current
{
    background-image    : url("../images/nav-current.png");
    background-position : center center;
    background-repeat   : no-repeat;
}
* html #header #navigation div.current
{
    background-position: 10px center;
}
#header #navigation div a
{
    background-position : center center;
    background-repeat   : no-repeat;
    display             : block;
    padding             : 13px;
}
#header #navigation div a#nav-home
{
    background-image    : url("../images/home.gif");
}
#header #navigation div.current a#nav-home
{
    background-image    : url("../images/home-current.gif");
}
#header #navigation div a#nav-search
{
    background-image    : url("../images/search.gif");
}
#header #navigation div.current a#nav-search
{
    background-image    : url("../images/search-current.gif");
}
#header #navigation div a#nav-contact
{
    background-image    : url("../images/contact.gif");
}
#header #navigation div.current a#nav-contact
{
    background-image    : url("../images/contact-current.gif");
}

/***************************
 **       Channels        **
 ***************************/
#channels
{
    margin-top  : 55px;
    padding     : 0px 97px;
    height      : 450px;
}

/***************************
 **       Carousel        **
 ***************************/
.carousel
{
    position    : relative;
}
.carousel .carousel-items
{
    position    : relative;
    width       : 100000px;
    height      : 306px;
}
.carousel .carousel-container
{
    position    : relative;
    overflow    : hidden;
    width       : 806px;
}
.carousel .carousel-scroller
{
    width       : 95px;
    height      : 300px;

    position    : absolute;
    top         : 3px;

    background  : no-repeat center center;
    cursor      : pointer;
           
}
.carousel .carousel-left
{
    left                : -95px;
    background-image    : url("../images/arrow-left-active.png");
}
.carousel .carousel-right
{
    right               : -95px;
    background-image    : url("../images/arrow-right-active.png");
}
* html .carousel .carousel-scroller.carousel-right
{
    right       : 0px;
}
.carousel .carousel-left-disabled
{
    background-image    : url("../images/arrow-left-disabled.png");
}
.carousel .carousel-right-disabled
{
    background-image    : url("../images/arrow-right-disabled.png");
}

.carousel .carousel-item
{
    position    : absolute;
    left        : 0px;
    top         : 0px;
    width       : 806px;
    height      : 306px;
}
.carousel .carousel-item img
{
    border  : 3px solid #212121;
}
.carousel .carousel-item a
{
    display : none;
}

/***************************
 **        Player         **
 ***************************/
.player
{
    margin-top  : 13px;
}
.player *
{
    float       : left;
}
.player span.player-label
{
    color       : #a8ff00;
    font-family : "Georgia", serif;
    font-size   : 18px;
    line-height : 200%;
    padding-right   : 5px;
}

.player a.current-song
{
    color       : #00b4ff;
    font-family : "Georgia", serif;
    font-size   : 24px;
    width       : 450px;
}

.player .media-player
{
    width       : 240px;
    height      : 40px;
    padding-left: 10px;
}
.player span.current-channel
{
    color       : white;
    font-family : "Georgia", serif;
    font-size   : 18px;
    line-height : 200%;
    float       : right;
    white-space : nowrap;
}

/***************************
 **      Main             **
 ***************************/
#main
{
    padding     : 0px 97px;
}

/***************************
 **        Sidebar        **
 ***************************/
#sidebar
{
    width       : 240px;
    float       : left;
}
#sidebar .sidebar-item
{
    margin-bottom   : 30px;
    text-align      : center;
}

/***************************
 **        Content        **
 ***************************/
#content
{
    margin-left     : 240px;
    padding-left    : 40px;
}
#content div.separator
{
    background      : url("../images/separator.gif") repeat-x;
    height          : 4px;

    margin          : 25px 0px;
}
#content #dj-list
{
    height          : 150px;
}
#content #dj-list .dj-wrapper
{
    position        : relative;
    display         : block;
    float           : left;
}
#content #dj-list a.dj-more
{
    display         : block;
    float           : left;
    margin-top      : 80px;
}
#content #dj-list a img
{
    border      : 3px solid #212121;
    margin-right: 20px;
}

#content #dj-list a:hover img
{
    border      : 3px solid #3a3a3a;
}

#content #news a.news-image
{
    float           : left;
    padding-right   : 7px;
}
#content #news .news-item h2
{
    font-size   : 12px;
    font-weight : bold;
    font-family : "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    margin-bottom : 4px;

    line-height : normal;
}

#content #news .news-item .news-date
{
    color       : #4c4c4c;
    font-size   : 10px;
    font-family : "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}
#content #news .news-item p
{
    line-height : 130%;
}


#content #news .news-item a img
{
    border  : 3px solid #212121;
}

#content #news .news-item a:hover img
{
    border      : 3px solid #3a3a3a;
}

/***************************
 **     Footer            **
 ***************************/
#footer
{
    position            : relative;
}

#footer #copyright,
#footer #copyright a
{
    color    : white;
}
#footer #copyright
{
    position    : absolute;
    left        : 102px;
    bottom      : 36px;
}
#footer #counters
{
    position    : absolute;
    right       : 57px;
    bottom      : 24px;
}

/***************************
 **         Ballon        **
 ***************************/
.balloon
{
    background          : url("../images/ballon-left.png") no-repeat left top;

    height              : 81px;
    width               : auto;

    padding             : 0px 16px;

    position            : absolute;
    left                : 60px;
    bottom              : 50px;
    z-index             : 10;
}
a:hover .balloon *
{
    text-decoration:none;
}
* html .balloon
{
    width               : 100px;
    background          : url("../images/ballon-left.gif") no-repeat left top;
}
.balloon .balloon-right
{
    background          : url("../images/ballon-right.png") no-repeat right top;

    width               : 17px;
    height              : 81px;
    display             : block;

    position            : absolute;
    right               : 0px;
    top                 : 0px;
}
* html .balloon .balloon-right
{
    background          : url("../images/ballon-right.gif") no-repeat right top;
}
.balloon .balloon-center
{
    background          : url("../images/ballon-center.png") repeat-x left top;
    height              : 71px;
    padding-top         : 6px;
    min-width           : 100px;
}
* html .balloon .balloon-center
{
    background          : url("../images/ballon-center.gif") repeat-x left top;
    height              : 71px;
    padding-top         : 6px;
    min-width           : 100px;
}

.balloon-header,
.balloon-description,
.balloon-contact
{
    line-height         : 100%;
    color               : white;
    display             : block;
    font-family         : "Helvetica Neue", "Arial", "Helvetica", sans-serif;
    font-size           : 11px;
    white-space         : nowrap;
    position            : relative;
}
.balloon-contact:link,
.balloon-contact:visited,
.balloon-contact:hover,
.balloon-contact:active
{
    color               : white;
}
.balloon-header
{
    line-height         : 200%;
    font-weight         : bold;
}

/***************************
 **        Auth form      **
 ***************************/
#auth-form
{
    position    : absolute;
    right       : 50px;
    top         : 40px;
    z-index     : 1000;

    padding     : 18px 15px 15px 15px;
    height      : 100px;

    background  : #29292e;
    border      : 3px solid #333333;
    font-family : "Arial";
}
#auth-form-user
{
    position    : absolute;
    right       : 50px;
    top         : 40px;
    z-index     : 1000;

    padding     : 18px 15px 15px 15px;
    height      : 150px;

    background  : #29292e;
    border      : 3px solid #333333;
    font-family : "Arial";
}
* html #auth-form
{
    width       : 210px;
}
#auth-form div
{
    height      : 25px;
}
#auth-form label
{
    float       : left;
    width       : 60px;
    line-height : 200%;
    color       : white;
}
#auth-form input
{
    background  : #cccccc;
    border      : 1px solid #333333;
}
#user-menu #auth-form a
{
    float : none;
    position    : relative;
    top         : 10px;
    left        : 30px;
}
#auth-form input.submit-btn
{
    position    : absolute;
    right       : 15px;
}
* html #auth-form input.submit-btn
{
    right       : 17px;
}

/***************************
 **     Dropdown menu     **
 ***************************/
#header #drop-menu
{
    position    : absolute;
    left        : 150px;
    top         : 63px;

    z-index     : 20000;

    width       : 180px;
    display     : none;

    background  : url("../images/menu/tooltip_01.png") left top no-repeat;
}
#header #drop-menu-content
{
    margin           : 25px 0px 0px 0px;
    padding          : 0px 10px 0px 10px;
    background-color : #29292e;
}
#header #drop-menu-footer
{
    height           : 16px;
    width            : 180px;
    background-image : url("../images/menu/tooltip_05.png");
}
* html #header #drop-menu-footer
{
    background-image : url("../images/menu/tooltip_05.gif");
}
#header #drop-menu a
{
    padding     : 1px 10px;
    float       : none !important;
    white-space : nowrap;
}
#root
{
     min-height : 1000px;
}
.carousel-items
{
    display : none;
}
.carousel .carousel-container
{
    height      : 306px;
}



/* ============== Tables ============== */

table.flat		{ width:99%; margin:0; padding:0; border-collapse:collapse; }
table.flat td 	{ padding:0; margin:0}
table.main 		{ width:99%; margin:0; padding:4px; }
table.main td 	{ padding:4px; }
table.cells 	{ width:99%; margin:0; padding:0; border:4px solid #666666; }
table.cells td	{ padding:2px; background-color:#333333; margin:0; }
table.list 		{ width:99%; margin:0; padding:5px; }
table.list td 	{ padding:12px; }

#title
	{
	margin:0px 0px 0px 105px;
	font-size:150%;
	font-weight:bold;
	}

#subtitle
	{
	margin:0px 0px 0px 105px;
	font-size:125%;
	vertical-align:top;
	}