﻿/*************************************************


    MAKEANIMALSMATTER.ca
    2009-08-20
    by 76design




***************************************************
	GENERIC
	*/

HTML {
	font: 62.5%/160% 'Helvetica Neue', Helvetica, Arial, sans-serif;   
	color: #3b3a34;
	}
	
BODY {
	margin: 0px;
	padding: 0px;
	text-align: center;
    background:#FFF url(../images/bg.gif) repeat-x;
	}
    
body#act-mp-letter-thanks{
    background: transparent;
    }
    
    
a{
    color: #646356;
    text-decoration: underline;
    }
a:hover{
    text-decoration: none;
    }
    
p{
    margin: 0 0 1em 0;
    }
    
    
h1{
    color: #646356;
    font-weight: bold;
    font-size: 200%;
    }
    
h2{
    color: #009AD8;
    border-bottom: solid 1px #d5cdb0;
    font-size: 140%;
    font-weight: bold;
    }
    
h3{
    color: #646356;
    font-size: 120%;
    font-weight: bold;    
    }
    
h4{
    color: #3B3A34;
    font-size: 110%;
    font-weight: bold;
    }
    
table{
    margin-bottom: 1em;
    font-size: .8em;
    text-align: center;
    border: solid 1px #f6f2e6; 
    }
table td{
    padding: 1em; 
    }
table p{
    margin: 0;
    text-align: center;
    }
    
    
.floatright{
    float: right;
    margin: 0 0 15px 15px;
    }
.floatleft{
    float: left;
    margin: 0 15px 15px 0;
    }
.clearleft{
    clear: left; 
    }
.clearright{
    clear: right;
    }
    
.success{
    color: #8fbc2d;
    font-weight: bold;
    border-bottom: solid 1px #d5f199;
    padding-bottom: 6px;
    margin-bottom: 15px;
    }
    
.petition .success{
    background:#D5F199 none repeat scroll 0 0;
    border:1px solid #FFFFFF;
    color:#5F840E;
    font-size:0.8em;
    font-weight:bold;
    margin-bottom:15px;
    padding:4px;
    text-align:center;
    }
/*
h1, h2, h3, h4, h5, h6,
p, ol, ul{
    margin: .75em 0;
    }
*/

    
    
    
	
/***************************************************
	WRAPPER
	 */
#wrapper {
	width:940px;
	margin: 0px auto;
	text-align:left;
	}

body#act-mp-letter-thanks #wrapper {
    width:600px;
    }

/***************************************************
	HEADER
	*/
#header {
    position: relative;
    background: url(../images/header.gif) 0 0 repeat-x;
    border-top: solid 1px #009ad8;
	height:107px;
	margin:26px 0 0 0
    }
    
#header .logo{
    margin: 33px 0 0 14px;
    width: 470px;
    height: 47px;
    overflow: hidden;
    text-indent: -900em;
    display: block;
    background: url(../images/logo.gif) 0 0 no-repeat;
    }
    
    
.udaw-desc{
    position: absolute;
    top: 26px; 
    right: 14px;
    width: 287px;
    margin: 0;
    color: #fff;
    font-size: 1.1em;
    }
.udaw-desc em{
    background: #ffface;
    color: #3b3a34;
    }
.udaw-desc a{
    text-decoration: none;
    color: #3b3a34;
    }
.udaw-desc a:hover{    
    text-decoration: underline;
    }

    
    
    
#topmenu-wrap{
    font-size: 140%;
    position: relative;
    background: #3b3a34 url(../images/nav-bg.gif) 0 0 repeat-x;
    }

#topmenu {
    margin: 0;
	padding:0;
    font-weight: bold;
    text-transform: uppercase;
    border-top: solid 1px #262d30;
	}

#topmenu LI, 
#sub-topmenu LI {
	list-style:none;
	float:left;
	margin:0 0 0 0;
	width:auto;
	}
	
#topmenu a {
	display:block;
	padding:14px 14px 12px 14px;
	margin:0;
	text-decoration:none;
    color: #fff;
    border-right: solid 1px #6d6b61;
	}	
#topmenu a:hover{
    background: #4c4a40 url(../images/nav-hover.gif) 0 0 repeat-x;
    }
#topmenu .selected a{
    color: #3b3a34;
    background: #d1c9a9 url(../images/nav-selected.gif) 0 0 repeat-x;
    /*border-bottom: solid 1px #a9a590;*/
    }
    
#animalsmatterto-num{
    position: absolute;
    top: 14px; 
    right: 32px;
    font-weight: bold;
    background: url(../images/nav-leaf.gif) 0 50% no-repeat;
    padding-left: 24px;
    }
#animalsmatterto-num a{
    color: #d7cea5;
    text-decoration: none;
    }
