/* 
Document   : Reflect.css
Created on : Jan 4, 2008, 6:32:35 PM
Author     : pafilis
Description:
*/

/* ---------------- global ---------------- */
/* ---------------------------------------- */
.rightAlign {
        text-align: right;
}

.leftAlign {
        text-align: left;
}

.greyText {
        color: gray;
}

.greyBackground {
        background-color: #dfdfdf;
}

.smallFont {
        font-size: 10px;
}

.floatRight{
        float: right;
}

.floatLeft{
        float: left;
}

.clearFloat {
        clear: both;
}

*{
        list-style: none;        /* no bullets or numbering */
 
        /* normal size, sans-serif fonts */
        /* ----------------------------- */
        font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: 12px;
}

/* ---------------- body style ---------------- */
/* -------------------------------------------- */
body {
        margin: 0; 
        min-width: 900px;     
        text-align: center; /* for IE */
        
}


/* --------------- image style ---------------- */
/* -------------------------------------------- */
img {    
        border: none;        
}


/* ---------------- div styles ---------------- */
/* -------------------------------------------- */

div {

        margin: 0px auto;                /* imposes the same behaviour on all browsers */
        padding: 0px;                    /* imposes the same behaviour on all browsers */
        overflow: hidden;                /* Important for IE that doesnt respect small div heights
        overflow: whether an element should be cut off or not if it is too big 
        "hidden": it chops off the extra bits */
}

div.hidden {
        display: none;
}

div.red {
        color: #ff0000;
}


div.smallHeight {
        height: 24px;                    /* same as the height of the input field */
}

div.mediumHeight {
        height: 150px;                   
}

div.largeHeight {
        height: 400px;                   
}

div.fullWidth {
        width: 100%;
}

div.largeWidth {
        width: 400px; /* 500px */
}

div.smallMarginAboveAndBelow {
        margin-top: 20px;
        margin-bottom: 20px;
}

div.mediumMarginAboveAndBelow {
        margin-top: 100px;
        margin-bottom: 100px;
}
div.mediumMarginLeftAndRight {
        margin-left: 100px;
        margin-right: 100px;
}

div.smallMarginLeftAndRight {
        margin-left: 7px;
        margin-right: 7px;
}

div.whiteBackground {
        background-color: #ffffff;
}
div.greyBackground {
        background-color: #dfdfdf;
}
div.greyBorder{
        border-top-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-right-style: solid;
        
        border-top-width: 2px;
        border-bottom-width: 2px;
        border-left-width: 2px;
        border-right-width: 2px;
        
        border-top-color: #bdbdbd;
        border-bottom-color: #bdbdbd;
        border-left-color: #bdbdbd;
        border-right-color: #bdbdbd;
}


div.mediumWidthContainer{
        width: 300px;	                 /* 290 > div.container's( 2*width + 2*padding + width) */
        margin: 0px auto 0px auto;	 /* center, and sets top and bottom spacing */
        padding: 0px;
        /*height: auto;*/
}

div.largeWidthContainer{
        width: 455px; /* 644px */        /* as wide as the download error instruction image */      
        margin: 0px auto 0px auto;	 /* center, and sets top and bottom spacing */
        padding: 0px;
}
div.container {
        
        /* width: 900px; */
        min-width: 700px;
        max-width: 900px;

        margin-top: 50px;
        padding: 5px;
        background-color: #dfdfdf;  
                
        position: relative;
        left: auto;
        right: auto;
      
}

div.title {
        background-color: #bdbdbd;  

        text-align: left;
        
        border-top-style: solid;
        border-top-width: 2px;
        border-top-color: #666;

        padding-top:    5px;
        padding-bottom: 5px;
        padding-left:   2px;
        padding-right:  2px;
}

div.titlePadding4px{
        background-color: #bdbdbd;  

        text-align: left;
        
        border-top-style: solid;
        border-top-width: 2px;
        border-top-color: #666;

        padding-top:    4px;
        padding-bottom: 4px;
        padding-left:   4px;
        padding-right:  4px;
}



div.title a{
        text-decoration: none;
}

div.content {

        margin-left: 0px;
        margin-right: 0px;
        
        margin-bottom: 30px;
        min-height: 50px;
        padding-top: 5px;
        
        text-align: justify;
        background-color: #dfdfdf;
}

div.textCentered {
        text-align: center;
}

div.smallTopMargin {
        margin-top: 24px;
}


/* ---------------- specific div styling ---------------- */
#reflect_top {
        height: 80px;
        text-align: center; /* used for centering nested element without specifed right, left margins */
        position: relative; /* So that elements INSIDE this div can be positioned relative to it using "absolute positioning */
                            /* stops the navigation-div from floating over the input form */
                            /* the navigation-div will be placed with a relative distance 
                                from the right side of a fixed-width-box. 
                                If the latter were the case the navigation-div, would have
                                been placed in relation to the body which is resizable and 
                                causes the overlap*/
}

#reflect_top_navigation {      
        position: absolute; /* absolute distances from "reflect-top" space */
        right: 30px;
        top: 32px;
}


#reflect_top_inputForm {      
        position: relative;
        top: 29px;
}

#reflect_urlInputField {
        width: 260px;
        height: 20px;
        background-image: url('../img/input_field.png');
        border: none;
        /* color: grey; */
}

#reflect_top_navigationBarLeftImgHolder {
        position: absolute;
        left: 0px;
        top: 0px;
}


