/**********************************************************************************************

	Title: EzyVault
	Author: Hege Røkenes hege@rokenes.com www.hege.rokenes.com, for EzyLib
	Date: March 2009

***********************************************************************************************

	1. Global Reset
	2. General Elements
    3. Layout elements
	4. Layout
            4.1 Main Structure
			4.1 Accessibility menu
			4.2 Masthead
			4.3 Primary content
			4.4 Sidebar
			4.5 Footer
			4.8 Developer CSS
	5. Custom Campaign Classes
		
***********************************************************************************************/

/* PLEASE MAKE SURE THAT IF YOU MAKE CHANGES, YOU MAKE THEM FOR THE DOCSECURE CSS TOO!!!!! Thanks, Josh.*/

/* 1. Global Reset
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, images, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

	ol, ul 
	{
	    list-style-position: outside;
	    padding-left: 30px;
	    margin: 15px 0;
	    }
	    
	    ol li, ul li {margin: 0px 0;}
	
	table {
		border-collapse: separate; 
		border-spacing: 0;
	    }

	caption, th, td {
		text-align: left; 
		font-weight: normal;
	    }


/* 2. General Elements
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	hr {
	    border: solid 1px #49c6e9;
	    margin: 15px 0;
	    }
	
	strong {font-weight: bold;}
		
	em {font-style: italic;}
	
	address {}

	input, textarea, select {}

	a {
	    color: #31859c;
	    text-decoration: underline;
	    }

	a:visited {}

	a:hover, a:focus, a:active {
	    background-color: #31859c;
	    color: white;              
        }

 /* class for PIN Buttons */
    .pinbtn {
        background-image: url(pinBtn.jpg);
        background-color:Transparent;
        border: 0 none;
        height: 25px;
        width: 117px;
        color: White;
        margin: 7px 0 10px 0;
        }
    
     .pinbtn:hover {background-image: url(pinBtnHover.jpg);}   


    /* class needs to be added in code to work in IE6 */
    .btn, input[type=submit] {
        background-image: url(contentBtn.png);
        background-color:Transparent;
        border: 0 none;
        height: 22px;
        width: 117px;
        color: White;
        margin: 7px 0 10px 0;
        }
        
     /*class needs to be done in code to work on IE6 */   
     .btn:hover {background-image: url(contentBtnHover.png);}   
    
     
/* 3. Layout elements
-----------------------------------------------------------------------------------------------
===============================================================================================*/

	h1, h2, h3, h4, h5, h6 {}
	
	h1, a h1 {
	    color: #31859c;
	    padding-left: 18px;
	    background-image: url(h1.gif);
	    background-repeat: no-repeat;
	    background-position: left;
	    margin: 20px 0 10px 10px;
	    font-size: 1.4em;
	    }  
	    
	h2, a h2 {
	    font-weight: bold;
        color:#31859c;
        /*text-transform: uppercase; */
        margin-bottom: 5px;
        display: inline-block;
        text-decoration: none!important;
	    }
	    
	    a:hover h2 {
        color:white;
        background-color: #31859c;
	    }     
	    
	h3 {margin: 30px 0 0 10px;}       