#animalsmatterto-num a em{
    font-style: normal;
    color: #fff;
    }
#animalsmatterto-num a:hover{
    text-decoration:underline;    
    }
    


/***************************************************
	MAIN SUB MENU
	*/
#sub-topmenu{
    margin: 0 0 0 0;
    padding: 6px 0;
    font-size: 85%;
    font-weight: bold;
    background: #d1c9a9;
    }
    
#sub-topmenu a{
    color: #3b3a34;
    padding: 2px 14px;
	text-decoration:none;
    display: block;
    border-right: solid 1px #aba58b;
    }
#sub-topmenu a:hover{
    text-decoration: underline;
    }
#sub-topmenu li:last-child a{
    border-right: none;
    }
    
#sub-topmenu .selected a{
    color: #266b87;
    }
    


/***************************************************
	COLUMNS
	
	*/
#content{
    position: relative;
    margin-top: 25px;
    font-size: 1.4em;
    line-height: 1.3em;
    overflow: hidden; height: 1%;
    }
    
#rightcolumn {
	float:left;
	width:300px;
    margin: 0 0 15px 0;
	}
	
#leftcolumn {
	float: left;
	width: 620px;
	margin: 0 15px 0 0;
    overflow: hidden;
    height: 1%;
	}

body#act-mp-letter-thanks #leftcolumn {
    width:600px;
    }
    
    
/***************************************************
	CENTRE
	
	*/
    
    
    
/***************************************************
	SIDEBAR : PETITION
	
	*/
    
    
    .form-wrap{
        background: #009ad8;  
        color: #fff;
        padding: 12px 14px 10px 14px;
    }
    
    .petition form{
        }
        
    form ol{
        list-style: none;
        margin: 0;
        }
    form li{
        clear: both;
        margin-bottom: 4px;
        }
    label{
        font-size: .8em;
        float: left;
        display: block;
        width: 80px
        }
    label em{
        color: #009AD8 ;
        }
    form input,
    form select,
    form textarea{
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;  
        color: #3B3A34;
        }
        
    input.text,
    textarea{
        background: #fff;
        border: none;
        width: 180px;
        padding: 3px;
        border-bottom: solid 1px #006b97;
        }
    #opt_in-element  label{
        display: inline;
        float: none;
        width: auto;
        }
    #Register-element,
    #opt_in-element{
        margin-bottom: 0;
        }
        
    
    .petition .submit{
        margin: 10px 0 0 0;
        display: block;
        border: none;
        width: 274px;
        height: 39px;
        background: url(../images/btn-petition.gif) 0 0 no-repeat;
        text-align: center;
        color: #c7c4b4;
        text-transform: uppercase;
        font: bold 95%/39px 'Helvetica Neue', Helvetica, Arial, sans-serif;  
        cursor: pointer;        
        text-decoration: underline;        
        }
    .petition .submit:hover{
        color: #fff;
        text-decoration: none;
        }
        
    
    .petition h3,
    .petition h4{
        font-size: 130%;
        font-weight: bold;
        text-transform: uppercase;
        margin: 0;
        line-height: 1.2em;
        }
    .petition h3{
        color: #009ad8;
        }
    .petition h4{
        padding-bottom: 5px;
        background: url(../images/petition-bg.gif) bottom right no-repeat;
        }
        
    #content .petition p.msg{
        text-transform: uppercase;
        font-size: 85%;
        font-weight: bold;
        line-height: 1.2em;
        margin: 0 0 1em 0;
        }
    
    
    /**
    *  CONTACT FORM
    */
    .module-ContactForm form li{
        margin-bottom: 12px;
        }
    
    .module-ContactForm input.text,
    .module-ContactForm input.captcha,
    .module-ContactForm textarea{
        border: solid 1px #ABA58B;
    }
    
    #body-element label,
    #captcha-element label{
        width: auto;
        float: none;
        }
    #body-element textarea{
        font-size: .9em;
        width: 95%;
        height: 120px;
        }
    #captcha-element img{
        margin: 5px 0;
        }
        
    #contactform_label_submit-element{
        padding: 5px;
        background: #f5f1e1;
        }
    
    
    /** 
     * Errors submitting form 
     */
    ul.errorlist{
        border: solid 1px #c03323;
        padding: 10px;
        margin: 10px 0;
        list-style: none;
        background: #fff;
        font-size: .8em;
        color: #666;
        }
    ul.errorlist ul{
        margin: 0;
        list-style: none;
        }
    .errorlist li{
        margin: 0 0 0 0;
        border-bottom: dotted 1px #ccc;
        }
    .errorlist li:last-child,
    .errorlist li li{
        border-bottom: none;
        }
    .errorlist b{
        background: url(../images/icon-error.gif) 0 50% no-repeat;
        color: #c03323;
        display: block;
        padding: 3px 0 0 20px;
        }
    .errorlist ul li{
        border-bottom: none;
        margin: 0;
        padding: 0 0 6px 0;
        }     
     
    
    
