/*
@version   1.0 December 20, 2011
@author    Mihai Balea http://www.mihaibalea.info | http://www.templatesbook.com
@copyright Copyright (C) 2012 TemplatesBook
@license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
*/

/*                                      PALETTE & PATTERNS
__________________________________________________________
*/

#tools {
    position: fixed;
    top: 86px;
    left: 5px;
    z-index: 99;
    float:left;
    width: 44px;
}
    #tools .selected {
            border: 1px solid #333;
            margin-left:0;
        }
        
    #palette,
    #patterns {
        background: #eeeeee;
        padding: 4px 5px 2px 5px;
        box-shadow: 0 0 5px #111;
        border-top: 1px solid #fff;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        width: 34px;
        float:left;
    }
    #palette div {
        float:left;
        width: 30px;
        height:30px;
        padding: 1px;
        margin-bottom: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
		margin-left:1px;
        cursor: pointer;
    }
    #palette #c_red {
        background: #ff3300;
    }
        #palette #c_red:hover {
            box-shadow: 0 0 3px #ff3300;
        }
    #palette #c_blue {
        background: #1d7ccc;
    }
        #palette #c_blue:hover {
            box-shadow: 0 0 3px #1d7ccc;
        }
    #palette #c_green {
        background: #7cce06;
    }
        #palette #c_green:hover {
            box-shadow: 0 0 3px #7cce06;
        }
    #palette #c_pink {
        background: #ff009c;
    }
        #palette #c_pink:hover {
            box-shadow: 0 0 3px #ff009c;
        }
    #palette #c_orange {
        background: #fca40a;
    }
        #palette #c_orange:hover {
            box-shadow: 0 0 3px #fca40a;
        }
    #palette #c_gray {
        background: #7b7b7b;
    }
        #palette #c_gray:hover {
            box-shadow: 0 0 3px #7b7b7b;
        }
		
#patterns {
	float:left;
	margin-top:20px;
}
	#patterns > div {
		float:left;
        width: 30px;
        height:30px;
        padding: 1px;
        margin-bottom: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
		margin-left:1px;
		background-color: #ff3300;
		cursor: pointer;
	}
	#patterns #pat_1 {
		background-image: url(../images/patterns/pattern_1.png);
	}
	#patterns #pat_2 {
		background-image: url(../images/patterns/pattern_2.png);
	}
	#patterns #pat_3 {
		background-image: url(../images/patterns/pattern_3.png);
	}
	#patterns #pat_4 {
		background-image: url(../images/patterns/pattern_4.png);
	}
	#patterns #pat_5 {
		background-image: url(../images/patterns/pattern_5.png);
	}
    
    #tools span {
        font: normal 20px/20px 'Oswald';
        position: absolute;
        left: 25px;
        top:0;
    }
    
    div#but_collapse,
    div#but_expand {
        background-color: #fff;
        color:#333;
        font: bold 20px/20px arial;
        float:left;
        width: 20px;
        height: 20px;
        text-align: center;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        cursor:pointer;
        margin-bottom: 5px;
    }
        div#but_expand:hover,
        div#but_collapse:hover {
            background-color:#333;
            color:#fff;
        }
    div#but_collapse {
        display:none;
    }
    #toolsHolder {
        float:left;
        width: 0;
        height: 0;
        overflow: hidden;
    }

/*                                                  COLORS
__________________________________________________________
*/
    