/* 4. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/		
	html {min-height: 100%;}
	
	body {
	    font-family: Trebuchet MS, Verdana, Arial, Sans-Serif;
	    font-size:0.8em;
	    color: Black;
	    background-image: url(mainBg.gif);
	    background-position: bottom;
	    background-repeat: repeat-x;
	    }
	    
/* 4.1	Main structure
-----------------------------------------------------------------------------------------------*/	
    #mainContainer {
        width:990px; 
        margin-left: auto;
        margin-right: auto;
        background-color:White;
        background-image: url(watermarkBg.gif);
        background-position: bottom right;
        background-repeat: no-repeat;
        top:0px;
        position:static;	
        }
        
        .masthead {
            height: 155px;
            background-image: url(headerBg.jpg);
            background-repeat: no-repeat;
            background-position: top;
            position: relative;
            background-color: White;
            }    
        
            /* are you planning to have a dynamic title on the page? */
            #titleContainer {
	            height: 80px; 
	            width: 100%; 
	            margin: 0;
                }
            
            #menuContainer {
                border-top: 1px solid #31859c;
                border-bottom: 1px solid #31859c;
	            width: 100%; 
	            margin: 0;
	            padding: 0;
	            position: absolute;
	            bottom: 0;
                }
    
    #bodyContainer { 
	    vertical-align:top;
	    padding-top: 20px;
	    padding-bottom: 60px;
	    display: table;
	    margin-left: auto;
	    margin-right: auto;
	    width: 950px;
        }
        
    #footerContainer {
	    width: 100%; 
	    margin: 0;
	    clear: both;
	    padding-top: 15px;
	    padding-bottom: 15px;
	    background-image: url(footerBorder.gif);
	    background-position: top;
	    background-repeat: repeat-x;
	    font-size: 0.9em;
	    text-align: right;
	    color: #b7cac0;
	    text-align: center;
        }
	

/* 4.2	Accessibility menu
-----------------------------------------------------------------------------------------------*/	

	#accessibility-links {
		position: absolute;
		left: -1000em;
		text-align: left;
	    }


/* 4.3	Masthead
-----------------------------------------------------------------------------------------------*/	
    #userinfoContainer {
        height: 20px; 
        width: 99%;
        vertical-align:middle;
        text-align:right;
        color: White !important;
        font-size: 0.9em;
        }
        
    /*    
    .logo {
        display: inline;
        position: absolute;
        top: 20px;
        left: 40px;
        }
      
     */
     
     .logo {
        display: inline;
        position: absolute;
        top: 2px;
        left: 35px;
        }
      
     

/* 4.4	Navigation
-----------------------------------------------------------------------------------------------*/

    ul.AspNet-Menu {list-style-type: none;}
    
        li.AspNet-Menu-Leaf {
            float: left;
            margin:0!important;
            }
            
            li.AspNet-Menu-Leaf a {
                color: Black;
                font-weight: bold;
                text-decoration: none;
                font-size:14px;
                padding: 10px 15px;
                } 
            
            li.AspNet-Menu-Leaf a:hover, li.AspNet-Menu-Leaf a:focus, li.AspNet-Menu-Leaf a:active {
                background-color: #2f829a;
                color: White;
                }        
                