/***************************************************
	SIDEBAR : SHARE
	
	*/    
    #share-addthis{ 
        margin: 10px 0 0;
        }
        
        
/***************************************************
SHARE

*/    
    #share #moduleid-Pages-index ul{
        list-style: none;
        margin: 0 0 1.5em 0;
        padding: 0;
        }
    
    
/***************************************************
	SEE
	
	*/    
        
    
    #see h2{
        clear: both;
        }
        
    #morebtn-flickr,
    #morebtn-youtube{
        display: block;
        width: 217px;
        height: 28px;
        margin-top: 15px;
        padding-left: 32px;
        line-height: 28px;
        background: url(../images/btn-flickr.gif) 0 0 no-repeat;
        text-align: left;
        color: #c7c4b4;
        font-weight: bold;
        font-size: 13px;
        }
    #morebtn-youtube{
        background: url(../images/btn-youtube.gif) 0 0 no-repeat;
        }
    
    .signatory{ 
        width: 45%;
        float: left;
        overflow: hidden;
        height: 1%;
        font-style: italic;
        margin: 0 2.25% 25px 0;
        font-size: 95%;
        }
        
    #content .signatory p{
        margin: .25em 0 1em 0;
        }
        
    .signatory cite{
        color: #009AD8;
        display: block;
        font-size: 90%;
        margin-bottom: 1em;
        }
        
    .signatory-photo{
        background: #d7cea5 url(../images/signatory-speechbubble.gif) top right no-repeat;
        padding: 7px 15px 7px 7px;
        margin: 0 .75em .75em 0;
        float: left;
        }
    .signatory-photo img{
        border: solid 1px #fff;
        }
        
        
    .see-flickr-photos{
        margin: 15px 0;
        overflow: none; height: 1%;
        }

        
    #flickrpool-link{
        display: block;
        margin: 5px 0 15px 0;
        font-weight: bold;
        text-decoration: none;
        }
        
    #see .media{
        margin-bottom: 10px;
        }
    
    
/***************************************************
	HOME
	 */
#home #animalsmatter{
    height: 1%;
    position: relative;
    background: #d7cea5 url(../images/animalsmatter-monkey.gif) 91% 30px no-repeat;
    padding: 30px 17px;
    font-size: 110%;
    line-height: 1.3em;
    margin: 0 0 25px 0;
    }
#home #moduleid-AnimalsMatter-index{
    position: relative;
    }
#home #animalsmatter p{
    width: 432px;
    margin: 0;
    }
    
#moduleid-YoutubeVideos-home{
    margin-bottom: 15px;
    }
    
  
#moduleid-ContentFollowUs-index{
    width: 300px;
    background: #d7cea5 url(../images/followus.png) 0 0 no-repeat;
    border-bottom: solid 1px #bebba7;
    padding: 37px 0 6px 0;
    text-align: center;
    margin: 10px 0;
    }
#moduleid-ContentFollowUs-index img{
    margin: 0 7px;
    margin: 0 7px;
    }
  
/*
#moduleid-ContentFollowUs-index h3{
    margin: 15px 0 0 0;
    background: #D7CEA5 ;
    font-size: 1em;
    padding: 5px 14px;
    }
#moduleid-ContentFollowUs-index table{
    border-color: #D7CEA5 ;
    }
*/

#learnmore.button-small{
    position: absolute;
    bottom: 15px;
    right: 20px;
    }
    
.button-small{
    display: block;
    width: 129px;
    height: 30px;
    line-height: 30px;
    background: url(../images/btn-small.gif) 0 0 no-repeat;
    text-align: center;
    color: #c7c4b4;
    font-weight: bold;
    font-size: 85%;
    }
    
.button-small:hover{
    color: #fff;
    text-decoration: none;
    }
    
    
