/* 
   Layout 
------------------------------------------------------------------- */

/* General zde je sirka stranky*/
#layout_wrapper_outer {   background: url('components/layout_wrapper_outer.png') no-repeat center top;}   /* Hlavicka stranky */

#layout_wrapper {
    color: #FFF;
    margin: 0 auto;
    width: 1198px;		
}

#layout_top {
    height: 114px;  
}

#layout_body_outer {
    background: #373737 url('components/layout_body_outer.jpg') repeat-x;
}

#layout_body {
    background: url('components/layout_body.gif') no-repeat;
    padding: 8px 8px 0;
    /*
    border: 4px solid yellow;
    height: 700px;
    */
}

/* Site title */
#site_title {padding: 28px 12px 0;}
#site_title a {
    color: #73BCD1;
    text-decoration: none;
}
#site_title a:hover {color: #FFF;}
#site_title h1 {
    font-size: 2.4em;
    margin-bottom: 6px;
}
#site_title h1 span {color: #C0C6CF;}
#site_title h2 {
    font-size: 1.2em;
    color: #333; text-shadow: 1px 1px #FFF6BF;
}

/* Site subtitle */
#site_sub_title_div {
    position:relative; top:40px; left: 280px;
}

/* Navigation */
#navigation {
    background: #3A3A3A url('components/navigation.gif') no-repeat;
    font: bold 1.3em sans-serif;
    padding: 0 8px;
}
#navigation ul, #navigation li {display: inline;}
#navigation li {display: inline;}
#navigation a {
    float: left;
    margin-right: 1px;
    text-align: center;
    text-decoration: none;
}

#nav1 a {
    color: #BBB;
    padding: 10px 12px 12px;
}
#nav1 a:hover {color: #EEE;}
#nav1 li  a.active,#nav1 li.current_page_parent a {
    background: url('components/nav1_arrow.gif') no-repeat center bottom;
    color: #ADE7F6;	
    /*border: 5px solid yellow;*/
}

#nav2 a {
    color: #D0D6DA;
    padding: 10px;
}
#nav2 {
    background: #5090AE url('components/nav2.gif') repeat-x;
    margin: 0 -8px;
    padding: 0 8px;
}
#nav2 a:hover {color: #FFF;}
#nav2 li a.active  {color: #FFF;}


/* Main ~~~~~~~~~~~~~~~~~ Hlavni menu strnky ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/  
#main {
    background: url('components/main.gif') repeat-y;
    border-bottom: 1px solid #C5C5C5;
}

#main ol, #main ul {margin: 0 0 0 1.8em;}
#main ul li {list-style: disc;}
#main ol li {list-style: decimal;}
#main li {padding: 2px 0;}

#content_outer {
    border-top: 1px solid #FFF;
    width: 889px;
}
#content {	
    color: #444;
    padding: 16px;
}

#content ul {
    margin: 0 0 0 0.8em;
}

/* Sidebar */
#sidebar_outer {
    border-top: 1px solid #EEE;
    width: 259px;
}
#sidebar {
    color: #555;
    padding: 16px 12px;	
}
#sidebar a {color: #555;}
#sidebar a:hover {color: #000;}

/* Dashboard */
#dashboard {
    background: #CCC;
    border-top: 1px solid #D5D5D5;
    font-size: 0.9em;
}
#dashboard_inner {padding: 16px 20px 6px;}

#dashboard .col3 {width: 255px;}
#dashboard .col3mid {width: 337px;}
#dashboard .col3mid .col3_content {
    border-left: 1px solid #B5B5B5;
    border-right: 1px solid #B5B5B5;
    padding: 0 20px;
    margin: 0 20px;
}
#dashboard .col_title {
    color: #666;
    font-size: 1.4em;
    font-weight: bold;
    padding-bottom: 5px;
}

#dashboard li {
    color: #777;
    padding: 4px 0;
}
#dashboard li {border-top: 1px solid #BEBEBE;}
#dashboard li a {
    color: #666;
    text-decoration: none;
}
#dashboard li a:hover {
    color: #333;
    text-decoration: underline;
}


/* Footer links */
#footer {
    background: url('components/footer.gif') no-repeat;
    color: #777;        
    font-size: 0.9em;
    padding: 22px 8px 10px;
}
#footer a {color: #999;}
#footer .right, #footer .right a {
    color: #666;
    text-decoration: none;
}
#footer a:hover {color: #999;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Added gallery styles .... ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.gallerycontainer{
    position: relative;
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
    border: 1px solid white;
    margin: 0 5px 5px 0;
    float: left;
}

.thumbnail:hover{
    background-color: transparent;
}

.thumbnail:hover img{
    border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 100px;
    left: 230px; /*position where enlarged image should offset horizontally */
    z-index: 50;
}