﻿/*DenverLocksmithInc.com CSS Styles*/



.main		{

	width:860px;

	margin-left:auto;

	margin-right:auto;

	border:28px;

	border-color:#A5CAE5;

	border-style:solid;

}

.content	{

	width:inherit;

}

.header2	{

	height:40px;

}

.toplinks	{

	text-align:right;

	font-weight:bold;

	background-color:#A5CAE5;

}

.mainpic	{

	width:inherit;

}

td	{

	vertical-align:top;

}

.marquee.marquee	{

	width:554px;

	font-weight:bold;

	font-size:10pt;

}

.header3	{

	text-align:center;

	font-weight:bold;

}

.copyrights		{

	text-align:center;

	font-weight:bold;

}

.locksmithbrands	{

	text-align:center;

}

h1		{

	text-align:center;

	font-size:16pt;

}

li		{

	font-weight:bold;

	width:auto;

}

.tablelist	{

	width:100%;

	margin-left:auto;

	margin-right:auto;

}

body		{

	font-family:"Segoe UI", Tahoma, Geneva, Verdana;

	font-size:12pt;

}

.service	{

	width:283px;

}

p	{

	margin:4px;

}

.bottomlinks	{

	text-align:center;

	font-size:9pt;

	font-weight:bold;

	text-decoration:none;

}

a:link	{

	text-decoration:none;

	color:#0329BD;

	font-weight:bold;

}

a:visited	{

	text-decoration:none;

	color:#0329BD;

	font-weight:bold;	

}

a:hover	{

	text-decoration:none;

	color:#000000;

	font-weight:bold;	

}

.topbar	{

	height:8px;

}

.imgnoborder	{

	border:0px;

}
#phone-media {
	display: none;
}.icons{height:45px;width:35px}
@media only screen and (max-width:1000px){#phone-media {
	display: inline;
	width: 100%;
	text-align: left;
	float: left;
	font-size: 24px;
	background-color: #F93;
	padding-top: 5px;
	padding-bottom: 5px;
}#phone-media a:link{color: #fff;}} 





/* Global reset for better sizing */
    *, *::before, *::after {
        box-sizing: border-box;
    }
    /* FORM WRAPPER */
form.CUS {
    max-width: 900px;
    width: 100%;
    margin: 20px auto;
    padding: 20px;
    background: #f9fafb;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: system-ui, sans-serif;
}

/* FLEX FIELDSET */
form.CUS fieldset {
    display: flex;
    flex-wrap: wrap;
    border: none;
    padding: 0;
    margin: 0;
}

/* BASE BLOCK STYLE */
form.CUS fieldset > p {
    width: 100%;
    padding: 10px;
    margin: 0;
    font-size: 0.95rem;
    color: #444;
}

/* Universal input/select styling */
form.CUS input,
form.CUS select,
form.CUS textarea {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

/* ===============================
   ROW 1: Name, Phone, Address
=============================== */
form.CUS fieldset > p:nth-of-type(1),
form.CUS fieldset > p:nth-of-type(2),
form.CUS fieldset > p:nth-of-type(3) {
    width: 33.333%;
}

/* ===============================
   ROW 2: City, State, Zip Code
=============================== */
form.CUS fieldset > p:nth-of-type(4),
form.CUS fieldset > p:nth-of-type(5),
form.CUS fieldset > p:nth-of-type(6) {
    width: 33.333%;
}

/* ===============================
   SERVICE NEEDED TEXTAREA
=============================== */
form.CUS fieldset > p:nth-of-type(7) {
    width: 100%;
}

/* ===============================
   SERVICE DATE (Month, Day, Year)
   → ALL 3 IN ONE ROW
=============================== */

/* Make the 8th <p> (Service Date block) a flex row */
form.CUS fieldset > p:nth-of-type(8) {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: flex-start;
}

/* Month, Day, Year = 3 equal flex columns */
form.CUS fieldset > p:nth-of-type(8) select#service_date,
form.CUS fieldset > p:nth-of-type(8) select#service_day,
form.CUS fieldset > p:nth-of-type(8) input#service_year {
    flex: 1 1 0;
    width: auto;          /* flex handles width */
    margin-top: 6px;
}

/* ===============================
   SERVICE TIME (Full width)
=============================== */
form.CUS fieldset > p:nth-of-type(9) {
    width: 100%;
}

/* ===============================
   SUBMIT BUTTON (Full width)
=============================== */
form.CUS fieldset > p:nth-of-type(10) {
    width: 100%;
}

form.CUS input[type="submit"] {
    width: 100%;
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

form.CUS input[type="submit"]:hover {
    background: #1d4ed8;
}

/* Hide honeypot */
form.CUS input.subject {
    display: none;
}

/* ===============================
   MOBILE RESPONSIVE (stack fields)
=============================== */
@media (max-width: 600px) {

    form.CUS fieldset > p {
        width: 100%;
        padding: 6px 0;
    }

    /* Month, Day, Year full width stacked on mobile */
    form.CUS fieldset > p:nth-of-type(8) {
        flex-direction: column;
        gap: 6px;
    }

    form.CUS fieldset > p:nth-of-type(8) select#service_date,
    form.CUS fieldset > p:nth-of-type(8) select#service_day,
    form.CUS fieldset > p:nth-of-type(8) input#service_year {
        flex: none;
        width: 100% !important;
    }
/* ===============================
   ROW 1: Name, Phone, Address
=============================== */
form.CUS fieldset > p:nth-of-type(1),
form.CUS fieldset > p:nth-of-type(2),
form.CUS fieldset > p:nth-of-type(3) {
    width: 100%;
}

/* ===============================
   ROW 2: City, State, Zip Code
=============================== */
form.CUS fieldset > p:nth-of-type(4),
form.CUS fieldset > p:nth-of-type(5),
form.CUS fieldset > p:nth-of-type(6) {
    width: 100%;
}
}