/* 4.5	Primary Content
-----------------------------------------------------------------------------------------------*/	
	
    /* Status messages */
    span.infoMsg, span.errorMsg, span.successMsg 
    {
        font-weight:bold;
        border: 2px dashed;
        padding: 10px;
        display: block;
        }

    span.infoMsg {
        color:Black;
        border-color: Black;
        }
    span.errorMsg {
        color:Red;
        border-color: Red;
        }
        
    span.successMsg {
        color:#2f829a;
        border-color: #2f829a;
        }
    div.errorMsg
    {
				font-weight:bold;
        color:Red;
        border-color: Red;
        margin:10px;
    }
    div.errorMsg li
    {
        border: 2px dashed;
        padding: 10px;
        display: block;	
        color:Red;
        border-color: Red;
        margin-top:10px;
    }
    /* /Status messages */   


    /*  Landing page, user status: NOT logged in */
     div.highlights {
         height: auto;
         float: left;
         width: 25.5%;
         margin-top: 20px;
         background-image: url(gradientColumn.gif);
         background-position: top;
         background-repeat: repeat-x;
         padding: 0 25px;
         }
     
     div#highlight1, div#highlight2 {
         margin-right: 20px;
         margin-left: 10px;
         }
         
     div#highlight2 {}
         
     div#highlight3 {}
     
     h2.highlightsHeading a, h2.highlightsHeading {
         padding: 30px 0px;
         text-align: left;
         text-decoration: none;
         color: Black;
         height: 30px;
         }
         
         h2.highlightsHeading{font-size: 1.2em;}
         
    h2.highlightsHeading a:hover {
        background-color: Transparent;
        color: White;
        }
    
    /*  /landing page, user status: NOT logged in */
     
     
    /* Landing page, user status: logged in */
    div#vaultHightlight {
        position: relative; 
        height: 50px; 
        margin-bottom: 20px;
        }

        #vaultHightlight a#ctl00_body_LinkButtonVault {
            position: relative;
            top: 20px; 
            left: 230px;
            text-decoration: none;
            }
        
        #vaultHightlight p  {
            position: absolute; 
            left: 230px;
            right:15px;
            text-align:justify;
            /* width: 695px; */
            top: 40px;          
            }
        
        #vaultHightlight input {
            position: absolute; 
            border: 10 none;
            }
            
            #vaultHightlight #ctl00_body_hypVault {
                position: absolute; 
                height: 25px;
                bottom: 5px;
                right: 0;
                display: inline; 
                padding: 13px 15px 10px 10px;
                font-size: 1.2em;
                font-weight: bold;
                text-decoration: none;
                width: 200px;
                background-image: url(blueArrow.gif);
                background-position: right;
                background-repeat: no-repeat;
                }
                
            #vaultHightlight #ctl00_body_hypVault2 {
                position: absolute; 
                height: 25px;
                bottom: 5px;
                right: 0;
                display: inline; 
                padding: 13px 15px 10px 10px;
                font-size: 1.2em;
                font-weight: bold;
                text-decoration: none;
                width: 200px;
                background-image: url(blueArrow.gif);
                background-position: right;
                background-repeat: no-repeat;
                }
                
                #vaultHightlight a:hover#ctl00_body_hypVault {background-image: url(blueArrowHover.gif);}
                
                #vaultHightlight a#goToVault span.title  {
                    position: absolute;
                    left: 5px;
                    top: 7px;
                    width: 175px;
                    }
                
                #vaultHightlight a#goToVault img#ctl00_body_Image2 {
                    border: 0 none;
                    position: absolute;
                    right: 7px;
                    top: 3px;
                    }
                    
                     #vaultHightlight1  {
                position: absolute;
                height: 25px;
                bottom: 5px;
                right: 0;
                display: inline;
                padding: 13px 15px 10px 10px;
                text-transform: uppercase;
                font-size: 1.2em;
                font-weight: bold;
                text-decoration: none;
                width: 190px;
                background-image: url(blueArrow.gif);
                background-position: right;
                background-repeat: no-repeat;
                }
                
                #vaultHightlight1 a:hover {background-image: url(blueArrowHover.gif);}
                    
     /*buttons*/               
    div#ctl00_body_DataListTools table {
        border: 0 none;
        border-collapse: collapse;
        width: 950px;
        }

    div#ctl00_body_DataListTools table tbody tr td {
        width: 49%;
        position: relative;
        height: 150px; 
        display: block;
        float: left;
        }
        
        div#ctl00_body_DataListTools table tbody tr td input {
            border: 3px solid yellow;
            position: absolute;
            left: 0px;
            top:0px;
            }
            
        div#ctl00_body_DataListTools table tbody tr td a h2  {
            position: absolute;
            left: 140px;
            top: 10px;
            }
        
        div#ctl00_body_DataListTools table tbody tr td p {
            position: absolute;
            left: 140px;
            top: 25px;
            }   
        /*/buttons*/              
    /* /Landing page, user status: logged in */


    /* login, sign up and change password */
    div.AspNet-ChangePassword div span, div.AspNet-CreateUserWizard div span, div.AspNet-Login div span {
        font-weight: bold;
        color:#31859c;
        text-transform: uppercase;
        margin-bottom: 5px;
        display: inline-block;
        }

    div div label {
        width: 160px;
        display: inline-block;
        border-bottom: 1px solid #e3e9ef;
        }
        
    /* Add class .textField to input field to get css styling in IE6 */    
    div div input[type=text], div div input[type=password], .textField {width: 150px;}    

    label em {font-style: normal;}
    /* /login, sign up and change password */    
       
        
    /* Grids */
    #ctl00_body_gvTest table {
        width:950px;
        border-collapse: collapse;
        }
        
        #ctl00_body_gvTest tr th {
            background-image: url(gridHeader.gif); 
            background-repeat: repeat-x;
            height: 25px;
            text-align: left;
            padding: 3px 0 0 2px;
            border-bottom: 1px solid white;
            }
            
            #ctl00_body_gvTest tr td {
                border: 1px solid #bcd7df;
                padding-left: 3px;
                }
                
                
	.gridLayout {
        width:100%;
        border-collapse: collapse;
        }
        
       .gridLayout tr th {
            background-image: url(gridHeader.gif); 
            background-repeat: repeat-x;
            height: 25px;
            text-align: left;
            padding-left: 2px;
            padding-top: 3px;
            border-bottom: 1px solid white;
            }
            
            .gridLayout tr td {
                border: 1px solid #bcd7df;
                padding-left: 3px;
                }	  
                
            .formLayout td {
                padding: 2px;
                }	                
    /* /Grids */ 
    
    
    /* Fake popup */
    div.fakePopup {padding: 10px 20px 40px 20px;}
    
        div.fakePopup h2 {padding-top: 10px;}
            
        div.fakepopup hr {margin: 5px 0!important;}    
        
        div.fakePopup img {
            float: left;
            padding: 0 5px 0 0px;
            }
            
        ul.controlbuttons li {margin:1px;}
	/* /Fake popup */
					
