/***************************
*
file name:		email.css
Theme Name: 	nentrium email page defaults
Designed by: 	nentrium graphics
Description:	defaults for contact / email pages
*
*****************************/

.email-box {
	/* border:2px solid blue; */
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-items: center;
    justify-content: space-between;
	margin: 10px 0 10px 0;
    width: 50%;
	
	font-family:Arial, Georgia," Times New Roman",Times,serif;
    font-size: 16px;
	font-weight: normal;
    line-height: 18px;
}

.email-part {
	/*	change margin for email-part  */
	margin: 0 auto;
	margin-top: 10px;
}

.email-box form {
    margin: 0 0 0 0;
	width:330px;
}

.email-part form {
	width:100%;
}
	
.email-box fieldset  { 									/* moves legend and form down from top */
    border: 2px solid gray;	
	margin: 0 auto;									/* places line around form */
	width: 300px;
}

.email-box legend {
    margin: 0 0 0 10px;									/* moves legend text to right from left hand corner */
    padding: 5px;
    position: static;
    border: 0;
    top: auto; left: auto;
    float: none;										/* place legend text */
    display: block;
    font-size: 16px;
    line-height: 18px;
}

.email_error {
    margin: 6px 5px 4px 5px;
    padding: 4px;
    border: 3px solid white;
}

.contacts .email_error p {
    color: #f00;
}	
	
.email-box p  { 
	color: #000;
}
	
.email-box .flex-container {												/* for td */
	display: flex;							/* table label / input */
	flex-direction: row;
}

/* set all these form properties the same */
.email-box label, .email-box input, .email-box select, .email-box textarea, .email-box button{
	border:1px solid black;
	box-sizing:border-box;
	float:none;
    height:30px;
	line-height:normal;
	margin: 4px 5px 4px 5px;
	padding:4px;
	width:200px;
	/*																added fonts below 04-01-21
	font-size:inherit;
    font-family:inherit;
	font-stretch:inherit;
    font-style: inherit;
    font-weight: inherit;
    text-align: inherit;
    text-decoration: inherit; */

}

.email-box label{
	/*	set label with a border same as background so its not visable */
	/*	changing size to 0px from its set width moves contents */
	border:1px solid white;
	width:100px;
}

.email-part label{
	/*	change width for email-part  */
	width:200px;
}

/*	unset height and width so inline row and column remains in effect */
.email-box textarea{
    min-height:75px;
	max-width:230px;
	resize: vertical;
	text-align: left;
	
	margin: 0;
	padding:0;
}

.email-box .messdiv textaera{
}

.email-box .messdiv {
	border:0;
	margin: 4px 5px 4px 5px;
	padding:4px 0 4px 0;
	width:200px;
}

.email-box .mess-cnt {
	width:200px;
}

/*	unset height and width so inline row and column remains in effect */
span {
	width:200px;
}

.email-done legend, .email-done p, .email-done input{
	text-align:center;
}
	


/*======================================================================================================*/
/*======================================================================================================*/

/***** iPad Portrait & Landscape *****/
/*

/*===================================================================*/

/***** iPad portrait *****/
/*
and (-webkit-min-device-pixel-ratio: 1)



@media screen
and (max-width : 375px)
and (orientation:portrait)
and (-webkit-device-pixel-ratio : 2)
{
	
@media screen
and (max-width:200px)
and (orientation:landscape)
and (min-device-width : 1024px)
*/

@media screen
and (max-width : 768px)
/*													mobile media code
and (max-width : 768px)
and (orientation:portrait)
and (-webkit-min-device-pixel-ratio: 1)*/
{

	.email-box form {
		margin: 0 0 0 0;
		width:280px;
	}
	
	.email-box fieldset {
		width:280px;
	}
	
	.email-box table {
		margin:0 auto;
	}
	
	.email-box .flex-container {
		flex-direction: column;
	}

	.email-box .flex-container > label{
		margin: 4px 5px 0px 5px;
		text-align:left;
	}

	.email-box .flex-container > input[type=text], 
	.email-box .flex-container > input[type=number], 
	.email-box .flex-container > input[type=password], 
	.email-box .flex-container > input[type=submit], 
	.email-box .flex-container > input[type=date], 
	.email-box .flex-container > select, 
	.email-box .flex-container > textarea{
		float:unset;
		margin:0 auto;
		margin-top:0px;
		margin-bottom:5px;
	}

}

/*===================================================================*/

/***** iPad Landscape *****/
@media screen
and (max-width : 667px){

	
	.detail-box {
		width: 100%;
	}
	
	.email-box {
		width: 100%;
	}

	.email-box form {
		width:330px;
	}
	
	.email-box .flex-container {
		flex-direction: row;
	}
}

/*===================================================================*/

/***** iPad Landscape *****/
@media screen
and (max-width : 1024px)
and (orientation:landscape)
and (-webkit-min-device-pixel-ratio: 1){
	
}

/*======================================================================================================*/
/*======================================================================================================*/

/* from http://stephen.io/mediaqueries/ */

/* iPhone 6, 7, & 8 Plus in portrait & landscape
@media screen
and (min-device-width : 414px)
and (max-width : 736px)
*/

/* iPhone 6, 7, & 8 Plus in portrait
@media screen
and (min-device-width : 414px)
and (max-width : 736px)
and (orientation : portrait)

/* iPhone 6, 7, & 8 Plus in landscape
@media screen
and (min-device-width : 414px)
and (max-width : 736px)
and (orientation : landscape)
*/

/*
iPhone 8
@media screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 2)
*/



/*======================================================================================================*/
/***** iPhone 6, 7, & 8 in portrait */
/* width 375 height 667 */
/*===================================================================*/

/*
@media screen
and (min-device-width : 375px)
and (max-width : 667px)
and (orientation:portrait)
and (-webkit-device-pixel-ratio : 2)
*/

@media screen
and (max-width : 375px)
and (orientation:portrait)
{
	.email-box .content-sql-tab .flex-container > label,
	.email-box .content-sql-tab .flex-container > input[type=text], 
	.email-box .content-sql-tab .flex-container > input[type=number], 
	.email-box .content-sql-tab .flex-container > input[type=password], 
	.email-box .content-sql-tab .flex-container > input[type=submit], 
	.email-box .content-sql-tab .flex-container > input[type=date], 
	.email-box .content-sql-tab .flex-container > select, 
	.email-box .content-sql-tab .flex-container > textarea{
		float:unset;
		margin:0 auto;
		margin-top:5px;
		margin-bottom:5px;
	}
}