/*@import url("add.css");*/
/* screen styles: 2010   */
/* =========================
* File: b2010a.css
* Created: 2009-12-30
*
* * Colors: 
* color: 
* #efa728; orange dirty
* #011945: navy blue
*
* * Changes: 
* 2009-mm-dd (): 
* 2009-mm-dd (): 
* ========================== */

body
{
    margin: 0px;
    background-color: #FFFFFF;
    font-family: Calibri, Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    /*line-height: 1.5em;*/
    color: #666666;
    
}
.bg-hp{
    background: url(img/hp_chicago_900x585.jpg) no-repeat 50% 0%;

}
.bg-pages{
    /*position: absolute;
    top:0px; left:0px;
    
    width: 1700px;
    height:240px;*/
    background: #f1f1f1 url(img/bg-grad-orange.png) repeat-x;

}
#header-bg{
    position: absolute; width: 96%; height: 42px; left:0; top:101px; margin-left:auto; margin-right:auto;
    background: #fff url(design09/bg_green_bar_top.gif) repeat-x; /* 50% 0%;*/
}
/*==========================================================*
	html tags
============================================================*/

p
{
    margin: 10px 0;
}

p.no-padding-no-margin
{
    padding: 0;
    margin: 0;
}

hr
{
    /*color: #E5E5E5; 	background-color: #E5E5E5;     border:0px;     */
    border: 1px dashed #e1e1e1;
    height: 1px;
    margin: 15px 0;
    _margin: 10px 0;
}

blockquote
{
    padding: 12px 0 0 36px;
    margin: 12px 0;
    background: url(img/quote.png) no-repeat;
}

blockquote p
{
    margin: 2px 0;
}
.Quote{
    font-size: 1.3em;
    color:#f7ba00;
    font-style: italic;
}
cite
{
    font-size: .85em;
    margin: 0;
    padding: 0 0 0 6px;
}

fieldset
{
    padding: 15px;
}

legend
{
    color: #333333;
    padding: 5px 3px 10px 3px;
}
code, textarea
{
    color: #000000;
    font-size: 11px;
    font-family: Courier New;
    width: 420px;
}

/*======================*
	headings
========================*/
h1, h2, h3, h4, h5, h6
{
    font-family:   Trebuchet MS, Calibri, Verdana, Tahoma, Arial, Helvetica, sans-serif;
    line-height: 1.1em;
    margin: 5px 0;
}

h1
{
    font-size: 2.2em;
    margin-bottom: 0;
}

h1, h2
{
    margin-top: 0px;

}

h2
{
    font-size: 1.3em;
    color: #5692d1;
}

h3
{
    font-size: 1.1em;
}

h3.small
{
    font-size: 1.0em;
}

h4
{
    font-size: 1.0em;
}

h5
{
    font-size: 0.8em;
}

h6
{
    font-size: 0.7em;
}




#content-container-multi-column h1 span
{
    display: none; /*block for print */
}

/*
#hl_test {
	background:url(design/Section_Aboutus_160.gif) no-repeat top left;
	width:200px;
	height:50px;
	}
#hl_test h1 span 
{
    display: block;color:Red; font-size:22px;
}
*/
/*==========================================================*
Main Structure: Containers
============================================================*/
#SiteWrapper{/* not used yet */
    width:1000px;
    height:auto;
    background-color: #fff;
}
#SiteContainerWrapper{
/* used on master layout page for all pages. Ensures that the overall SiteContainer will be centered. The SiteContainer itself needs to be floated:left; otherwise the BottomContainer is disconnected on pages where the SPRY panel is used.  */
    position: relative;
    top: 0px;
    width: 1000px;
    height: auto;

}
#SiteContainer
{   
    position: relative; 
    top: 0px;
    width: 1000px;
    height: auto;
    margin-left: auto;
    margin-right: auto;    
}
.SiteContainerInner
{   
    position: relative; 
    top: 0px;
    width: 980px;
    padding: 0px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:20px; 
       border: dotted 0px Blue;
}

