/* 
    Document   : custom_style
    Created on : Jul 11, 2013, 1:06:36 PM
    Author     : Hubert
    Description:
        Purpose of the stylesheet follows.
*/

div.block2 {
    background-color: rgb(255, 255, 255);
    box-shadow: 8px 8px 18px rgb(179, 179, 179);
    padding: 40px;
    margin: 8px 0px 30px 0px;
    min-height: 70px;
    height: auto !important;
    transition: all 0.4s;
}

h4.title {
    border-left: solid 10px #7BC8D8;
    padding-left: 10px;
    text-shadow: 1px 0px 2px;
}

table.dataTable{
    border: 1px solid #ddd;
}

a.home_li {
    background: rgba(0, 0, 0, 0.34) !important;
    color: white !important;
    font-weight: 700;
}
/*This is css for 'tools'' page*/
.panel {
    float: left;
    width: 100%;
    min-height: 230px;
    height: auto !important;
    margin-bottom: 15px;
    /*margin: 10px;*/
    position: relative;
    font-size: .8em;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel .front {
    float: none;
    position: absolute;
    padding: 5px;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    /*box-shadow: rgb(187, 185, 185) 0px 0px 8px;*/
    height: 230px;
    /*overflow: auto;*/
    /*height: auto !important;*/
    border: 1px solid #ccc;
    background: rgb(247, 247, 247);
    text-align: center;
    /*-moz-box-shadow: 0 1px 5px rgba(245,245,245,0.9);*/
    /*-webkit-box-shadow: 0 1px 5px rgba(155, 155, 155, 0.9);*/
    /*box-shadow: 0 1px 5px rgba(150, 150, 150, 0.9);*/
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.panel.flip .front {
    z-index: 1;
    border-color: #eee;
    background: #fff;

    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);

    -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    background-color: #ffffff;
}

.panel .back {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    min-height: 230px;
    height: auto;
    border: 1px solid #ccc;
    background: rgb(240, 252, 255); 

    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;

    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    /* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */

    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #D7E4EF 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #D7E4EF 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top left, #FFFFFF 0%, #D7E4EF 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #D7E4EF));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D7E4EF 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D7E4EF 100%);
}

.panel.flip .back {
    padding: 10px;
    width: 100%;
    height: auto;
    z-index: 1;
    min-height: 230px;
    /*background: #e7e7e7;*/
    /* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */

    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #D7E4EF 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #D7E4EF 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top left, #FFFFFF 0%, #D7E4EF 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #D7E4EF));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D7E4EF 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D7E4EF 100%);
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);

    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    /*background-color: #e7e7e7;*/
}

.tool_profile {
    float: left; 
    width: 70%;
}
.tool_image {
    float: right; 
    width: 22%; 
    vertical-align: bottom
}
/*End of css for 'tool' page*/

/*font*/
code {
    font-family: monospace;
}

sub {
    vertical-align: sub;
    font-size: smaller;
}
pre, xmp, plaintext, listing {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}
sup {
vertical-align: super;
font-size: smaller;
}
/*End of font*/

/*modal window css*/
div#tool_modal {
    /* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */

    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #DCE5EF 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #DCE5EF 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top left, #FFFFFF 0%, #DCE5EF 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #DCE5EF));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #DCE5EF 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom right, #FFFFFF 0%, #DCE5EF 100%);
}
/*End of Modal window css*/

img.tool:hover {
    -webkit-transform: scale(2.1);
    -moz-transform: scale(3.1);
    -o-transform: scale(3.1);
    box-shadow: 0px 0px 5px gray;
    -webkit-box-shadow: 0px 0px 5px gray;
    -moz-box-shadow: 0px 0px 5px gray;
    opacity: 1;
}

/* override css of datatables */
table.dataTable tr.odd {
    background-color: #E5FFE2 !important;
}