/* 
----------------------------------------------
    Mizumedia Website Stylesheet
    Copyright: Mizumedia Technology, Inc. 2011
    Date: 8/8/2011
    Filename: style.css
    Linked from: SiteMasterPage.master
----------------------------------------------
*/

/* 
----------------------------------------------
    HTML Element Styles:
----------------------------------------------
*/

body, p, h1, h2, h3, h4, h5, h6, img, form, div, ul, li, ol, a
{
    margin:0;
    padding:0;
    outline:none;
    border:0;
    text-decoration:none;
    }

body 
{
    margin:0 auto;
    padding:0;
    text-align:center;
    background:#fff !important;
    font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
}

h1
{
    font-size:24px;
    line-height:1.2em;
    margin-top:1em;
    margin-bottom:1em;
    }

h2 
{
    font-size:22px;
    line-height:1.2em;
    margin-top:1em;
    margin-bottom:1em;
    }

h3 
{
    font-size:20px;
    line-height:1.2em;
    margin-top:1em;
    margin-bottom:1em;
    }

h4 
{
    font-size:18px;
    line-height:1.2em;
    margin-top:1em;
    margin-bottom:1em;    
    }

h5 
{
    font-size:16px;
    line-height:1.2em;
    margin-top:1em;
    margin-bottom:1em;    
    }

h6 
{
    font-size:16px;
    line-height:1.2em;
    margin-top:1em;
    margin-bottom:1em;
    }    
    
p, li 
{
    font-size:16px;
    }    

/*
----------------------------------------------
    Multi-use Classes:
----------------------------------------------
*/

.fltrt
{
    float:right;
    }
    
.fltlft 
{
    float:left;
    }    
    
.clearfloat 
{
    clear:both;
    }    


/*
----------------------------------------------
    Master Page Layout:

    Includes IDs:
                #wrap           =   Outter most div. Used simply to center content on the page. 
                #container      =   Just inside of the #wrap div. Used to set width of page (100%) and align text to the left.  
                #top            =   Div is absolutely positioned to the top, left of page and sets a min. width of 880 pixels to prevent Navigation text from stacking when browser window is shrunk.
                #top-wrap       =   Sets the width of the content inside this div to 980 pixels - the width of all the content of the site. 
                #header         =   Contains the content inside the #top div.
                #water          =   Contains background image of water and is parent div of remaining divs. 
                #mainContent    =   Contains page's primary content. Also contains two child divs, #left and #right.
                #footer         =   Contains footer content. 
----------------------------------------------
*/


#container 
{
    width:100%;
    margin:0px auto 15px;
    background:#EDF6FB url("images/waterback01.jpg") repeat-x;
    text-align:center;
    }
 

#top 
{
    margin-top:0;
    margin-right:auto;
    margin-left:auto;
    margin-bottom:0;
    width:980px;
    text-align:center;
}

*+html #top 
{
    z-index:inherit;
    }


#header 
{
    margin:0 auto;
    padding:10px;
    width:980px; 
    color:#fff;   
    }


#mainContent 
{
    width:980px;
    margin:0 auto; 
    margin-top:130px;
    text-align:left;
    min-height:480px;
}

#footer 
{
    margin-left:auto;
    margin-right:auto;
    color:#000;  
    text-align:center;
    background:#99a0a6;
    width:100%;
    float:left;
    }


/*
-----------------------------------------------
    Top, Header & Navigation Styles: 
                
    Includes IDs:
                #top
                #header
                #nav
-----------------------------------------------
*/

#top #header
{
    float:left;
    display:inline-block;
    }

#top #header .logo 
{
    float:left;
    display:inline;
    margin-left:0px;
    margin-top:15px;
    }       

#top #nav 
{    
   float:right;
   text-align:left;
   width:475px;
   margin:-85px 0px 0px 0px; 
   white-space:nowrap;  
    }
    
#top #nav ul
{
    list-style-type:none;
    display:inline;
    margin:0;
    padding:0;
    }    
    
*+html #top #nav ul 
{
    position:relative;
    }    
    
/* Top margin of -30 in order to move entire nav menu up to the top of the screen. 
   Top padding of 30 pixels to create borders on left side of each nav link.  */    
#top #nav ul li 
{
    display:inline;
    margin:-30px 5px 0px 5px;
    border-left:1px solid #fff;
    padding:30px 0px 0px 5px;
    white-space:nowrap;
    }   
   
*+html #top #nav ul li
{
    padding:30px 0px 0px 5px; 
    margin:0 5px 0 5px;
    }       
    
        
#top #nav ul li .dropmenu
{
    display:none;
    float:none;
    position:absolute;
    top:auto;
    left:auto;
    z-index:5000;
    margin:0 0 0 85px;
    background:#336699;
    border:1px solid #fff;
    }