#LogoContainer
{
    position: relative;
    width: 100%;
    height: 100px;
    /*
    background: transparent url('img/tile_white_trans60.png') repeat;
    */
}
#SLContainer
{
    position: relative;
    width: 100%;
    height: 480px;
}
#HeaderContainer
{
    position: relative;
    width: 100%;
    height: 250px;
}
#HeaderContainerInnerLeft
{
    position: relative;
    float:left;
    width: 670px;
    height: 250px;
}
#HeaderContainerInnerRight
{
    position: relative;
    float:right;
    width: 300px;
    height: 250px;
    margin-right:10px;
}
.bgIntro{ background-color: #f2af4c;} /* orange-nature */
.bgBreed{ background-color: #4c5568;} /* dark-steel-blue */
.bgHealth{ background-color: #4c5568;} /* dark-steel-blue */
.bgResources{ background-color: #4c5568;} /* dark-steel-blue */
.bgRescue{ background-color: #4c5568;} /* dark-steel-blue */
.bgInfo{ background-color: #4c5568;} /* dark-steel-blue */
.bgTest{ background-image: url('../../ResV/ReadMore.gif');} /* dark-steel-blue */
.ImprintPaw{
    /*background: transparent url('img/Imprint-Paw.gif') no-repeat;*/
     background-image: url('img/imprint-paw.png');
     background-repeat:no-repeat;
}
#ContentContainer h1{
    color: #4c5568;
    font-size:1.8em;
    margin: 4px 0 15px 0;
}




.ContentBox{
    position:relative;
    float: left;
    margin: 4px 4px 4px 0;
    padding: 2px;
    border: solid 1px #011945;
    width: 152px;/* default value */ /*plus 8px from margin and padding*/
    height:200px;/* default value */
}

.ContentBox h1{
    color: #011945;
    font-size: 1.4em;
    margin: 0 0 0.1em 0;
    background-color: #fff;
}
.ContentBox p{
    color: #a1a1a1;
    font-size: 1.0em;
    margin: 0 0 0.1em 0;
    text-align: justify;
}

.posRight{ position:relative; float:right;}






#ContentContainer
{   
    position: relative;
    width: 100%;
    height: auto;
        border: dotted 0px Red;
    margin-left: auto;
    margin-right: auto;
    
    font-size: 1.1em;
}
#ContentBoxWide{
    position: relative;
    float: left;
    width:650px;
    height:auto;
     text-align: justify;
}
#ContentBoxNarrow{
    position: relative;
    float: right;
    width:300px;
    height:auto;
    
    text-align: justify;
}
.SectionNarrow{
    margin: 0 0 6px 0;
    padding: 10px;
}


#PageContentContainer{
    margin-top:10px;
    position:relative;
    float:left;
    width: 860px;height: auto;
    padding: 20px;
    border: dotted 0px Blue;
    
    font-size: 1.1em;
    background-color: #fff;
}

#FooterContainer
{   position: relative;
    width: 980px;       /* set size 100% IF container goes within SiteContainer, otherwise set it 900px because if goes into BottomContainer which is 100% of browser window width */
   
    height: 120px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;  
    
       
    background: #d1d1d1;
    background-color: #8b8b8b;
    padding: 0;
    font-size: 1.0em;
}
#BottomContainer
{   position: relative;
    width: 100%;
    height: 120px;
    margin-top: 30px;
    background-color: #c1c1c1;
    padding: 0;
    clear:both;
}









.RelatedTopicsBox{
float: right; 
width: 240px; padding:10px 0 10px 10px; height: 190px;
margin: 10px 0 10px 10px;
background-color:#f7ba00; 
border: 1px dotted #c1c1c1;
}
.RelatedTopicsBox h2{
color: #fff;
}





#TheLogo{
width: 450px;height:100px; position: relative; float: left;
}
#TheSlogan{
width: 400px; position: relative; float: right; top: 35px;
}
.logo-style{
     font-size: 4em;
     color: #fff;
     margin:0 0 0 0;
     padding:0;
     vertical-align:top;
}

/*==========================================================*
	Headline Container
============================================================*/


/*==========================================================*
	Content Container - 
============================================================*/




/* html tags */


/*==========================================================*
	global link styles
============================================================*/


a:link
{
    color: #d00d00;
    text-decoration: none;
}

a:visited
{
    color: #980000;
    text-decoration: none;
}
/* a ModifiedMenu a:visited class had to be added to the menu.css in order to make top nav links white in IE6 ! */

a:hover
{
    text-decoration: none;
}

a:active
{
    color: #980000;
}

