/*
    Document   : css style sheet
    Created on : 13. kesäkuuta 2008, 11:00
    Author     : Jorma Hakala
    Description: Style definitions of the StarGM Team Edition web site.

    Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/*---------------------------------------------------------------------------
    html and body tags and common font styles
 ---------------------------------------------------------------------------*/
*
{
    margin: 0px;
    padding: 0px;
}

html,body
{
    height: 100%;
    min-height: 100%;
    margin: 0px;
    padding: 0px;
    border: none;
}

html
{
    background-color: black;
}

body
{
    background-color: transparent;
}

body, input, select, textarea, table, li, pre
{
    font-size: 10px;     /* Default 'em' values are calculated using this font-size 10px => (1px = 0.1em) */

    font-weight: normal;
    font-family : Verdana,Tahoma,Helvetica,Arial,sans-serif,Trebuchet MS;

    color: #000;

    text-align: left;
    text-decoration: none;
}

p,td
{
    font-size:1.1em;
}

em
{
    color:#aaa;
}

iframe
{
    border:none;
    width:100%;
    height:100%;
}
/*---------------------------------------------------------------------------
    Headers
 ---------------------------------------------------------------------------*/

h1,h2,h3,h4,h5,legend
{
    padding: 0.2em;
    padding-left:0;
    padding-bottom:0.6em;
    margin: 0em;
    color:#000000;
    font-weight: bold;
    font-family : Trebuchet MS,Helvetica,Verdana,Arial,Tahoma,MS Sans Serif,sans-serif;
    letter-spacing: 0em;
}

legend
{
    margin: 0em;
    padding: 0em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    font-size: 1.5em;
    color: #666;
}

h5
{
    font-size: 1em;
}

h4
{
    font-size: 1.3em;
    color:#666;
}

h3
{
    font-size: 1.4em;
}

h2
{
    font-size: 1.6em;
}

h1
{
    font-size: 2em;
}

h1.onblack
{
    font-size: 2em;
    color:#FFE404;
    text-align:center;
}

h1.blackbg
{
    position:relative;
    left:-10px;

    font-size: 2em;
    padding-left: 0.8em;
    padding-right: 2em;
    padding-top: 0.5em;
    padding-bottom: 1em;

    background-image: url("../gfx/palkki.gif");
    background-repeat: no-repeat;
    background-position: top left;
    color:#FFE404;
}

h1.blackbg2
{
    position:absolute;
    top:-10px;
    left:-10px;

    width:128px;
    font-size: 2em;
    padding-left: 0.8em;
    padding-right: 2em;
    padding-top: 0.5em;
    padding-bottom: 0.7em;

    color:#FFE404;
    background-image: url("../gfx/palkki_small.gif");
    background-repeat: no-repeat;
    background-position: top left;
}

/*---------------------------------------------------------------------------
    Blocks
 ---------------------------------------------------------------------------*/

fieldset
{
    position : relative;

    border: 1px solid #DEDEDE;
    border-left: none;
    border-bottom: none;
    border-right: none;

    margin: 0em;
    padding: 0.5em;

    background-image: url("../gfx/gradient_bg2.jpg");
    background-repeat: repeat-x;
    background-position: 0px -250px;
    background-color:white;
}

fieldset.ieLegendFix
{
    *position : relative;
    *padding-top: 1.5em;
    *margin-top: 0.9em;
}

fieldset.ieLegendFix legend
{
    *position: absolute;
    *top: -0.6em;
    *left: 0.2em;
}

p
{
    padding: 1em;
}

div.hr
{
    font-size:0.01em;
    height:0em;
    border:1px solid;
    margin-top:10px;

    border-color:#999 #fff #fff #fff;
}

/*---------------------------------------------------------------------------
    List
 ---------------------------------------------------------------------------*/
ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul li
{
    position: relative;
    padding-left: 2em;
    padding-bottom: 1em;
    margin-left:1em;

    font-size: 1.1em;

    background-image: url("../gfx/li.gif");
    background-repeat: no-repeat;
    background-position: 1px 1px;
}

ul li ul li
{
    background-image: url("../gfx/li2.gif");
}

ul li ul li ul li
{
    background-image: url("../gfx/li3.gif");
}
/*---------------------------------------------------------------------------
    Links
 ---------------------------------------------------------------------------*/

a
{
    color:#CC6600;
    text-decoration: none;
    font-weight: inherit;
    border: none;
}

a:hover
{
    text-decoration: underline;
}

img, a img
{
    border:none;
}

