@charset "UTF-8";

@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300);


/* -------------------------

TABLE OF CONTENTS
	• LAYOUT
		- Logos
		- Main Navigation
		- Body Content
		- Footer
	• TYPOGRAPHY
	• IMAGES
	• FORM ELEMENTS
	• MMENU OVERRIDES
	• RESPONSIVE
	
------------------------- */



/* ***********************
	LAYOUT 
*********************** */

/*
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	}
*/

body { 
	background: #1a1718; /* this helps to extend the footer's BG color */
	color: #777;
	font: 0.9em/1.4em "Open Sans", serif; 

	}



#container { background: white; }

/*
.searchButton {
    margin-left:-10px;
    height:23px;
}
*/

/* --- Logos & Icons Featured in the Masthead --- */

.header_logo { 
	float: left;
	position: relative; 
	top: 10px; 
	/*left: 28px;*/ /* need this value to offset the displacement caused by the ZD Tab logo */
	}

.header_crm { width: auto; /* height: 50px; */ height: 40px; top: 8px; }
.header_itm { width: auto; /* height: 40px; */ height:35px; top: 6px; }
.header_erp,
.header_voip,
.header_emedia,
.header_zd { width: auto; height: 25px; }
.header_voip { top: 13px; }

/* Set logo images */
/*
.header_crm {
    background:url(/images/logo_header_crm_white.png) no-repeat;
}
.header_itm {
    background:url(/images/logo_header_itm.png) no-repeat;
}
.header_erp {
    background:url(/images/logo_header_erp.png) no-repeat;
}
.header_voip{
    background:url(/images/logo_header_voip.png) no-repeat;
}
.header_emedia{
    background:url(/images/logo_header_emedia.png) no-repeat;
}
.header_tb{
    background:url(/images/logo_toolbox_header.png) no-repeat;
}
*/

.logo_zd_tab { 
	float: right; 
	width: 56px; height: auto; 
	}


.masthead_crm {}
.masthead_erp {}
.masthead_itm {}
.masthead_voip {}
.masthead_emedia {}
.masthead_zd {}



/* --- MAIN NAVIGATION --- */

.masthead_wrap { 
	margin: 0 auto;
	width: 960px;
	text-align: center;
	z-index: 1001; 
	}

.masthead {
	/*border-top: 5px solid Black;*/
	border-bottom: 1px solid #939393;
	margin: 5px auto;
	height: 45px;
	z-index: 1001;
	}
		

