/*
    Document   : crossword
    Created on : 04.07.2012, 15:03:45
    Author     : k-kombinat
    Description:
        Purpose of the stylesheet follows.
*/

/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/**
NAVIGATION
**/
#content-navigation .navinfo {
    cursor: pointer;
}
#mcs_container .customScrollBox li div img {
    border: 1px solid green;
    height: 35px;
}
#paging {
    bottom: 0;left: 125px;position: absolute;
}
#paging img {
    vertical-align: middle;cursor: pointer;
}
#paging img#pleft {
    margin-right: 60px;
}
#paging img#pright {
    margin-left: 60px;
}
/**
INTERACTION
**/

#mcs2_container {
    border: 0 none;
    height: 400px;
    left: 0;
    margin: 0;
    padding: 0;
    top: 0;
    width: auto;
}
#mcs2_container .customScrollBox {
    width: 560px;
}
#mcs2_container .customScrollBox .container{
    width: 550px;
}
#mcs2_container .dragger {
    background-color: #015B7E;
}
#mcs2_container .dragger_container {
    cursor: pointer;
    float: left;
    height: 300px;
    margin: 10px 0 0 0;
    position: relative;
    width: 0;
    top: 94px;
}
#mcs2_container .customScrollBox img {
    border: none;
}


#content-interaction {
    left: 280px;position: absolute;top: 28px;height: 450px;
    width: 560px; border-radius:10px;
    moz-box-shadow: 4px 4px 4px #888;
    -webkit-box-shadow: 4px 4px 4px #888;
    box-shadow: 4px 4px 4px #888;
}
#searchimages {
    position: relative;
}
#searchimages .background {
   height: 900px;width: 560px;border-radius:5px;-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
#scrollable_content {
    height: 400px;position: absolute;
}
#searchimages #image1 {
    background: url(../media/uploads/images/background_image1.png) no-repeat transparent;
}
#searchimages #image2 {
    background: url(../media/uploads/images/background_image2.png) no-repeat transparent;
}
#searchimages #image3 {
    background: url(../media/uploads/images/background_image3.png) no-repeat transparent;
}
#searchimages #image4 {
    background: url(../media/uploads/images/background_image4.png) no-repeat transparent;
}
#searchimages img {
    cursor: pointer;
}
#searchimages img.deactivated {
    opacity: 0.3;filter:alpha(opacity=30);
}

/**
 IMAGE 1
**/
#searchimages #image1 img[rel="layer_1"],
#searchimages #image1 img[rel="layer_1"].hover {
    left: 197px;position: absolute;top: 226px;
}
#searchimages #image1 img[rel="layer_2"],
#searchimages #image1 img[rel="layer_2"].hover {
    position: absolute;right: 137px;top: 510px;
}
#searchimages #image1 img[rel="layer_3"],
#searchimages #image1 img[rel="layer_3"].hover {
      left: 316px;position: absolute;top: 527px;
}
#searchimages #image1 img[rel="layer_4"],
#searchimages #image1 img[rel="layer_4"].hover {
    position: absolute;right: 147px;top: 581px;
}
#searchimages #image1 img[rel="layer_5"],
#searchimages #image1 img[rel="layer_5"].hover{
     left: 470px;position: absolute;top: 727px;
}
#searchimages #image1 img[rel="layer_6"],
#searchimages #image1 img[rel="layer_6"].hover{
    left: 196px;position: absolute;top: 171px;
}

/**
 IMAGE 2
**/
#searchimages #image2 img[rel="layer_1"],
#searchimages #image2 img[rel="layer_1"].hover {
    left: 315px;position: absolute;top: 512px;
}
#searchimages #image2 img[rel="layer_2"],
#searchimages #image2 img[rel="layer_2"].hover {
    left: 315px;position: absolute;top: 547px;
}
#searchimages #image2 img[rel="layer_3"],
#searchimages #image2 img[rel="layer_3"].hover {
    left: 362px;position: absolute;top: 693px;
}
#searchimages #image2 img[rel="layer_4"],
#searchimages #image2 img[rel="layer_4"].hover{
    left: 315px;position: absolute;top: 728px;
}
#searchimages #image2 img[rel="layer_5"],
#searchimages #image2 img[rel="layer_5"].hover{
     left: 195px; position: absolute;top: 173px;
}

/**
 IMAGE 3
**/
#searchimages #image3 img[rel="layer_1"],
#searchimages #image3 img[rel="layer_1"].hover {
     left: 316px;position: absolute;top: 510px;
}
#searchimages #image3 img[rel="layer_2"],
#searchimages #image3 img[rel="layer_2"].hover {
     left: 315px;position: absolute;top: 564px;
}
#searchimages #image3 img[rel="layer_3"],
#searchimages #image3 img[rel="layer_3"].hover {
     left: 317px;position: absolute;top: 600px;
}
#searchimages #image3 img[rel="layer_4"],
#searchimages #image3 img[rel="layer_4"].hover{
    left: 317px;position: absolute;top: 727px;
}
#searchimages #image3 img[rel="layer_5"],
#searchimages #image3 img[rel="layer_5"].hover{
       left: 317px;position: absolute;top: 762px;
}
#searchimages #image3 img[rel="layer_6"],
#searchimages #image3 img[rel="layer_6"].hover{
       left: 197px;position: absolute;top: 171px;
}

/**
 IMAGE 4
**/
#searchimages #image4 img[rel="layer_1"],
#searchimages #image4 img[rel="layer_1"].hover {
     left: 401px;position: absolute;top: 513px;
}
#searchimages #image4 img[rel="layer_2"],
#searchimages #image4 img[rel="layer_2"].hover {
     left: 313px;position: absolute;top: 512px;
}
#searchimages #image4 img[rel="layer_3"],
#searchimages #image4 img[rel="layer_3"].hover {
     left: 313px;position: absolute;top: 531px;
}
#searchimages #image4 img[rel="layer_4"],
#searchimages #image4 img[rel="layer_4"].hover{
     left: 312px;position: absolute;top: 548px;
}
#searchimages #image4 img[rel="layer_5"],
#searchimages #image4 img[rel="layer_5"].hover{
    left: 195px;position: absolute;top: 164px;
}
#searchimages #image4 img[rel="layer_6"],
#searchimages #image4 img[rel="layer_6"].hover{
    left: 194px;position: absolute;top: 253px;
}