/***************************************************
	ACT
	
    3 columns on this page: 
        .petition
        #mailmp
        #animalsmatter
    
	*/ 
        
    
    /** MAIL YOUR MP **/
    #act #mailmp{
        background: #4cb9e4;
        width: 282px;
        float: left;
        margin: 0 15px 15px 0;
        padding: 15px 10px 20px 10px;
        color: #fff;
        font-weight: bold;
        }
    #mailmp a#filloutform{
        display: block;
        width: 274px;
        background: url(../images/btn-petition.gif) no-repeat 0 0;
        height: 39px;
        line-height: 39px;
        text-align: center;
        color: #C7C4B4;
        font-size: 13px;
        margin: 20px auto 0 auto;
        }
    #mailmp a#filloutform:hover{
        color: #fff;
        }
    img#parliamentimg{
        display: block;
        margin: 15px auto 0 auto;
        }
    
    /**        
     * 
     */
    #act #animalsmatter {
        margin: 0 2px 5px 0; /* <-- this margin fo ie6 */
        float: right;
        width: 283px;
        display: block;
        padding: 8px 8px 8px 8px;
        background: #D1C9A9;
        border: solid 1px #ccc;
        color: #3B3A34;
        font-weight: bold;
        font-size: 13px;
    }     
    a.download-doc{
        background: #D1C9A9 url(../images/animalsmatter-downloadicon.gif) 8px 50% no-repeat;
        display: block;
        margin: 10px 0 0 0; /* <-- this margin fo ie6 */
        padding: 8px 8px 8px 40px;
        color: #3B3A34;
        font-weight: bold;
        font-size: 13px;
        }
    a.download-doc:hover{
        color: #3B3A34;
        }
        
    p > a.download-doc{
        margin-bottom: 15px;
    }
        
    /** PAGE CONTENT ON THIS PAGE **/
        
        
/***************************************************
	NEWS/PRESS RELEASES (BROADCAST)
	 */
     
     ul.casestudies{
        margin-left: 24px;
        list-style: none;
        }
        
     ul.casestudies li{
        background: url(../images/icon-doc.gif) 0 2px no-repeat;
        padding-left: 28px;
        margin-bottom: .75em;
        }
     
     
    .news-item-summary,
    .press-item-summary{
        margin: 0 0 15px 20px;
        border-left: solid 4px #d5cdb0;
        padding: 5px 0 5px 15px;
        height: 1%;
        
        }
        

    .news-item-summary h3,
    .press-item-summary h3,
    .news-item-summary h4,
    .press-item-summary h4{
        margin: 0;    
        }
        
    .news-item-summary h3 a,
    .press-item-summary h3 a{
        text-decoration: none;
        }
    .news-item-summary:hover h3,
    .press-item-summary:hover h3{
        text-decoration: underline;
        }    
    .news-item-summary h3 a:hover,
    .press-item-summary h3 a:hover{
        color: #009AD8 
        }
                
    .news-item-summary h4,
    .press-item-summary h4{
        font-size: 80%;
        color: #a5a492;
        }
        
    

    a.readmore{
        color: #C7C4B4;    
        background: #3B3A34 url(../images/nav-bg.gif) repeat-x scroll 0 0;
        display: block;
        width: 140px;
        font-size: 80%;
        padding: 4px;
        margin: -10px 20px 40px;
        text-align: center;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        }
     a.readmore:hover{
        color: #fff;
        }
        
    .readmore img{
        display: inline-block;
        margin:0 5px -4px 0
        }
        
        
/***************************************************
    BROADCAST > News Archives
    */   

ul.filter-links,
ul.filter-sublinks{
    font-weight: bold;
    margin: 0 0 0 20px;
    padding: 3px;
    list-style: none;
    border: solid 1px #ccc;
    overflow: hidden; height: 1%;
    font-size: 110%;
    background: #fff;
    }
    
ul.filter-links li,
ul.filter-sublinks li{
    margin: 0;
    padding: 0;
    float: left;
    }
    
ul.filter-links a,
ul.filter-sublinks a{
    text-decoration: none;
    display: block;
    margin: 0 4px;
    padding: 2px 4px;
    border: solid 1px #e3dfcb;
    }
ul.filter-links a:hover,
ul.filter-sublinks a:hover{
    background: #e3dfcb;
    color: #333;
    border: solid 1px #ABA58B
    }
ul.filter-links .selected a,
ul.filter-sublinks .selected a{
    background: #009AD8 ;
    color: #fff;
    border: solid 1px #0080b3
    }

#news-years{
    background: #D1C9A9;
    margin-bottom: 25px;
    }

    /*
#news-months{
    background: none;
    border: dotted 1px #D1C9A9;
    border-top: none;    
    font-size: 80%;
    }
#news-months a{
    padding: 0 4px;
    }
    */
    
    
    
/***************************************************
	GIANT TAKE ACTION PHOTO/BUTTON
	 */

#takeaction-photo{
    margin: 15px 0 0 0;
    }
    
    
	
/***************************************************
	FOOTER
	 */

#footer {
    clear: both;
    background: url(../images/footer.jpg) 0 0 no-repeat;
	padding-top: 96px;
    color: #646356;
	}
    
#footer a{
    color: #646356;
    font-weight: bold;
    text-decoration: none
    }
#footer a:hover{
    color: #266b87;
    text-decoration: underline;
    }
	
  
#footer .logos, 
#footer .copy{
    float: left;
    }
#footer .logos img{
    margin-right: 30px;
    }
#footer .copy{
    float: right;
    width: 285px;
    text-align: right;
    line-height: 1.25em;
    }