.masthead_grey {	
	background: #373737;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #292929),
		color-stop(1, #4D4D4D)
	);
	background-image: -o-linear-gradient(bottom, #292929 0%, #4D4D4D 100%);
	background-image: -moz-linear-gradient(bottom, #292929 0%, #4D4D4D 100%);
	background-image: -webkit-linear-gradient(bottom, #292929 0%, #4D4D4D 100%);
	background-image: -ms-linear-gradient(bottom, #292929 0%, #4D4D4D 100%);
	background-image: linear-gradient(to bottom, #292929 0%, #4D4D4D 100%);
	}	
	 
		.masthead_crm { 
			background: #ECECEC;
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0, #F9F9F9),
				color-stop(0.02, #F7F7F7),
				color-stop(1, #D7D7D7)
			);
			background-image: -o-linear-gradient(bottom, #F9F9F9 0%, #F7F7F7 2%, #D7D7D7 100%);
			background-image: -moz-linear-gradient(bottom, #F9F9F9 0%, #F7F7F7 2%, #D7D7D7 100%);
			background-image: -webkit-linear-gradient(bottom, #F9F9F9 0%, #F7F7F7 2%, #D7D7D7 100%);
			background-image: -ms-linear-gradient(bottom, #F9F9F9 0%, #F7F7F7 2%, #D7D7D7 100%);
			background-image: linear-gradient(to bottom, #F9F9F9 0%, #F7F7F7 2%, #D7D7D7 100%);			
			
			height: 56px; 
			}
	
		.masthead_erp {
			background: #666666;
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0, #585858),
				color-stop(1, #3E3E3E)
				);
			background-image: -o-linear-gradient(bottom, #585858 0%, #3E3E3E 100%);
			background-image: -moz-linear-gradient(bottom, #585858 0%, #3E3E3E 100%);
			background-image: -webkit-linear-gradient(bottom, #585858 0%, #3E3E3E 100%);
			background-image: -ms-linear-gradient(bottom, #585858 0%, #3E3E3E 100%);
			background-image: linear-gradient(to bottom, #585858 0%, #3E3E3E 100%);			
			}
	
		.masthead_itm {
			background: #336699 ;
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0, #1F50B3),
				color-stop(1, #252A69)
				);
			background-image: -o-linear-gradient(bottom, #1F50B3 0%, #252A69 100%);
			background-image: -moz-linear-gradient(bottom, #1F50B3 0%, #252A69 100%);
			background-image: -webkit-linear-gradient(bottom, #1F50B3 0%, #252A69 100%);
			background-image: -ms-linear-gradient(bottom, #1F50B3 0%, #252A69 100%);
			background-image: linear-gradient(to bottom, #1F50B3 0%, #252A69 100%);
			
            background-image: -webkit-gradient(
	            linear,
	            left top,
	            left bottom,
	            color-stop(0.01, #575FB9),
	            color-stop(0.02, #1F50B3),
	            color-stop(1, #252A69)
            );
            background-image: -o-linear-gradient(bottom, #575FB9 1%, #1F50B3 2%, #252A69 100%);
            background-image: -moz-linear-gradient(bottom, #575FB9 1%, #1F50B3 2%, #252A69 100%);
            background-image: -webkit-linear-gradient(bottom, #575FB9 1%, #1F50B3 2%, #252A69 100%);
            background-image: -ms-linear-gradient(bottom, #575FB9 1%, #1F50B3 2%, #252A69 100%);
            background-image: linear-gradient(to bottom, #575FB9 1%, #1F50B3 2%, #252A69 100%);	
            height:51px;				
			}
			
		.masthead_voip {
			background: #E11721;
			
			/*
			background: #B0B0B0;
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0, #F2F2F2),
				color-stop(1, #C4C4C4)
			);
			background-image: -o-linear-gradient(bottom, #F2F2F2 0%, #C4C4C4 100%);
			background-image: -moz-linear-gradient(bottom, #F2F2F2 0%, #C4C4C4 100%);
			background-image: -webkit-linear-gradient(bottom, #F2F2F2 0%, #C4C4C4 100%);
			background-image: -ms-linear-gradient(bottom, #F2F2F2 0%, #C4C4C4 100%);
			background-image: linear-gradient(to bottom, #F2F2F2 0%, #C4C4C4 100%);
			*/
			
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0.01, #E63A42),
				color-stop(0.02, #E11721),
				color-stop(1, #891519)
				);
			background-image: -o-linear-gradient(bottom, #E63A42 1%, #E11721 2%, #891519 100%);
			background-image: -moz-linear-gradient(bottom, #E63A42 1%, #E11721 2%, #891519 100%);
			background-image: -webkit-linear-gradient(bottom, #E63A42 1%, #E11721 2%, #891519 100%);
			background-image: -ms-linear-gradient(bottom, #E63A42 1%, #E11721 2%, #891519 100%);
			background-image: linear-gradient(to bottom, #E63A42 1%, #E11721 2%, #891519 100%);		
			
			}



.nav_wrap { margin: 0 auto; width: 640px; }

.main-nav ul { position: relative; top: -35px; left: 120px;  }

.main-nav li, .main-nav li a {
	color: green;
	display: inline; 
	font: 0.9em/1em "Open Sans", sans-serif;
	font-weight: ;
	list-style-type: none;
	padding-right: 10px;
	}



/* --- BODY CONTENT --- */

.main_content { background: White; padding: 2.5em 2em; }

#content_wrap { 
	background: White;
	margin: 0 auto;
	padding: 30px; 
	width: 960px; height: 100%;
	
	/*-webkit-box-shadow: 0px 8px 6px 2px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 8px 6px 2px rgba(0,0,0,0.1);
	box-shadow: 0px 8px 6px 2px rgba(0,0,0,0.1);*/

	z-index: 100;
	}


.col_single { width: 300px; }
.col_double { width: 580px;}
.col_full   { width: 100%; }

.col_single,
.col_double,
.col_wide {  margin-bottom: 20px; }

.left 	{ float: left; }
.right 	{ float: right; }
.center { margin: 0 auto; }



/* --- FOOTER --- */

.footer-info {
	background: #1a1718;
	color: #999;
	font: 13px/1.25em "Open Sans", sans-serif;
	text-align: center;
	padding-top: 20px;
	width :100%; height: 150px;
	}



/* ------- DEFINITION LIST & STYLES ------- */


dl, dd, dt { color: #666; font-size: 0.9em; line-height: 1.4em }

dl { 
	background: white;
	border: 1px solid #cccccc;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	}

dt { margin-bottom: 0.75em; }
dt + dd { margin-bottom: 20px; }

dt, dd {  padding: 0 12px; }	

.list_wrap { background:; }

.list_title { 
	background: #cccccc;
	border-bottom: 1px solid #999;
		-webkit-border-top-left-radius: 6px;
		-webkit-border-top-right-radius: 6px;
		-moz-border-radius-topleft: 6px;
		-moz-border-radius-topright: 6px;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	
	color: white; 
	font-size: 1.1em;
	font-weight: 700;
	padding: 5px 10px;
	text-align: center; 
	text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
	text-transform: capitalize; 
	width: 100%;
	}
	
.list_logo { 
	margin: 20px auto;
	text-align: center; 
	width: 120px; height: auto; 
	}

.list_author  {}
.list_copy  {}


/* --- LAYOUT ASIDES --- */

.clearfix { clear: both; /*height: 0; margin: 0; */} 



/* ***********************
	TYPOGRAPHY 
*********************** */

p { margin: 0 0 1em; }

/* default header styles */
/*h1, h2, h3, h4, h5, h6 {
	color: #666;
	font-family:;  
	font-weight:;
	line-height: 1.15em; 
	margin-bottom: 0.75em; 
	text-align: left;
	}*/

/* set in "ems" for optimial scalibity, especially for mobile devices; 
   it's pixel equlivent is denoted to the right, based on a standard 16px base web-browser pixel size */ 
/*h1 { font-size: 2.250em;*/ /* 36px */ /*}*/
/*h2 { font-size: 1.875em;*/ /* 30px */ /*}*/
/*h3 { font-size: 1.500em;*/ /* 24px */ /*}*/
/*h4 { font-size: 1.313em;*/ /* 21px */ /*}*/
/*h5 { font-size: 1.125em;*/ /* 18px */ /*}*/
/*h6 { font-size: 0.875em;*/ /* 14px */ /*}*/

/* ensures the spacing for any HEADER tag at the very beginning of the page is flush to the top */
/*section > h1,
section > h2,
section > h3,
section > h4,
section > h5,
section > h6 { margin-top: 0; margin-bottom: 1.5em;}*/

/* controls the spacing between a PARAGRAPH and HEADER tag, in that semantic order */
/*p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6 { margin-top: 1.5em; }*/ 


/* ------ Fancier Header Style Treatments ------ */

.letterpress { color: #333; text-shadow: 0px 1px 1px #ccc; }

h3 + .copy_sponsor { position:relative; top: -1.5em; color: Firebrick; text-indent: 1.25em;  }

.copy_required { font-size:0.8em; font-style:italic; font-weight: 100; }



/* draw any selected text XXXX on a XXXXX background */
::-moz-selection { color: DimGray;  background: Cornsilk ; }
::selection      { color: DimGray;  background: Cornsilk ; }

.btn_input::-moz-selection { color: DimGray;  background: /*Khaki*/ Wheat   ; }
.btn_input::selection      { color: DimGray;  background: /*Khaki*/ Wheat   ; }



/* --- FOOTER STYLING --- */

.footer-info a:link, .footer-info a:visited { color: #0094c1; text-decoration: none; }
.footer-info a:hover, .footer-info a:active { color: white; text-decoration: none;}

.footer-links { width: 480px; }
.footer-sub-links { color: #666; margin: 24px 0 0; }	

.footer-info small { color: #666; position: relative; top: -1px;}

.forced-return { display: none; }


.copyright-info { 
	font-size: 10px; 
	line-height: 1.3em;
	width: 560px; /* may have to readjust this for responsive */
    color:#999;
	}

.left-justified { text-align: left; }

.sponsors { 
    font-size: 9px;
    color:#999;
}

/* this centers specific content, re-adjust for responsive */
.footer-links, 
.copyright-info { 
    margin: 0 auto;
}






/* ***********************
	IMAGES 
*********************** */

.logo_iad { width:14px; height: auto; margin: 0 1px 0 4px; position: relative; top: 5px; vertical-align:auto;}
.logo_truste { width:82px; height: auto; margin: 0 0 0 7px; position: relative; top: 10px; vertical-align:auto;}
.logo_zd { width:65px; height: auto; margin: 0 0 20px; vertical-align:auto;}




/* ***********************
	FORM ELEMENTS
*********************** */
/*
.form { 
	background: AliceBlue ;
	border: 0px solid Gainsboro;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	
	padding: 3.2%; 
	padding-right: 0;*/ /* for desktop level, add for responsive */
	
/*
        }

.form > label { 
	color: DimGrey;
	display: inline-block;
	font-size: 0.8em;
	margin: 0 3.2% 15px 0;
	width: 46.2%;
	}


.form > label > span { display: block; } /* force a return after the label */	
/*
input {
	border-spacing: 0;
	border: 1px solid #ccc;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	
	color: Black;
	padding: 0 6px;
	width: 100%; height: 25px;
	}

.btn_input,
.shadow  {
	-moz-box-shadow: inset 1px 1px 3px #cecece;
	-webkit-box-shadow: inset 1px 1px 3px #cecece;
	box-shadow: inset 1px 1px 3px #cecece;
	}

.btn_submit {
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #2FA1FE),
		color-stop(1, #0E67AB)
	);
	background-image: -o-linear-gradient(bottom, #2FA1FE 0%, #0E67AB 100%);
	background-image: -moz-linear-gradient(bottom, #2FA1FE 0%, #0E67AB 100%);
	background-image: -webkit-linear-gradient(bottom, #2FA1FE 0%, #0E67AB 100%);
	background-image: -ms-linear-gradient(bottom, #2FA1FE 0%, #0E67AB 100%);
	background-image: linear-gradient(to bottom, #2FA1FE 0%, #0E67AB 100%);
		
	border: 1px solid CornflowerBlue ;
	border-radius: 5px;
		-moz-box-shadow: 0px 0px 2px 2px #cecece;
		-webkit-box-shadow: 0px 0px 2px 2px #cecece;
		box-shadow: 0px 0px 2px 2px #cecece;
	color: white;
	font-size: 1.2em; 
	font-weight: bold;
	margin: 10px 0;
	width:100px; height:32px;
	}

.btn_submit:hover { 
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, rgb(250, 172, 47)),
		color-stop(1, rgb(194, 66, 2))
	);
	background-image: -o-linear-gradient(bottom, rgb(250, 172, 47) 0%, rgb(194, 66, 2) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(250, 172, 47) 0%, rgb(194, 66, 2) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(250, 172, 47) 0%, rgb(194, 66, 2) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(250, 172, 47) 0%, rgb(194, 66, 2) 100%);
	background-image: linear-gradient(to bottom, rgb(250, 172, 47) 0%, rgb(194, 66, 2) 100%);
	border: 1px solid Cornsilk;
	cursor:pointer;
	}


.form_checkbox { width: auto; background: Green; }

.form_checkbox + p,
.form_checkbox + span { 
	display: inline; 
	color:;
	font-size: 0.8em; 
	font-style: italic; 
	line-height: 0.7em;
	position: relative; font-size: 0.8em; left: 0.5em;
	vertical-align: super;
	}

.checkbox_set { margin-bottom: 0.5em; display: block; }

.form > label + .form_checkbox,
.testing,
.testing > span,
label.testing {width: 100%;color: green;}

select { width: 100%; }

textarea.message { display:block; }

textarea:focus, 
input:focus { border: 1px solid #09C; }
*/


/* ***********************
	!!! TESTING ONLY !!!
*********************** 

.masthead_wrap { background: HotPink; } 

.col_single { background: LightSkyBlue; }
.col_double { background: Moccasin ; }
.col_full { background: DarkSeaGreen ; }

.footer-info { background: ; }

*/


/* ***********************
	RESPONSIVE
*********************** */


/* 1020px = ??.0em -- ??? */
@media screen and (max-width: 1020px) { 

	#content_wrap { width: 94%; padding: 3%; }
	
	.masthead_wrap { margin: 0 auto; width: 100%; }
	
	.logo_zd_tab { position: relative; right: 3%; }
	.header_logo { float: left; /* left: 28px; */ }
	
	.col_double  { width: 64.4444%; }
	.col_single { width: 33.3333%; }
	.col_wide  { width: ; }
		
}

@media screen and (max-width: 767px)
{
    body{
        padding-left:0;
        padding-right:0;
    }
}


/* 640px = 40.0em -- ??? */
@media screen and (max-width: 639px) { 
	
	.main-nav { display: none; }
	
	.col_single, 
	.col_double { width: 100%; }

	.forced-return { display: inline; }
	
	.footer-links, 
	.footer-sub-links,
	.copyright-info { width: 80%; }
	
	.footer-sub-links { margin: 24px 10% 0; }
	
	.sponsors { padding-bottom: 5em; }
	
	
	form { padding: 0 /* 3.2% */; } /* resets the padding to apply to all sides */
	form > label { width: 100%; /*font-size: 0.8em; margin: 0 15px 15px 0;*/ }
	
}


/* 568px = 35.5em -- Targeting iPhone 5/5c/5s in landscape mode */
@media screen and (max-device-width: 568px) and (orientation: landscape) {
	
	
	
	
	body { font: 0.75em/1.4em "Open Sans", serif; }
	
	#content_wrap { width: 100%; padding: 5%; font-size: 0.6em; }
	
	#content_wrap {  }
	
	.masthead { border-top: 3px solid Black; height: 53px; }
	
	/*h1 { font-size: 3.375em;*/ /* 54px */ /*}*/
	/*h2 { font-size: 3.000em;*/ /* 48px */ /*}*/
	/*h3 { font-size: 2.875em;*/ /* 46px */ /*}*/
	/*h4 { font-size: 2.500em;*/ /* 40px */ /*}*/
	/*h5 { font-size: 2.250em;*/ /* 36px */ /*}*/
	/*h6 { font-size: 1.875em;*/ /* 30px */ /*}*/
	
	
	.copy_required { font-size: 1em;}
	
	dl, dd, dt { font-size: 1.2em; line-height: 1.4em }
	.list_title { font-size: 3em; }
	.list_author  {font-size: 1.6em; margin-top: 20px;}
	
	/*
	form > label { font-size: 1.5em; width: 46.2%; }
	.form_checkbox + p,
	.form_checkbox + span { font-size: 0.9em; top: 5px; }
	
	.btn_submit { font-size: 2.5em; }
        */
}

@media screen and (max-width: 320px) { 
	
	#content_wrap { width: 100%; padding: 5%; }
	
	.header_logo { /* left: 5.5%; */ }
	.masthead { border-top: 3px solid Black; height: 53px; }
	
	dl, dd, dt { font-size: 1em; line-height: 1.4em }
	.list_title { font-size: 1.3em; }
	.list_author  {font-size: 1.2em; margin-top: 20px;}
	
	/*form { padding: 5%; }*/
    form{padding:0 0 0 0;}
	form > label { font-size: 1.1em; }
	.form_checkbox + p,
	.form_checkbox + span { top: 5px; }
	
}