@primaryColor: #f78f1e;
@import "base.less";

#topbar #wts-logo {
	width: 222px;
	height: 42px;
	margin: 10px 0 30px;
}

#topbar #wts-logo a {
	width: 222px;
	height: 42px;
	background-image: url("../img/logotype-big.gif");
	padding: 0;
	margin: 0;
}

#home-header {
    height: 180px;
    margin: 0 0 0 0;
    background: url(../img/waves-blue.jpg) 50% 0 repeat-x;
    
    .container {
        position: relative;
        height: 220px;
        /*background: url(../img/waves-blue-highlight.jpg) 0 0 no-repeat;*/
    }
    
    h1 {
        margin: 40px 0 14px 0;
        padding: 0;
        font-size: 42px;
        line-height: 42px;
        color: #fff;
        text-shadow: rgba(0,0,0,.5) 0 2px 1px;
        font-family: "Georgia";
        font-weight: normal;
    }
    
    p {
        font-size: 15px;
        line-height: 20px;
        font-family: "Georgia";
        color: #fff;
		font-style: italic;
		text-shadow: rgba(0,0,0, .5) 0 2px 1px;
    }
    
    .big-btn {
        display: block;
        position: absolute;
        top: 63px;
        width: 218px;
        height: 59px;
        text-align: center;
        font-size: 22px;

		.box-shadow(1px 1px 10px 1px rgba(0, 0, 0, 0.5));
        .border-radius(15px);
            
        @topColor: #19ff2a;
        @bottomColor: #16b721;
                        
        .btn1 {
            display: block;
            margin: 16px 0 6px 0;
            line-height: 24px;
            text-shadow: rgba(255,255,255,1) 0 -1px 1px;
        }
        
        .btn2 {
            display: block;
            font-family: Georgia, serif;
            font-size: 12px;
            line-height: 12px;
            font-style: italic;
            color: rgba(0,0,0,.75);
            text-shadow: none;
        }
        
        &:hover {
            text-decoration: none;
            #gradient > .vertical(saturate(lighten(@topColor, 10%), 10%), @bottomColor);
        }
    }
    
    #btn-donate {
        left: 480px;
        
        color: #fff;
        
        @topColor: #1149bc;
        @bottomColor: #003eb9;
        
        #gradient > .vertical(@topColor, @bottomColor);

    }
    
    #btn-shop {
        left: 720px;

        color: #014b99;
        
        @topColor: #d3d2d2;
        @bottomColor: #f0f0ef;
        
        #gradient > .vertical(@topColor, @bottomColor);
    }
    
	#free-shipping {
	    bottom: -40px;
	    display: block;
	    /* ticket 298 */
	    outline: 0;
	    /* end ticket 298 */
	    height: 120px;
	    position: absolute;
	    right: 0;
	    text-indent: -5000em;
	    width: 120px;
	    z-index: 2;
	    background-image: url("../img/free-delivery-badge.png");
	}
    
}

.home-container {
    border-bottom: #f1f1f1 solid 1px;
    
    .container {
        padding-top: 20px;
    }
    
    h2 {
        font-size: 24px;
        line-height: 24px;
        font-weight: normal;
		color: #333;
		font-family: "Georgia";
        margin-bottom: 20px;
    }
}

#featured-charities {
    margin-top: 4px;
    border-top: #f1f1f1 solid 1px;
    padding-top: 25px;
    
    .columns {
    	position: relative;
    }
    
    #charity-wrapper {
		width: 958px;
		height: 238px;
		overflow: hidden;
		overflow-x: scroll;
		margin: 0 0 20px;
		float: left;
		
		ul {
			position: relative;
		}
		
    }
    
    .cnext {
	    right: -20px;
    	position: absolute;
	    top: 40%;
	    z-index: 2;
	    display: block;
	    width: 27px;
	    height: 27px;
	    background-image: url("../img/carousel_nav.png");
	    text-indent: -5000em;
	    overflow: hidden;
	    background-position: -36px top;
	    opacity: 0.8;
	    
	    &:hover {
	    	opacity: 1;
	    }
    }
    
    .cprev {
	    left: -45px;
    	position: absolute;
	    top: 40%;
	    z-index: 2;
	    display: block;
	    width: 27px;
	    height: 27px;
	    background-image: url("../img/carousel_nav.png");
	    text-indent: -5000em;
	    overflow: hidden;
	    background-position: 0 top;
	    opacity: 0.8;
	    
	    &:hover {
	    	opacity: 1;
	    }
    }
    
}