/*---------------------------------------------------------------------------
    Table
 ---------------------------------------------------------------------------*/
table
{
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    empty-cells: show;
}

thead,tbody
{
    border: none;
}

td,th
{
    width: auto;
    padding: 0.2em;
    border: 1px solid #ddd;
    border-top: none;
}

th
{
    text-align: left;
    color: #fff !important;
    font-weight: bold;
    background-color:#000;
    background-image:url("../gfx/heading_bg.gif");
    background-repeat: repeat-x;
    vertical-align: middle;
}

td
{
    border-left:none;
    border-right:none;
    color: #000;
    /*filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;*/
}

td.dark
{
    background-color: #eee;
}

tr.green_row td
{
   background-color: #f5fff5;
   font-weight:bold;
}

tr.green_row td.dark
{
   background-color: #e4f5e4;
}

.red_row td
{
   background-color: #ffeeee;
}

.red_row td.dark
{
   background-color: #ffdddd;
}

.grey_row td
{
    color:#888888;
}

/*---------------------------------------------------------------------------
    Definition list
 ---------------------------------------------------------------------------*/
dl
{

}

dt
{
    margin:0px;
    padding:0px;
    font-weight:bold;
}

dd
{
    padding-left:0.5em;
}

/*---------------------------------------------------------------------------
    Forms
 ---------------------------------------------------------------------------*/

form
{
    margin: 0px;
    padding: 0px;
}

input,button,textarea,select
{

    font-family : Tahoma,Arial,Verdana,Geneva,MS Sans Serif,Helvetica,sans-serif,Trebuchet MS;
    font-size: 1.1em;

    margin: 0.2em;
    padding-left:0.2em;
    padding-right:0.2em;
    padding-top:0.1em;
    padding-bottom:0.1em;

    vertical-align: middle;

    text-decoration: none;

    border: 1px solid #999;
    background-color: #fff;
}

select
{
    padding:0;
    width:11.2em;
}

form label
{
    color: #666;
}

form ol
{
    padding: 0.5em 1em 0 0.5em;
    list-style: none;
    margin: 0px;
}

form ol li
{
    padding-bottom: 0.5em;
    clear: both;
}

form ol.hr li
{
    float:left;
    width:150px;
    display:block;
    clear:none;
}

form ol li label
{
    margin-bottom: 0.1em;
    display: block;
    font-weight: bold;
    color: #666;
}

form .checkbox,
form .radio
{
    float: left;
    display:inline;
    border: none;
    background-color: transparent;
    color: #90CA04;
}

form .checkboxLabel,form .radioLabel
{
    float: left;
    margin: 0.3em;
    padding-left: 0.5em;
    *margin-top: 0.6em;
    *margin-bottom: 0.6em;
}

form .inputfield
{

    width:90%;
    padding:0.2em;
}

/*---------------------------------------------------------------------------
    Buttons
 ---------------------------------------------------------------------------*/

form .submit, button
{
    text-align: center;
    font-weight: bold;

    color: #fff;
    background-color: #aaa;
    background-image: url("../gfx/gray_button_bg.gif");
    background-repeat: repeat-x;

    border-top: 1px solid #808080;
    border-bottom: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #808080;
}

button.fill,input.fill
{
    margin:0px;
    padding:0px 0.5em 0px 0.5em;
    font-size:x-small;
}

.green_button
{
    text-align: center;
    background-image: url("../gfx/green_button_bg.gif");
    background-repeat: repeat-x;
    background-position: 50% 50%;
    color: white;
    font-weight: bold;
    border: 1px solid #39a21e;
}

.red_button
{
    text-align: center;
    background-image: url("../gfx/red_button_bg.gif");
    background-repeat: repeat-x;
    background-position: 50% 50%;
    color: white;
    font-weight: bold;
    border: 1px solid #b41a10;
}

.blue_button
{
    text-align: center;
    background-image: url("../gfx/blue_button_bg.gif");
    background-repeat: repeat-x;
    background-position: 50% 50%;
    color: white;
    font-weight: bold;
    border: 1px solid #1032b5;
}

.gray_button
{
    text-align: center;
    background-image: url("../gfx/gray_button_bg.gif");
    background-repeat: repeat-x;
    background-position: 50% 50%;
    color: white;
    font-weight: bold;
    border: 1px solid #949494;
}

a.button
{
    margin:2px;
    padding:4px;    
    padding-top:2px;
    padding-bottom:2px;
    position:relative;
    top:1px;
}