/* 4.6	Sidebar
-----------------------------------------------------------------------------------------------*/

	#sidebar {}


/* 4.7	Footer
-----------------------------------------------------------------------------------------------*/	

	#footer {}   
		
/* 4.8	Developer CSS
-----------------------------------------------------------------------------------------------*/
	/* Blank classes for doc lib*/
.FilesBorderStyle{}
.vaultusage{}
.UpdateImage{}

.TabPage
{ 
	border-width:1px;
	border-style:solid;
	border-color:Gray;
	width:95%;
	padding:15px;
}

/* 4.9	Letters CSS
-----------------------------------------------------------------------------------------------*/
#LettersContainer {
        width:706px; 
        margin-left: auto;
        margin-right: auto;
        background-color:White;
        background-image: url(watermarkBg.gif);
        background-position: bottom right;
        background-repeat: no-repeat;
        }
        
        #LettersbodyContainer { 
	    vertical-align:top;
	    padding-top: 20px;
	    padding-bottom: 60px;
	    display: table;
	    margin-left: auto;
	    margin-right: auto;
	    width: 704px;
        }

/* 4.10	Signup Page
-----------------------------------------------------------------------------------------------*/	
.psAverage
{
	color: #00008B;
}
.psVPoor
{
	color: #DC143C;
}
.psWeak
{
	color: #DAA520;
}
.psStrong
{
	color: Green;
}
.psExel
{
	color: #006400;
}
.productsList label
{
	white-space:nowrap;width:300px;padding-bottom:5px;}
.standardList label
{
	white-space:nowrap;width:80px;padding-bottom:0px;}
.fieldDetail 
{
   font-style:italic;
   color:Gray;
   font-size:small;
   width:auto;
}
.fieldLabel
{
   font-style:italic;
   color:Black;
   font-size:small;
   white-space:nowrap;
}
.fieldLabel label
{
  width:auto;
}
.sectionLabel
{
   color:Gray;
   font-weight:bold;
}
		
/* 4.0 Campaign Classes */


.DefaultHeader {
    height: 155px;
    background-image: url(headerBg.jpg);
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
    background-color: White;
    }