div#donated-items-wrapper {

	ul {
	
		li {
			height: 235px;
			width: 168px;
			margin-right: 28px;
		}
	
	}

}

	.dnext {
	    right: -20px;
    	position: absolute;
	    top: 40%;
	    z-index: 2;
	    display: block;
	    width: 27px;
	    height: 27px;
	    background-image: url("../img/carousel_nav.png");
	    text-indent: -5000em;
	    overflow: hidden;
	    background-position: -36px top;
	    opacity: 0.8;
	    
	    &:hover {
	    	opacity: 1;
	    }
    }
    
    .dprev {
	    left: -45px;
    	position: absolute;
	    top: 40%;
	    z-index: 2;
	    display: block;
	    width: 27px;
	    height: 27px;
	    background-image: url("../img/carousel_nav.png");
	    text-indent: -5000em;
	    overflow: hidden;
	    background-position: 0 top;
	    opacity: 0.8;
	    
	    &:hover {
	    	opacity: 1;
	    }
    }

div#topbar {
	position:relative;
	background: url("../img/ribbon-bg.png") repeat-x scroll bottom left transparent;
	height: auto;
	top: 10px;
	/* ticket 307 */
	.secondary-nav {
		background: #FFF;
		li {
			background: #FFF;
            /* Dropdown menu fixes */
            a.menu::after, .dropdown-toggle::after {
                vertical-align: middle;
                margin-top: 0;
            }
            .menu-dropdown, .dropdown-menu {
                top: 50px;
                left: 0;
				background: #FFF;
                li {
                    display: block;
                    a { 
                        font-size: 12px;
                        /* Copied from boostrap */
                        display: block;
                        padding: 4px 15px;
                        clear: both;
                        font-weight: normal;
                        line-height: 18px;
                        color: @gray;
                        text-shadow: 0 1px 0 @white;
						background: #FFF;
                        
                        // Hover state
                        &:hover {
                          #gradient > .vertical(#eeeeee, #dddddd);
                          color: @grayDark;
                          text-decoration: none;
                          @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
                          .box-shadow(@shadow);
                        }
                    }
                }
            }
		}
	}
	/* end ticket 307 */
	div.socialmedia-wrapper {
		float: right;
		margin: 25px 0 0 0;
		
		a.follow-twitter {
    		background: url("../img/twitter_icon.png") no-repeat scroll left top transparent;
		    color: #2084C6;
		    display: inline-block;
		    font-size: 12px;
		    height: 16px;
		    padding: 0 0 0 23px;
		    position: relative;
		    text-shadow: 0 0 0;
		    top: -2px;
		    
			&:hover {
	    		text-decoration: none;
	    	}
		    
		}
		
	}
	
	ul.nav { margin-top: 15px; }
	
	ul.nav li a {
		color: #000;
		text-shadow: none;
	}
	
}

#testimonials {
	margin: 0 0 18px;
	height: 290px;
	
	h2{
		margin-bottom:17px;
	}
	
	blockquote {
	    border-left: 0 none;
	    font-size: 12px;
	    font-style: italic;
	    line-height: 16px;
	    padding-left: 0;
		margin-bottom:18px;
		line-height:17px;
		
		footer {
			margin-top: 0;
			padding-top: 0;
			color: @linkColor;
			border-top: 0 none;
			padding-right:30px;
			text-align:right;
			font-size:11px;
			line-height:5px;
		}
		
	}
	
}

#footer {
	background: none repeat scroll 0 0 #EAEAEA;
	margin: 4px 0 0 0;
}