*+html #top #nav ul li .dropmenu 
{
    margin-top:50px; 
    margin-left:-68px;
    display:none;
    position:absolute;
    z-index:20;
    top:auto;
    left:auto;
    }

#top #nav ul li ul li 
{
    border-left:none;
    display:block;
    float:none;
    margin:0px;
    width:16.5em;
    border-bottom:1px solid #999;
    padding:8px 5px;
    }   

#top #nav ul li ul li:hover 
{
    background:#0090EB;
    color:#fff;
    }   
    
#top #nav ul li a:link 
{
    color:#fff;
    text-decoration:none;
    }    

#top #nav ul li a:visited 
{
    color:#fff;
    text-decoration:none;
    }    

#top #nav ul li a:hover 
{
    color:#E3E3E3;
    text-decoration:none;
    }    

#top #header #nav ul li a:active 
{
    color:#fff;
    text-decoration:none;
    }    
    
#top #nav ul li a:visited:hover 
{
    color:#E3E3E3;
    text-decoration:none;
    }    

#top #nav p.phone 
{
    color:#fff;
    text-align:right;
    display:inline;
    margin-left:25px;
    }    
/*
-----------------------------------------------
    #mainContent Styles: These styles are the child elements (divs) of div id=mainContent

                Includes IDs:
                #left           =   Div for content on left half of pages. 
                #right          =   Div for content on right half of pages.
                #whitebox    
     
-----------------------------------------------
*/


#mainContent #left 
{
    width:40%;
    float:left;
    margin:0 0 0 0;
    text-align:left;
    padding:0 0 0 0;
    }

#mainContent #right 
{
    width:475px;
    float:right;
    margin:0 0 0 0;
    padding:0;
}    

    
#mainContent h1
{
    font-size:26px;
    font-family:Calibri;
    line-height:1.2em;
    margin-top:5px;
    margin-bottom:5px;
    color:#144474;
    }

#mainContent h2    
{
    font-size:24px;
    font-family:Calibri;
    line-height:1.2em; 
    margin-top:5px;
    margin-bottom:5px;
    color:#144474;   
    }
    
#mainContent #right h3, 
#mainContent #right h4,
#mainContent #right h5 
{
    color:#144474;  
    }      

#mainContent p   
{
    font-size:14px;
    line-height:1.8em;
    margin-top:1.5em;
    margin-bottom:1.5em;
    }  
    
#mainContent ul 
{
    list-style-type:none;
    margin:1.5em 0;
    padding:0
    
    }
#mainContent ul li 
{
    line-height:2em;
    font-size:16px;
    color:#284A6D;
    }
    
#mainContent ul li ul 
{
    margin-left:15px;
    }    

#mainContent a:link
{
    color:#284A6D;
    }            

#mainContent a:visited
{
    color:#284A6D;
    }            
    
#mainContent a:hover
{
    color:#6699FF;
    text-decoration:underline;
    }            

#mainContent a:active
{
    color:#284A6D;
    }            
    
#mainContent a:visited:hover
{
    color:#6699FF;
    }            

#mainContent .services-list li
{
    
    }    

#mainContent .services-list .active 
{
    font-weight:bold;
    }
    
 
    

    
/*
-----------------------------------------------
    Footer Styles:

            Includes IDs:
                    #footer         - stretches 100% across the bottom of the screen
                    #footer-wrap    - invisible wrapper to contain content within a width of 980 pixels
                    #social-media
                    #blog
            
            Includes Classes:            
                    .blog-title     - blog title
                    .blog-underline - image
                            
-----------------------------------------------
*/    

#footer #footer-wrap 
{
    width:980px;
    height:100px;
    text-align:center;
    margin:0 auto;
    background:#99a0a6; 
    font-family: Arial Narrow; 
    }


#footer #social-media
{
    text-align:left;
    padding:50px 10px 0 10px;   
    margin:0;
    width:43%;
    float:left;
    }
  
#footer #blog 
{
    float:right;   
    width:43%; 
    padding:10px;        
    }    

#footer address 
{
    font-size:18px;
    font-style:normal;
    font-weight:bold;
    color:#144474;
    text-decoration:none;
    text-align:center;
    margin-top:10px;
    }
        
#footer #blog h3.blog-title 
{
    text-align:right;
    color:#fff;
    font-size:38px;
    line-height:1em;
    margin-top:1px;
    margin-bottom:1px;
    font-family:Arial;
    font-weight:normal;
    }    

#footer #blog p 
{
    font-size:14px;
    text-align:left;
    line-height:1.5em;
    }    
    
#footer .blog-underline 
{
    margin:-5px 0 0 -18px;
    }    
    
#footer .copyright 
{
   margin:50px 0 0 0;
   color:#fff;
   font-size:17px;
    }
.whitetext {
    color: #FFF;
}