#content-side-two-column a:link, #content-side2-three-column a:link, #content-side1-three-column a:link, #content-side-two-column a:visited, #content-side2-three-column a:visited, #content-side1-three-column a:visited
{
    text-decoration: none;
}

#content-side-two-column a:hover, #content-side2-three-column a:hover, #content-side1-three-column a:hover
{
    text-decoration: underline;
}

h4 a:link, h4 a:visited, h4 a:hover
{
    color: #666666;
}
#Nav-HP a:link, #Nav-HP a:visited, #Nav-HP a:hover
,#Nav-Pages a:link, #Nav-Pages a:visited, #Nav-Pages a:hover
,#Nav-PagesTop a:link, #Nav-PagesTop a:visited, #Nav-PagesTop a:hover
{
    color: #fff;
    display: block;
    width: auto;
    border-bottom: 1px dotted #fff;
}
#Nav-Pages a:hover
,#Nav-PagesTop a:hover
{
    border-bottom: 1px solid #fff;
}

#Nav-PagesTop a.thisLinkActive{
    color: #f1f1f1;
}
/*==========================================================*
	top / header info
============================================================*/


#logo
{
    position: relative;
    font-size: 2.6em;
}

#logo a
{
    color: #4A6BB3;
    text-decoration: none;
}




/*==========================================================*
	top main nav
============================================================*/

#Nav-Pages
,#Nav-PagesTop
{
    /*background:#e1e1e1 url(../../resources/images/bg_RedStripe.gif) repeat-x;*/
    position: relative;
    float: left;
    left: 20px;
    top: 20px;
    width: 200px;
    height:auto;
    padding: 5px 20px 5px 20px;

    font-weight: 500;
    font-size: 1.5em;
}




/*==========================================================*
	PageTitle / Breadcrumb
============================================================*/


#PageTitle
{
    margin-top: 2px;
    margin-left: auto;
    margin-right: auto; /*width:920px;*/ /*background:#608fc8;*/
    position: relative;
    color: #d5e8ff;
    font-size: large;
    padding: 0px 20px .7em 20px;
}

#PageTitle a:link, #PageTitle a:visited
{
    color: #FFFFFF;
    text-decoration: none;
}

#PageTitle a:hover
{
    color: #D4E7F8;
    text-decoration: none;
}




/*==========================================================*
	Lists
============================================================*/

ul
{
    margin: 0;
    padding: 0;
}

li
{
    list-style: none;
    background: url(../../resources/layout/images/list-bullet-02.gif) no-repeat 0 .8em;
    padding: .2em 0 .2em 1em;
    margin-left: 0.4em;
}

ul.list-of-links
{
    width: 90%;
}



ul.list-of-links li
{
    border-bottom: 1px dashed #B2B2B2;
    background-image: url(../../noresources/layout/images/list-bullet-01-link.gif);
}

ul.list-of-links li.current
{
    font-weight: 700;
}


.alpha-list ul
{
    margin: 10px;
    padding: 0;
    list-style-type: lower-alpha;
}

.alpha-list li
{
    list-style-type: lower-alpha;
    background: #ffffff;
    padding: .2em 0 .2em 1em;
    margin-left: 0.4em;
}



/*==========================================================*
	Images
============================================================*/

img
{
    border: none;
}


.photo-float-left
{
    float: left;
    margin-right: 10px;
}

.image-border-none
{
    border: none;
}



/*==========================================================*
	Footer
============================================================*/



#footer
{
    position: relative;

    padding: 1em 0 1em 1em;
    color: #ffffff;
    font-size: .8em;
}

#footer div
{
    float:left;
    position:relative;
}

#footer a:link, #footer a:visited
{
    color: #FFFFFF;
    text-decoration: none;
}

#footer a:hover
{
    color: #D4E7F8;
    text-decoration: none;
}

#footer a:active
{
    color: #fff;
}



#footer ul
{
    margin: 0;
    padding: 0;
}

#footer li
{
    display: block;
    list-style: none;
    padding: 0 0 0 0;
    background: none;
    line-height: 1.2em;
}

#footer-sub a:link, #footer-sub a:visited
{
    text-decoration: underline;
    color: #999999;
}

#footer-sub a:hover
{
    color: #666666;
    text-decoration: none;
}


/*==========================================================*
	others
============================================================*/



.clear
{
    clear: both;
}

.none
{
    display: none;
}

/*===========================*/