/* 
    Document   : global
    Created on : 12.11.2009, 12:55:25
    Author     : Marek Chrenko
    Description: Global style for European Youth Card kiosk

    Details: page centered, 960 px width, footer 172px height
*/

*       {  margin: 0; }
root    {  display: block; }
html    {  height: 100%; }

body
{
    background-color:  #1673b7;
    color: white;
    font-family: Arial;
    font-size: 12px;
    height: 100%;
    text-align: center;

    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

/*
  Set null for style of a href
*/

a:hover
{
    color: white;
    text-decoration: underline;    
}

a
{
    color: #feca00;
    text-decoration: none;
}

a img, a:hover img, a:link img, a:visited img
{
    color: white;
    text-decoration: none;
    border-width: 0px;
}

/*
  remove dotted border in FF
*/
a:active    { outline: none; }
a:focus     { -moz-outline-style: none; }

/*
  Header class - everything what is on top with white background
*/
.header
{
    background-color: white;
    width: 100%;
    height: 118px;
}

/*
  Menu class - top menubar, .menu .center ul li style menulist
*/
.menu
{
    background-color: #0b3a5b;
    width: 100%;
    height: 54px;
}

.menu .center ul
{
    margin: 0px 0px 0px 0px;
    padding-top: 13px;
    padding-left: 0px;
    text-align: left;
}

.menu .center li
{  
    display: inline;
    list-style: none;
    padding: 10px 5px 10px 5px;
}

/*
  Center class - everything in this class is centered, default page width is 960px
*/
.center
{
    width: 960px;
    position: relative;
    margin: 0 auto;
    text-align: left;
}

/*
  Image logo with text
*/
#logo
{
    padding-top: 22px;
    padding-left: 9px;
}

/*
  Hide H1 header, showing image instead. This is for search engines and browsing without CSS.
*/
h1{ display: none; }

/*
  Decoration things on the top right.
*/
#decor
{
    background-image: url(.././img/decor.jpg);
    float: right;
    position: absolute;
    top: 0px;
    left: 560px;
    width: 407px;
    height: 104px;
}

/*
  Divider line between top white pane with logo and menubar
*/
#divider
{
    background-image: url(.././img/divider.gif);
    background-repeat: repeat-x;
    width: 100%;
    height: 15px;
}

/*
  Content of page under menubar
*/
#content
{
    background-image: url(.././img/blue_light.jpg);
    background-repeat: no-repeat;
    width: 960px;
}

/*
  Style for footer, 172 px height
*/
#footer
{
    width:100%;
    height:172px;			/* Height of the footer */
    background:#0b3a5b;
}

#wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 270px;}  /* must be same height as the footer */

#footer {position: relative;
         margin-top: -172px; /* negative value of footer height */
         height: 182px;
         clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: ".";
                 display: block;
                 height: 0;
                 clear: both;
                 visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/*
  Bottom table with contact information.
*/
#contactTable tr td
{
    padding-right: 10px;
    padding-top: 20px;
}

#contactTable
{
    margin-left: -8px;
}

#copyright
{
    color: #859dad;
    font-size: 10px;
    font-family: Arial;    

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
}

/*
  Table with 3 column layout
*/
table.layout
{
    padding-top: 65px;
    padding-bottom: 40px;
    padding-left: 0px;
    padding-right: 0px;
}

table.layout tr td
{
    padding-left: 20px;
    padding-top: 0px;
    vertical-align: top;
    width: 320px;
}

/*
  Table with 2 column layout
*/
table.layout2
{
    padding-top: 65px;
    padding-bottom: 40px;
    padding-left: 0px;
    padding-right: 0px;
}

table.layout2 tr td
{
    padding-left: 20px;
    padding-top: 0px;
    vertical-align: top;
    padding-bottom: 30px;
}

table.contacttable tr td
{
    padding-top: 4px;
}

p, #termsconditions, #termsconditions li
{
    color: white;
    text-align: left;
    letter-spacing: 1px;
    line-height: 18px;
    word-spacing: 1px;
}

table.layout2 tr td li
{
    color: white;
    text-align: left;
    letter-spacing: 1px;
    line-height: 18px;
    word-spacing: 1px;
}

/*
  Bottom navigation bar class
*/
#navigation
{
    background-image: url(.././img/navigation_back.png);
    background-repeat: no-repeat;
    width: 960px;
    height: 35px;
}
/* prev next buttons */
#prev, #next
{
    width: 111px;
    height: 30px;
}

/*text in center of bottom navigation*/
#centertext
{
    width: 738px;
    text-align: center;
}

/*
  Terms and condition class
*/
.conditions
{
    padding-top:60px;
    padding-bottom: 80px;
    padding-right: 20px;
    padding-left: 20px;
}

#termsconditions
{
    margin-left: 20px;
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
}

/*
   Style for Horizontal Rule - used in Step 2
*/
hr
{
    clear : both;
    color : #5e9fcd;
    background : inherit;
    height : 2px;
    border-top : solid 2px #5e9fcd;
    border-bottom : none;
}

/*
  style for select component
*/
select
{
    width: 224px;
    background-color: #ffeb99;
    border-width: 0px;
}

input
{
    width: 224px;
    background-color: #ffeb99;
    border-width: 0px;
}
/*
  blue border of input elements
*/
.selectborder
{
    background-image:url(.././img/selector_back.png);
    width: 238px;
    height: 22px;
    background-repeat: no-repeat;

    padding-left: 7px;
    padding-right: 7px;
    padding-top: 7px;
    padding-bottom: 7px;
    float: left;
}

/*custom checkboxes*/
.customcheckbox {
    width:35px;
    height:33px;
    background:url(.././img/checkboxes.gif) no-repeat;
    cursor:pointer;
    overflow:hidden;
    position:relative; /* IE fix to hide overflow */
    background-color: transparent;
}

.checkbox {
    position:relative;
    top:33px;
    left:30px;
    background-color: transparent;    
}

.checked {
    background-position:0px -33px !important;
    }

/*
  Contact elements in contact page
*/
table tr td.contactElement
{
    width: 320px;
    padding-left:20px;
    padding-top: 30px;
}

/*
  Text area wrapper
*/
.textareaborder
{
    background-image: url(.././img/textarea.png);    
    width: 867px;
    height: 225px;    
}