#body_pat.c_red { background-color: #ff3300; }
    .c_red div#navbarHolder {background-color: #ff3300;}
    .c_red div#navbar {background-image: url(../images/navbar_red.png);}
    .c_red div#work h2, .c_red div#projects h2, .c_red div#contact h2 { color: #ff3300; border-bottom: 6px solid #ff3300;}
    .c_red a { color: #ff3300;}
    .c_red .m_r { color: #ff3300;}
    .c_red div#headline h1 {color: #ff3300;}
    .c_red div#headline h2 a:hover { color: #ff3300; }
    .c_red .item_text h3 {color: #ff3300; }
    .c_red .btn_see_it_live { color: #ff3300; }
    .c_red .close_item_info, .c_red .next_slide, .c_red .prev_slide { background-color: #ff3300;}
    .c_red .contactContainer input.btn { background-color: #ff3300;}
    .c_red .contact_social a, .c_red .contact_social span span {background-color: #ff3300;}
    .c_red #btn_top { background-color: #ff3300;}
    .c_red #btn_top { background-color: #ff3300;}
    .c_red #patterns > div {background-color: #ff3300;}
    .c_red .about_text ul {list-style-image: url(../images/li_check_red.png);}
    .c_red .item_text ul { list-style-image: url(../images/li_check_red.png);}

#body_pat.c_blue { background-color: #1d7ccc; }
    .c_blue div#navbarHolder {background-color: #1d7ccc;}
    .c_blue div#navbar {background-image: url(../images/navbar_blue.png);}
    .c_blue div#work h2, .c_blue div#projects h2, .c_blue div#contact h2 { color: #1d7ccc; border-bottom: 6px solid #1d7ccc; }
    .c_blue a { color: #1d7ccc;}
    .c_blue .m_r { color: #1d7ccc;}
    .c_blue div#headline h1 {color: #1d7ccc;}
    .c_blue div#headline h2 a:hover { color: #1d7ccc; }
    .c_blue .item_text h3 {color: #1d7ccc; }
    .c_blue .btn_see_it_live { color: #1d7ccc; }
    .c_blue .close_item_info, .c_blue .next_slide, .c_blue .prev_slide { background-color: #1d7ccc;}
    .c_blue .contactContainer input.btn { background-color: #1d7ccc;}
    .c_blue .contact_social a, .c_blue .contact_social span span {background-color: #1d7ccc;}
    .c_blue #btn_top { background-color: #1d7ccc;}
    .c_blue #patterns > div {background-color: #1d7ccc;}
    .c_blue .about_text ul {list-style-image: url(../images/li_check_blue.png);}
    .c_blue .item_text ul { list-style-image: url(../images/li_check_blue.png);}

#body_pat.c_green { background-color: #7cce06; }
    .c_green div#navbarHolder {background-color: #7cce06;}
    .c_green div#navbar {background-image: url(../images/navbar_green.png);}
    .c_green div#work h2, .c_green div#projects h2, .c_green div#contact h2 { color: #7cce06; border-bottom: 6px solid #7cce06;}
    .c_green a { color: #7cce06;}
    .c_green .m_r { color: #7cce06;}
    .c_green div#headline h1 {color: #7cce06;}
    .c_green div#headline h2 a:hover { color: #7cce06; }
    .c_green .item_text h3 {color: #7cce06; }
    .c_green .btn_see_it_live { color: #7cce06; }
    .c_green .close_item_info, .c_green .next_slide, .c_green .prev_slide { background-color: #7cce06;}
    .c_green .contactContainer input.btn { background-color: #7cce06;}
    .c_green .contact_social a, .c_green .contact_social span span {background-color: #7cce06;}
    .c_green #btn_top { background-color: #7cce06;}
    .c_green #patterns > div {background-color: #7cce06;}
    .c_green .about_text ul {list-style-image: url(../images/li_check_green.png);}
    .c_green .item_text ul { list-style-image: url(../images/li_check_green.png);}

#body_pat.c_pink { background-color: #ff009c; }
    .c_pink div#navbarHolder {background-color: #ff009c;}
    .c_pink div#navbar {background-image: url(../images/navbar_pink.png);}
    .c_pink div#work h2, .c_pink div#projects h2, .c_pink div#contact h2 { color: #ff009c; border-bottom: 6px solid #ff009c;}
    .c_pink a { color: #ff009c;}
    .c_pink .m_r { color: #ff009c;}
    .c_pink div#headline h1 {color: #ff009c;}
    .c_pink div#headline h2 a:hover { color: #ff009c; }
    .c_pink .item_text h3 {color: #ff009c; }
    .c_pink .btn_see_it_live { color: #ff009c; }
    .c_pink .close_item_info, .c_pink .next_slide, .c_pink .prev_slide { background-color: #ff009c;}
    .c_pink .contactContainer input.btn { background-color: #ff009c;}
    .c_pink .contact_social a, .c_pink .contact_social span span {background-color: #ff009c;}
    .c_pink #btn_top { background-color: #ff009c;}
    .c_pink #patterns > div {background-color: #ff009c;}
    .c_pink .about_text ul {list-style-image: url(../images/li_check_pink.png);}
    .c_pink .item_text ul { list-style-image: url(../images/li_check_pink.png);}

#body_pat.c_orange { background-color: #fca40a; }
    .c_orange div#navbarHolder {background-color: #fca40a;}
    .c_orange div#navbar {background-image: url(../images/navbar_orange.png);}
    .c_orange div#work h2, .c_orange div#projects h2, .c_orange div#contact h2 { color: #fca40a; border-bottom: 6px solid #fca40a;}
    .c_orange a { color: #fca40a;}
    .c_orange .m_r { color: #fca40a;}
    .c_orange div#headline h1 {color: #fca40a;}
    .c_orange div#headline h2 a:hover { color: #fca40a; }
    .c_orange .item_text h3 {color: #fca40a; }
    .c_orange .btn_see_it_live { color: #fca40a; }
    .c_orange .close_item_info, .c_orange .next_slide, .c_orange .prev_slide { background-color: #fca40a;}
    .c_orange .contactContainer input.btn { background-color: #fca40a;}
    .c_orange .contact_social a, .c_orange .contact_social span span {background-color: #fca40a;}
    .c_orange #btn_top { background-color: #fca40a;}
    .c_orange #patterns > div {background-color: #fca40a;}
    .c_orange .about_text ul {list-style-image: url(../images/li_check_orange.png);}
    .c_orange .item_text ul { list-style-image: url(../images/li_check_orange.png);}

#body_pat.c_gray { background-color: #7b7b7b; }
    .c_gray div#navbarHolder {background-color: #7b7b7b;}
    .c_gray div#navbar {background-image: url(../images/navbar_gray.png);}
    .c_gray div#work h2, .c_gray div#projects h2, .c_gray div#contact h2 { color: #7b7b7b; border-bottom: 6px solid #7b7b7b;}
    .c_gray a { color: #7b7b7b;}
    .c_gray .m_r { color: #7b7b7b;}
    .c_gray div#headline h1 {color: #7b7b7b;}
    .c_gray div#headline h2 a:hover { color: #7b7b7b; }
    .c_gray .item_text h3 {color: #7b7b7b; }
    .c_gray .btn_see_it_live { color: #7b7b7b; }
    .c_gray .close_item_info, .c_gray .next_slide, .c_gray .prev_slide { background-color: #7b7b7b;}
    .c_gray .contactContainer input.btn { background-color: #7b7b7b;}
    .c_gray .contact_social a, .c_gray .contact_social span span {background-color: #7b7b7b;}
    .c_gray #btn_top { background-color: #7b7b7b;}
    .c_gray #patterns > div {background-color: #7b7b7b;}
    .c_gray .about_text ul {list-style-image: url(../images/li_check_gray.png);}
    .c_gray .item_text ul { list-style-image: url(../images/li_check_gray.png);}