/*
Wrapper_Contact - Main Html page i.e. the tag .. Wheat
content_Contact - Area covering the tags including the form .. Green
Form_wrapper - Area around the form Not the form it self .. Red
subForm - Contact Us Form .. Blue
*/
/******************* Contact Page **************************/
/***************** Also used for Confirm page *********************/
/* It is the Html area around the form Not the form itself */
.Form_wrapper
{
margin-top: 25px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
border: px solid red;
}
/**************************** The FORM **************/
#subForm
{
width: 683px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
/*
Temporary delete Chrome.jsp file
In order to stop it from drawing extra space and incomplete line
And User border for testing your table dimension
Remember to put back the file
However test your Final FireFox code without Chrome
*/
border: 1px solid black;
}
/************************* Label **************************/
#subForm .family_label, .mail_label, .subject_label
{
float: left;
width: 200px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.1em;
font-weight: bold;
text-align: center;
margin-top: -10px;
margin-right: 0px;
margin-left: 65px;
padding: px;
padding-bottom: px;
padding-left: 0px;
clear: both;
border: palevioletred solid px;
}
/************ Input Boxes ******************/
#Fname,
#Lname,
#Mail,
#Company,
#Address1,
#Address2,
#City,
#Country,
#Postal,
#Tel,
#fax,
#Subject
{
width: 300px;
height: 30px;
font-family:"Lucida Console", Monaco, monospace;
font-size: 1.2em;
margin-top: px;
margin-right: 0px;
margin-left: -170px;
padding-top: 0px;
border: sienna solid px;
background-color: #FBEF99;
}
/**************** Form Text ************************/
/************ Change space between field boxes by modifying margins ***************/
#subForm textarea
{
width: 400px;
height: 200px;
font-family:"Lucida Console", Monaco, monospace;
font-size: 1.7em;
text-align: left;
margin: auto;
margin-right: 0px;
margin-left: 135px;
margin-top: 10px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
border: 2px solid windowtext;
}
/************************* Label Text Area **************************/
#subForm .message_label
{
float: left;
width: 100px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
font-weight: normal;
text-align: center;
margin-top: 20px;
margin-left: 290px;
padding: 0px;
padding-bottom: 0px;
clear: left;
border: slateblue solid px;
}
/*********************** Input Boxes Focus **************************/
#id:focus,
#name:focus,
#email:focus,
#to:focus,
#subject:focus,
#message:focus,
#submit:focus,
#reset:focus,
#refer:focus
{
background-color: ;
}
/**** Note: Inheritance Cascading technique being used#FDD041
/********************** Button ************************/
#submit, #reset
{
font-family:"Lucida Console", Monaco, monospace;
font-size: 1.5em;
color: black;
font-weight: bold;
margin-top: 20px;
margin-bottom: 30px;
}
#submit
{
margin-left: 20px;
padding-left: 20px;
border: violet solid px;
}
/********************** Button ************************/
#reset
{
margin-left: 300px;
padding-right: 15px;
padding-left: 20px;
border: violet solid px;
}
#submit:hover , #reset:hover
{
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2);
}
/********************** Radio Button ************************/
#radio
{
width: 200px;
margin-right: 0px;
}
/* header */
#subForm h2
{
font-family: "Arial Black", Arial, Helvetica, sans-serif;
font: 30px 'Lobster Two', Helvetica, sans-serif;
color: navy;
font-size: 2em;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
border-bottom: 1px solid tan;
}
/**************** Form paragraph ************************/
#Form_wrapper .confirm1
{
font-family: "Arial Black", Arial, Helvetica, sans-serif;
color: midnightblue;
font-size: 1em;
margin-top: 40px;
margin-left: 366px;
margin-right: 0px;
padding-top: 50px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
border: 1px solid blue;
width: 255px;
}
#Form_wrapper .confirm2
{
font-family: "Arial Black", Arial, Helvetica, sans-serif;
color: midnightblue;
font-size: 1em;
margin-top: 0px;
margin-left: 306px;
margin-right: 0px;
padding-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
border: 1px solid blue;
width: 400px;
}
/*
683 / 200
pixel / mml
3.415 pixel = 1 mm
1 mm = 3.415 pixel
2 mm = 6.83 pixel - 7 px
3 mm = 10.245 pixel - 10 px
4 mm = 13.66 pixel - 14 px
5 mm = 17.75 pixel - 18 px
6 mm = 20.49 pixel - 20 px
7 mm = 23.905 pixel - 24 px
8 mm = 27.32 pixel - 27 px
9 mm = 30.735 pixel - 30 px
10 mm = 34.15 pixel - 34 px
1 cm = 34.15 px
10 cm = 341.5 px
20 cm = 683 px
*/