#reflect_top_navigationBarRightMiddleImgHolder{
        position: absolute;
        top: 0px;
        right: 45px;
        width: 830px;
        height: 80px;
        text-indent:-3000px; /* moves any text 3000 px away */
        overflow:hidden;
        text-decoration:none;
        
        background-image: url('../img/navigation_bar_background.png'); 
        background-repeat: repeat-x;
}

#reflect_top_navigationBarLeftMiddleImgHolder{
        position: absolute;
        top: 0px;
        left: 625px;
        width: 216px;
        height: 80px;
        text-indent:-3000px; /* moves any text 3000 px away */
        overflow:hidden;
        text-decoration:none;
        
        background-image: url('../img/navigation_bar_background.png'); 
        background-repeat: repeat-x;
}



#reflect_top_navigationBarRightImgHolder {
        position: absolute;
        right: 0px;
        top: 0px
}

/* --------link style, Google-like ---------------- */
/* ------------------------------------------------ */

:link {                                   /* normal link */
        color: #003399;
        border-bottom: none; 
        font-weight: normal; 
}
:visited, :visited:focus {  		  /* visited */
        color: #666699;
        border-bottom: none; 
        font-weight: normal; 
}
:link:hover, :visited:hover {		  /* hover  */
        color: #FE880C;
}

:link:active, :visited:active {		  /* active (i.e. just after clicking)  */
        color: #666699;
}


/* -------  specific link settings ------- */
/* --------------------------------------- */


/* basic image replacement technique:        */
/* replacing the text in this links with img */
/* approach: negative CSS letter-spacing     */
/* ----------------------------------------- */

#reflect_top_navigation_helpLink,
#reflect_top_navigation_helpLink:visited {
        background: url('../img/help_off.png') 0 0 no-repeat;
        width: 58px; 
        height: 24px;
        padding-right: 0px;

}

#reflect_top_navigation_helpLink:hover,
#reflect_top_navigation_helpLink:active {
        background: url('../img/help_on.png') 0 0 no-repeat;
        width: 58px; 
        height: 24px;
        
        
        /* since the "on version of the img is 10px larger, on hover it has
        to be pushed up by 5px to remain vertically centered */
        position: relative; 
        /* top: -5px; */
        
}

#reflect_top_navigation_aboutLink,
#reflect_top_navigation_aboutLink:visited {
        background: url('../img/about_off.png') 0 0 no-repeat;
        width: 58px; 
        height: 24px;

}

#reflect_top_navigation_aboutLink:hover,
#reflect_top_navigation_aboutLink:active {
        background: url('../img/about_on.png') 0 0 no-repeat;
        width: 58px; 
        height: 24px;
        
        
        /* since the "on version of the img is 10px larger, on hover it has
        to be pushed up by 5px to remain vertically centered */
        position: relative; 
        /* top: -5px; */
        
}

#reflect_top_navigation_downloadLink,
#reflect_top_navigation_downloadLink:visited {
        background: url('../img/download_off.png') 0 0 no-repeat;
        width: 120px; /* 82px */
        height: 24px; /* 13px */
        padding-right: 0px;
        vertical-align: middle;

}

#reflect_top_navigation_downloadLink:hover,
#reflect_top_navigation_downloadLink:active {
        background: url('../img/download_on.png') 0 0 no-repeat;
        width: 120px; 
        height: 24px;
        
        
        /* since the "on version of the img is 10px larger, on hover it has
        to be pushed up by 5px to remain vertically centered */
        position: relative; 
        /* top: -5px; */
}


#reflect_top_navigation_downloadLink,
#reflect_top_navigation_aboutLink,
#reflect_top_navigation_helpLink {
        display: block;
        text-indent:-3000px; /* moves any text 3000 px away */
        overflow:hidden;
        text-decoration:none;
        float: left;
        border: none;
} 

#reflectButton,
#reflectButton:visited {
        background: url('../img/reflect_navigation_bar_off.png') 0 0 no-repeat;
        text-indent: -3000px; /* moves any text 3000 px away */
        letter-spacing :-1000px;
        overflow:hidden;
        text-decoration:none;

       
        width: 84px; /* 82px */
        height: 25px; /* 22px */

        border: 0px;
        
        /* centers the button in relation to the input field */
        position: relative;
        top: 4px;
        left: 6px;
        
        
        
        cursor: pointer;  /*  FF  */
        cursor: hand;     /*  IE  */  
}

#reflectButton:hover,
#reflectButton:active {
        background: url('../img/reflect_navigation_bar_on.png') 0 0 no-repeat; 
}



/* --- Start page styles --- */
/* ------------------------- */


#reflect_startPage_reflectLogoImageHolder {
        position: relative;
        right: auto; 
        left: auto;
}


/* --- common page styles --- */
/* ------------------------- */

#reflect_footer {
        position: relative;
        right: auto;
        left: auto;
}

/* --- About page styles --- */
/* ------------------------- */
#Reflect_about_sampleImageContainer {
        width: 416px; /* required for proper IE floating */
}


/* --- Non supported download  page styles --- */
/* ------------------------------------------- */
#Reflect_download_nonSupported_messageContainer {
        width: 416px; /* required for proper IE floating */
}


/* --- IE download  page styles --- */
/* -------------------------------- */
#Reflect_download_ie_messageContainer {
        width: 416px; /* required for proper IE floating */
}