/* 
-------------------------------------
TITLE		: Style Sheet for Complaint Form
DATE		: May 25, 2017
AGENCY		: DOL / OFCCP
AUTHOR		: VIATEQ CORPORATION / Dennis R.Dunston
NOTES		: 
-------------------------------------
*/


/* Old IE bug: won't recognise first rule. */
.initial { text-align:center; }

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

body 		{
color:		black;
//font-family: 	Palatino, Georgia, serif;
font-family: 	Arial, Helvetica, sans-serif;
font-size:	100%;
padding:	0;
margin:		0;
padding-bottom:	3em;
text-align:	left;
border:		0;
}

/* 
-------------------------------------
HTML
-------------------------------------
*/

html 		{
border:		0;
margin:		0;
padding:	0;
font-size:	1em;
}

-------------------------------------
IMG
-------------------------------------
*/
img 		{
//max-width: 100%;
//width: auto;
//height: auto;
max-width: 100%;
max-height: 100%;
}


/* 
-------------------------------------
HEADING
-------------------------------------
*/

a, h1, h2, h3, h4, ul, ol, li, p, label { font-family:arial, verdana, sans-serif;}
a, h1, h2, h3, h4, ul, ol, li, p, label { color:black;}
h1, h2, h3, h4, ul, ol, li { text-align:left;}
a, h1, h2, h3, h4, ul, ol, li, p, label { vertical-align: text-center;}

h1 		{ font-size: 18px; letter-spacing: 2px;}
a, h2, ul, ol, li, p, label, input { font-size: 12px; line-height:130%; letter-spacing: 2px; }
h3 		{ font-size: 11px; letter-spacing: 2px;}
h4 		{ font-size: 10px; letter-spacing: 2px;}

h1, h2, h3, h4 { margin:0; padding:0;}

footer 		{ font-size: 13px; color:black;}

/* 
-------------------------------------
Highlights label and input.
-------------------------------------
*/
 
input:hover, 
input:focus, 
input:active, 
select:hover, 
select:focus, 
select:active, 
textarea:hover, 
textarea:focus, 
textarea:active { 
outline:	solid 2px black;
}

textarea {
   resize: none;
border: 		1px solid black;
}

/* 
-------------------------------------
INPUT, CHECKBOX, TEXTAREA, RADIO
-------------------------------------
*/
input 		{
width: 			auto;
border: 		0;
outline: 		0;
}


input[type="button"] { 
outline:		2; 
border: 		solid 1px black;
}

input, select, textarea { 
border-bottom: 		1px solid black;
//margin-left: 33px;
//margin-left: 41.79em;
//border: 		solid 1px #3d3d3d;
}

input[type="checkbox"]:hover, 
input[type="checkbox"]:focus, 
input[type="checkbox"]:active, 
input[type="radio"]:hover, 
input[type="radio"]:focus, 
input[type="radio"]:active { 
outline:	solid 3px black;
//overflow: hidden;
}

input[type="checkbox"]:checked { 
//outline:	solid 9px red;
-webkit-appearance:checkbox;
//-webkit-appearance: none;
}





/* 
-------------------------------------
PARAGRAPH  line-height:100%;
-------------------------------------
*/
p {
    display: block;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left: 0;
    margin-right: 0;

}

p.old {
    display: block;
    margin-top: 1em;
    margin-bottom: -1em;
    margin-left: 0;
    margin-right: 0;
}

p.br 		{ line-height:120%; margin-bottom: 0em;}
p.newline 	{ line-height:120%; margin-bottom: 4em;}
p.top 		{ margin-top: -0.5em; padding-left: 24px; text-indent: -24px;}
p.top2 		{ margin-top: 9em; padding-left: 24px; text-indent: -24px;}

p.indent	{ padding-left: 10px; }
p.indent2	{ padding-left: 32px; }
p.indent_small	{ text-indent: -25px; padding-left: 33px; }
p.indent44 	{ margin-top:-2.5em; margin-left:20px; display:inline-block; font-size: 12px;}
p.indent4 	{ margin-top:-1.5em; float:left; display:inline-block; font-size: 11px; vertical-align: text-top;}


/* 
-------------------------------------
LABELS
-------------------------------------
*/


label 			{display: inline; }