a.button:hover
{
    text-decoration:none;
}
/*---------------------------------------------------------------------------
    SelectList
 ---------------------------------------------------------------------------*/
.selectList
{
    position: relative;
    top:0px;
    left:160px;

    padding-top: 0em;
    padding-left: 0em;

    width: 6em;
}

.selectList a
{
    float: left;
    display: inline;

    width: 3em;
    padding-top: 0em;
    padding-bottom: 1em;

    text-align: center;
    text-decoration: none;
}

.selectList a.selected
{
}

.selectList a:hover
{
    text-decoration: none;
}

.selectList a span
{
    font-size: 1.5em;
    font-weight: bold;
    color: #999;
}

.selectList a:hover span
{
    color: #666;
}

.selectList a.selected span
{
    color: #333;
}

.selectList a img
{
    width:1.8em;
    height:1.2em;

    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.selectList a.selected img
{
    width:2.1em;
    height:1.4em;

    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

.selectList a:hover img
{
    /*width:2.1em;
    height:1.4em;*/

    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}


/*---------------------------------------------------------------------------
    Other
 ---------------------------------------------------------------------------*/
.clearing
{
    clear:both;
    display:block;
    font-size:0;
    height:1px;
}

.print-header,.print-footer
{
    display:none;
}

.noBgImage
{
    background-image:none;
}

.printBlock
{
    display:none;
}

.help
{
  cursor: help;
}
/*---------------------------------------------------------------------------
    Wicket styles
 ---------------------------------------------------------------------------*/
ul li.feedbackPanelERROR
{
    padding-top: 0.3em;
    padding-bottom: 0.5em;
    background-image: url( "../gfx/icons/error.gif" );
    background-repeat: no-repeat;
    background-position: 0% 50%;
    color: #d52c2c;
}

.left ul li.feedbackPanelERROR
{
    background-image: url( "../gfx/icons/error_dark.gif" );
}

#wicketAjaxDebugWindowLogId
{
    color: black;
}

.wicket-tree-table .header
{
    text-align: left;
    color: #fff !important;
    font-weight: bold;
    background-color:#000;
    background-image:url("../gfx/heading_bg.gif");
    background-repeat: repeat-x;
    vertical-align: middle;
}

div.wicket-tree-table a
{
    float:none !important;
}

.wicket_orderUp a,.wicket_orderDown a,.wicket_orderNone a
{
    color: #fff;
    font-weight: bold;
    display: block;
    padding-left: 1em;
    background-repeat: no-repeat;
    background-position: 0em 50%;
}

.wicket_orderUp a
{
    background-image: url( "../gfx/order_up.gif" );
}

.wicket_orderDown a
{
    background-image: url( "../gfx/order_down.gif" );
}

.wicket_orderNone a
{
    background-image: url( "../gfx/order_none.gif" );
}

.yui-calcontainer
{
    width: 20em;
    position:absolute;
    z-index:100000;
}

.yui-cal-nav
{
    font-size:10px !important;
}

.yui-cal-nav button
{
    background:none;
}

.yui-cal-nav-btn
{
    margin:0px !important;
}

table.palette td
{
    background-color: transparent !important;
}

table.palette td.header
{
    border-color: #000 !important;
}

.yui-skin-sam img
{
    vertical-align:middle;
    margin-bottom:0.2em;
}

#busy_indicator
{
    display: none;
    /*float: right;*/
    position:absolute;
    right:-2px;
    top:20px;
    height:16px;
    padding:16px;
    z-index: 1000;

    /*background: rgb(255,241,168);*/
    background-color:#000;
    background-image:url("../gfx/ajax-loader.gif");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    color:#FFE404;
    font-weight: bold;
    text-align: center;
    font-size: 1em;
}

div.tab-row ul
{
    height: 20px;
    margin: 0;
    padding:0;
    padding-left: 10px;
    /*background: url("../gfx/tab_bottom.gif") repeat-x bottom;*/
    background-image:url("../gfx/bg_bottom_shade.gif");
    background-repeat: repeat-x;
    background-position: bottom left;
    border-bottom: 1px solid #aaa;
}

div.tab-row li
{
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
}

div.tab-row a,
div.tab-row em
{
    float: left;
    position:relative;
    top:1px;
    _top:2px;
    background: #f3f3f3;
    font-size: 12px;
    line-height: 14px;
    font-weight: bold;
    padding: 2px 10px 2px 10px;
    margin-right: 4px;
    border: 1px solid #ccc;
    border-left: 1px solid #bbb;
    border-bottom: none;
    text-decoration: none;
    color: #666;
    font-style:normal;
}

div.tab-row li.selected a,
div.tab-row li em
{
    border-bottom: 1px solid #fff;
    border-top: 2px solid #FFE404;
    top:0px;
    _top:1px;
    background: #fff;
    color: #000;
    background-image:url("../gfx/bg_top_shade.gif");
    background-repeat: repeat-x;
    background-position: bottom left;
}

div.tab-row a:hover
{
    background: #fff;
    text-decoration: none;
}

div.tab-panel
{
    padding-top:1em;
    /*padding-bottom:1em;
    min-height:300px;*/
}

.wicket-modal div
{
    *position:relative;
}

/*---------------------------------------------------------------------------
    IE5/6 png fix
 ---------------------------------------------------------------------------*/
img
{
    _behavior:  url("/Team/pngbehavior.htc") url(/pngbehavior.htc);
}

/*---------------------------------------------------------------------------
    Layout
 ---------------------------------------------------------------------------*/
.wrap
{
    min-height:100%;
    _height:100%;
    width:950px;
    margin-left:auto;
    margin-right:auto;
    background-image: url("../gfx/bg_vanha_logo.jpg");
    background-repeat: no-repeat;
    background-position: 0px -7px;    
    background-color:black;    
}

.topAds
{
    float:left;
    height:90px;
    width:810px;
    overflow:hidden;
}

.rightAds
{
    float:right;
    width:140px;
    height:800px;
}

.main
{
    float:left;
    width:800px;
    padding-top:50px;
    padding-right:10px;
}

.main .infoBox
{
    float:right;
    width:315px;
    height:180px;
}

.main .left
{
    float:left;
    width:165px;
    padding-top:205px;
    padding-left:12px;
    padding-right:8px;
    padding-bottom:50px;
}

.main .left .menuBox
{
    position:relative;
    border:1px solid black;
    background-color:black;
    padding-top:40px;
    padding-bottom:20px;
}

.main .left .loginBox
{
    position:relative;
    border:1px solid black;
    background-color:black;
    padding-top:40px;
    padding-bottom:20px;
}

.main .contentBox
{
    float:right;
    position:relative;
    margin:35px 0px 0px;
    padding:0px 2px 0px;
    width:604px;
    background-color:white;
    border:2px solid #666;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.main .content
{
    float:right;
    position:relative;
    top:-20px;
    width:100%;
    min-height:300px;
    _height:300px;
}

.footer
{
    float:right;
    width:611px;
    color:white;
    text-align:center;
    padding:1em 0 1em 0;
}

/* NO ADS */
.topAds,.rightAds
{
    display:none;
}
.wrap
{
    width:810px;
    background-position: 0px -97px;
 }
/* NO ADS END */

/*---------------------------------------------------------------------------
    LOGIN
 ---------------------------------------------------------------------------*/
.loginBox ul li a
{
    color:#999;
}
.loginBox ul li.logout,
.loginBox ul li.register,
.loginBox ul li.lostPassword
{
    padding-top:0.3em;
    padding-bottom:0.5em;

    background-repeat: no-repeat;
    background-position: 0em .1em;
    padding-left: 2em;
    padding-bottom: 0.5em;
    font-size: 1.1em;
}

.loginBox ul li.logout
{
    background-image: url( "../gfx/icons/door_out_dark.gif" );
}

.loginBox ul li.register
{
    background-image: url( "../gfx/icons/group_add_dark.gif" );
}

.loginBox ul li.lostPassword
{
    background-image: url( "../gfx/icons/key_go_dark.gif" );
}

.loginBox ul li.noicon
{
    background-image: none;
}

table.results td,table.results th
{
    color:white;
    border-color:#666;
    border:none;
}

/*---------------------------------------------------------------------------
    MENU
 ---------------------------------------------------------------------------*/

.menuBox a
{
    display:block;
    clear:both;
    color:#fff;
    font-weight:bold;
    font-size:1.5em;
    padding-left:1em;
    font-family : Trebuchet MS,Helvetica,Tahoma,Verdana,Arial,MS Sans Serif,sans-serif;
}

.menuBox a:hover
{
    color:#aaa;
    text-decoration:none;
}

/*---------------------------------------------------------------------------
    SELECTED PLAYER INFO BOX
 ---------------------------------------------------------------------------*/
.content .playerBox
{
    float:left;
    display:inline;
    margin-left:30px;
    padding-top:5px;
    height:222px;
    width:255px;
    background-image: url("../gfx/playerBox.jpg");
    background-repeat: no-repeat;
    background-position: bottom left;
}

.content .playerBox .image
{
    float:left;
    width:113px;
    height:168px;
    background-image: url("../gfx/noimage.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    text-align:center;
}

.content .playerBox .name
{
    float:right;
    width:132px;
    height:35px;
    overflow:hidden;
    padding:5px;
    font-weight:bold;
}

.content .playerBox .info
{
    position:relative;
    float:right;
    width:132px;
    height:112px;
    overflow:hidden;
    padding:5px;
}

.content .playerBox .ratio
{
    position:absolute;
    bottom:5px;
    right:5px;
    padding:2px;
    width:50px;
    font-weight:bold;
    background-color:#FFC775;
    border:1px solid #000;
}

.content .playerBox .matches
{
    position:absolute;
    top:50px;
    right:3px;
    width:56px
}

.content .playerBox .ratio *
{
    display:block;
    font-size:2em;
    text-align:center;
}

/*---------------------------------------------------------------------------
    PLAYER SELECT AREA
 ---------------------------------------------------------------------------*/

.content .hockeyRing
{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    height:247px;
    width:411px;
    background-image: url("../gfx/hockeyRing.jpg");
    background-repeat: no-repeat;
    background-position: top left;
}

.content .hockeyRing em
{
    color:black;
}

.content .hockeyRing a.player span.row
{
    display:block;    
}

.content .hockeyRing a.player,
.content .hockeyRing span.player
{
    position:absolute;
    width:90px;
    height:50px;
    padding-top:40px;
    font-weight:bold;
    background-image: url("../gfx/kalpaLogo_vanha.gif");
    background-repeat: no-repeat;
    background-position: 20px 0px;
    color:black;

    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.content .hockeyRing a.player:hover
{
    text-decoration:none;

    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;

}

.content .hockeyRing a.player.selected,
.content .hockeyRing span.player.selected
{
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

.content .hockeyRing .pos1
{
    top:10px;
    left:80px;
}
.content .hockeyRing .pos2
{
    top:10px;
    left:170px;
}
.content .hockeyRing .pos3
{
    top:10px;
    left:260px;
}
.content .hockeyRing .pos4
{
    top:100px;
    left:100px;
}
.content .hockeyRing .pos5
{
    top:100px;
    left:240px;
}

.content .browse
{
    width:280px;
    margin-left:auto;
    margin-right:auto;
}

.left .bottom
{
    position:relative;
}

/*---------------------------------------------------------------------------
    MATCH INFO BOX
 ---------------------------------------------------------------------------*/
.infoBox .date,
.infoBox .teams,
.infoBox .closeTitle,
.infoBox .closeTimer
{
    padding: 0.2em;
    padding-left:10px;
    padding-bottom:0.5em;

    margin: 0em;

    color:#000000;
    font-weight: bold;
    font-family : Trebuchet MS,Helvetica,Tahoma,Verdana,Arial,Helvetica,MS Sans Serif,sans-serif;

    letter-spacing: 0em;
    font-size:2em;
    text-align:center;

    overflow:hidden;
    white-space:nowrap;
}

.infoBox .teams
{
    width:100%;
    margin-top:-0.2em;
    font-size:3em;
    padding:0;
}

.infoBox .closeTitle
{
    padding-top:0.4em;
    padding-bottom:0.2em;
    font-size:1.2em;
}

.infoBox .closeTimer
{
    padding-top:0em;
    font-size:2em;
}

/*---------------------------------------------------------------------------
    NEWS STYLES
 ---------------------------------------------------------------------------*/
.news
{
    padding: 0.5em 1em 0.5em 2em;
    font-size:xx-small;
    color:#fff;
}

.news .date
{
    font-weight:bold;
    color:#999;
}

.news .title
{
    padding-left:0.3em;
    font-weight:bold;
}

.news .message
{
    padding-left:0.6em;
}

.news a
{
    font-size:x-small;
    color:#bbb;
}
/*---------------------------------------------------------------------------
    Misc element styles
 ---------------------------------------------------------------------------*/

.infoField
{
    font-size:xx-small;
    color:#aaa;

}

.smallWhite
{
    font-size:xx-small;
    color:#fff;

}
/*---------------------------------------------------------------------------
    Prizes
 ---------------------------------------------------------------------------*/
.periodprize
{
    background-image: url("../gfx/prizes_expert.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0px;   
    height:320px;
}