/****************************/
/* CUSTOM STYLE CSS         */
/****************************/
/* 
Put your custom css and css overrides in this file.  By restricting your css changes to 
custom-style.css, your changes will not be overwritten when upgrading to a new version of this theme.

Steps to customize your 0 Point theme:                       
1. Add your custom css to this file                
2. Uncomment different examples and modify data as you wish 
3. Clear cached data at admin/settings/performance 
4. Save a copy of this file with a different name to avoid loosing it after a theme update.

Further customization of the node types can be done by modification or deletion of one or all 
of the following files in the ZeroPoint folder: node-image.tpl.php, node-product.tpl.php, 
node-webform.tpl.php, views-view.tpl.php.
*/
/****************************/

/* Erase or comment the lines below to get rid of the image in the right sidebar 
 * and the brand image or choose another image and change the path instead. */
body {font-family: Montserrat-Medium, Montserrat-Regular, sans-serif, Arial, Verdana, Helvetica} 
 
 
#wrapper {
	// background: transparent url(../images/all/_sidebarimg.png) 99% 99% no-repeat;
}

#brand {
 /*
	background: url(../images/all/_brand.png) 50% 30% no-repeat;
	position: relative;
	margin: 5px auto 0;
	width: 250px;
	height: 50px;
	*/
}

/************************/
/* HEADER IMAGE ROTATOR */
/************************/
.himg #headimg {
	background: #fff url(headerimg/rotate.php) no-repeat 100% 100%; /* rotates images in the headerimg folder */
	border-bottom: 1px solid #eee;
}

/********************/
/* DROP DOWN SHADOW */
/********************/

ul.firstsublayer, 
ul.sublayer {
	background: url(../images/menushadow.png) no-repeat 7px 5px; 
}


.form-submit {
	height: 40px;
	width: 300px;
	vertical-align: middle;
	background-color:#06C;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
	font-family: Montserrat-Medium, Montserrat-Regular, sans-serif, Arial, Verdana, Helvetica;
	padding: 2px 4px;
	font-size: 120%;
	text-transform: uppercase;
}
#block-wrapper odd block_1 {
   margin : -10px 0px;
}

/* Pierone USAI */
@media only screen and (max-width: 768px) {
    
    .ok,
    .dele,
    .form-item input,
    .form-text,
    .form-submit {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
    }
}

@media only screen and (max-width: 320px) {
    .form-item input,
    .form-text,
    .form-submit {
            width: 270px !important;
    }
}

@media only screen and (max-width: 320px) {
    .login-email,
    .login-cf {
            width: 200px !important;
    }
}

.form-item input,
.form-text,
.form-submit {
    width: 300px;
    margin: 5px 0;
}

.form-checkboxes .form-item input {
    width: auto;
    -webkit-appearance: checkbox;
     -moz-appearance: checkbox;
     appearance: checkbox;
}


/* HEADER */

div#header {
    position: relative;
}

/*@media only screen and (max-width: 640px) {
    div#header div#logo {
        width: 100%;
        height: 105px;
        text-align: center;
    }
}

@media only screen and (min-width: 640px) {
    div#header div#top-elements, div#header div#logo {
        width: 24%;
        text-align: left;
    }
}

#logo img {
  margin: 10px 10px 20px 10px;
}

@media only screen and (min-width: 640px) {
 #logo img {
    margin: 30px 20px;
    }
}


/* Uncomment the first declaration below to hide the titles on the front page 
 * Addapt the second declaration to hide a certain title. 
 * Third one is for no "Read more" on the first page. */ 
/*
.front h2 a {
	display: none;
}
.front #node-XXX h2 a {
	display: none;
}
.front .node_read_more {
	display: none;
}
*/

/* HEADER */

div#header div#top-elements,
div#header div#logo {
    width: 24% !important;
    height: 120px;
}

div#header div#logo img {
    width: 140px;
}

div#header div#top-elements {
    text-align: right;
}

div#header div#top-elements .block {
    margin: -10px 0 0 0;
}

div#header div#logo {
    text-align: left;
}