label.adj2 		{margin-top:-2.5em; margin-left:20px; display:block; font-size: 12px;}
label.adj3 		{margin-top:-2.5em; margin-left:20px; display:block; font-size: 12px;}
label.adj4 		{margin-top:-1.56em; margin-left:20px; display:block; font-size: 12px;}
label.small 		{display:inline-block; font-size: 11px; vertical-align: text-top;}
label.other 		{margin-top:-1.5em; margin-left:20px; display:inline-block; font-size: 11px; vertical-align: text-top;}
label.other2 {
	display: 		-webkit-box;
	display: 		-webkit-flex;
	display: 		-ms-flexbox;
	display: 		flex;
	-webkit-box-align: 	center;
	-webkit-align-items: 	center;
	-ms-flex-align: 	center;
	align-items: 		center;
	padding-right:		5px;
	margin-left: 		5px;
}

/* 
-------------------------------------
LABELS
-------------------------------------
*/


/*
place text right in front of checkbox
*/
label.basic 		{margin-top:-1.5em; margin-left:7px; padding-left: 15px; display:block; font-size:12px; vertical-align: text-top;}

/*
place text right in front of checkbox
*/

label.basic2 		{margin-top:-1.5em; margin-left:9px; padding-left: 15px; display:block; font-size: 11px; vertical-align: text-top;}

/*
Puts a shade over the label
label:hover {background: #e6f7ff;}
*/
 
/*
input[type=checkbox]:selected  {background: #C9E1FB; background: #0f0;}
*/ 
 
/*
Use these to space the text from the input.
*/ 
  
input[type=text] {
	-webkit-box-flex: 	0;
	-webkit-flex: 		none;
	-ms-flex: 		none;
	flex: 			none;
	margin-left: 		5px; 
	vertical-align:		top; 
	padding-right:		5px;
	padding-left:		6px;
}

input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 	0;
	-webkit-flex: 		none;
	-ms-flex: 		none;
	flex: 			none;
	outline: 		1px solid black;
	overflow: 		hidden;
}

/* 
-------------------------------------
FORMS
-------------------------------------
*/

#DOL_FORM {
background-color:		white;
width: 				780px;
height: 			780px;
padding: 			10px;
margin: 			0 auto;
}

#DOL_FORM div {
width: 50px;
height: 50px;
border: 1px solid #000000;
float:left;
padding: 10px;
text-align:left;
}

#DOL_FORM_MOBILE div {
padding: 10px;
text-align:left;
}

/* 
-------------------------------------
DIV
-------------------------------------
*/

div.centered      {width: 900px; }
div.columns       {width: 630px;  margin: 0 auto;}
div.columns div   {width: 300px; height: 200px; float: left; padding:5px;}
div.clear         {clear: both; }

div.border	{
border-size:2px;
border-style:solid;
border-color:black;
}

div.col {
float: left;
width: 25%;
}



/* 
-------------------------------------
BUTTONS
-------------------------------------
*/
button.right 	{color:	black; float: right; margin: 0px  10px 0px 10px;}
/* 
-------------------------------------
LINKS
-------------------------------------
*/
a 		{ color: black;}
a:visited 	{ color: black; 	}        /* visited links */
a:active 	{ color: black;}        /* active links */
a:focus 	{ background-color:none; color:black;}
a:hover 	{ background-color:none; color:black;}
a:active 	{ background-color:none; color:black;}
a img 		{ border: 0;}
a:link IMG 	{ border: 2px solid blue }
a:visited IMG 	{ border: 2px solid red }
a:active IMG 	{ border: 2px solid lime }
a:link  	{ border: none; float: right;}

/* 
-------------------------------------
FOOTER
-------------------------------------
*/
footer {
border-size:2px;
border-style:solid;
border-color:black;
border-width:thin;
margin-left: 41.79em;
margin-right: -1em;
padding:13px;
width: 190px; // 1/4 of 100%
height: auto;
//display: inline-block;
display: block;
text-align: center;
}

/* 
-------------------------------------
BLOCKS
-------------------------------------
*/
p.mobile {
   // display: inline;
}

input.mobile {
    display: inline-block;
}


div.mobile {
	vertical-align: top;
    	display: inline-block;
}

label.mobile {
    display: inline-block;
}