div#header div#name-and-slogan {
    padding: 25px 0;
    width: 52% !important;
}    


@media only screen and (max-width: 768px) {
    #site-name a {
        font-size: 22px;
    }
    
    div#header div#top-elements,
    div#header div#logo {
        width: 50% !important;
        height: 90px;
    }
    
    div#header div#name-and-slogan {
        padding: 10px 0 25px 0; 
        width: 100% !important;
    }
    
    #site-slogan {
        font-size: 18px;    
    }
    
    div#header div#top-elements img {
        width: 145px;
    }
    
    div#header div#logo img {
        width: 110px;
        margin: 25px 20px;
    }
    
    .navcenter #navlist {
        border: 1px solid #515d63;
        border-width: 1px 0;
        margin: 0 20px;
        padding: 10px 20px;
    }
    
    .navcenter #navlist li a {
        padding: 2px 5% 0 0;
    }
}

h1.title {
	line-height: 1.2;
}

#header .block, #header .content {
		margin: 10px 10px 10px;
		padding: 0;
}


@media only screen and (min-width: 350px) {
	#header .block, #header .content {
		margin: 25px 10px 10px;
		padding: 0;
	}
}

@media only screen and (min-width: 769px) {
    #site-name a {
        font-size: 25px;
    }
    
    #site-slogan {
        font-size: 20px;    
    }
    
    div#header div#top-elements img {
        width: 155px;
    }
}

@media only screen and (min-width: 900px) {
    #site-name a {
        font-size: 22px;
    }
    
    #site-slogan {
        font-size: 18px;    
    }
}

@media only screen and (min-width: 1200px) {
    #site-name a {
        font-size: 28px;
    } 
    
    div#header div#top-elements img {
        width: 150px;
    }
}

@media only screen and (min-width: 1024px) {
    
    div#header div#top-elements img {
        width: 180px;
    }
}



/*******************************/
/* CUSTOM FIXED or FLUID WIDTH */
/*******************************/ 
/* First choose "Custom Layout width" in 0 Point settings page.
 * Uncomment the lines below and modify the value as you wish. 
 * E.g. 1000px for fixed width or 85% for fluid width */
/*
body.layout-fluid .sizer0 {
	width: 90%;
}
body.layout-fixed .sizer0 {
	width: 980px;
}
*/


/*******************************/
/* CUSTOM Equal width sidebars */
/*******************************/ 
/* First choose "Equal width sidebars" in 0 Point settings page.
 * Uncomment the lines below and modify the values keeping pair values. */
/*
body.l-m-r-eq .colleft, body.m-r-eq .colleft, body.l-m-eq .colleft {
	width: 199px;
	margin-left: -199px;
}
body.l-m-r-eq .colright, body.m-r-eq .colright, body.l-m-eq .colright {
	width: 199px;
	margin-right: -199px;
}
body.l-m-r-eq .outer, body.l-m-eq .outer, body.l-m-eq .outer {
	margin-left: 199px;
}
body.l-m-r-eq .outer, body.m-r-eq .outer, body.m-r-eq .outer {
	margin-right: 199px;
}
body.l-m-eq .colleft {
	width: 199px;
	margin-left: -199px;
}
body.m-r-eq .colright {
	width: 199px;
	margin-right: -199px;
}
*/


/******************************/
/* SPECIAL STATIC-MENU COLORS */
/******************************/
/* Uncomment this to have different colors for menu items. 
 * Change the values below accordingly: XXX=menu item number; YYY=background color. */

/* First menu item */
/*
#navlist li.first a {
	background: #YYY;
}
*/

/* Middle menu items */
/*
#navlist li.menu-XXX a {
	background: #YYY;
}
*/

/* Last menu item */
/*
#navlist li.last a {
	background: #YYY;
}
*/


/*******************************/
/* UPDATE ICONS FOR NEW BLOCKS */
/*******************************/
/* where XXX is the block number */

/*
#block-block-XXX .block-icon {
background: transparent url(../images/contact_48.png) no-repeat;
}
*/