|
.contactHolder{ |
|
font-family: 'Ubuntu', 'Lato', sans-serif; |
|
font-weight: 400; |
|
/* Size and position */ |
|
width: 20em; |
|
height:25em; |
|
position: relative; |
|
margin: 60px auto 30px; |
|
padding: 10px; |
|
overflow: hidden; |
|
|
|
/* Styles */ |
|
background: #111; |
|
color:#fff; |
|
line-height:1.333; |
|
border-radius: 0.4em; |
|
border: 1px solid #191919; |
|
box-shadow: |
|
inset 0 0 2px 1px rgba(255,255,255,0.08), |
|
0 16px 10px -8px rgba(0, 0, 0, 0.6); |
|
} |
|
|
|
|
|
|
|
h3 { |
|
padding: 0 1.25em; |
|
margin: .5em 0; |
|
font-size:1.3em; |
|
} |
|
|
|
h4 { |
|
margin: 0px 3.5em; |
|
font-size:1em; |
|
} |
|
p { |
|
padding: 0 1.6em; |
|
text-align:left; |
|
line-height:1.333; |
|
} |
|
|
|
.contactUs{ |
|
/* Width and position */ |
|
width: 80%; |
|
padding: 8px 5px; |
|
margin: 2em 2em; |
|
|
|
/* Styles */ |
|
border: 1px solid #0273dd; /* Fallback */ |
|
border: 1px solid rgba(0,0,0,0.4); |
|
box-shadow: |
|
inset 0 1px 0 rgba(255,255,255,0.3), |
|
inset 0 10px 10px rgba(255,255,255,0.1); |
|
border-radius: 3px; |
|
background: #38a6f0; |
|
cursor:pointer; |
|
|
|
/* Font styles */ |
|
|
|
color: #fff; |
|
|
|
font-size: 15px; |
|
|
|
} |
|
|
|
div.formHolder { |
|
position:absolute; |
|
z-index:999; |
|
top:0; |
|
bottom:0; |
|
left:0; |
|
right:0; |
|
background:#444; |
|
color:#fff; |
|
width:20em; |
|
height:25em; |
|
padding:20px; |
|
display:none; |
|
} |
|
|
|
.formHolder:before { |
|
/* Size and position */ |
|
content: ""; |
|
width: 8px; |
|
height: 5px; |
|
position: absolute; |
|
left: 32%; |
|
top: -7px; |
|
|
|
/* Styles */ |
|
border-radius: 50%; |
|
box-shadow: 0 0 6px 4px #fff; |
|
} |
|
|
|
.formHolder:after { |
|
/* Size and position */ |
|
content: ""; |
|
height: 1px; |
|
width: 33%; |
|
position: absolute; |
|
left: 20%; |
|
top: 0; |
|
|
|
/* Styles */ |
|
background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); |
|
background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); |
|
background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); |
|
background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent)); |
|
background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); |
|
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent); |
|
} |
|
|
|
|
|
.formHolder h4:after, .formHolder p:after{ |
|
/* Size and position */ |
|
content:""; |
|
width:35em; |
|
height:20em; |
|
position:absolute; |
|
top:0; |
|
left:45px; |
|
z-index:99999; |
|
|
|
/* Styles */ |
|
-webkit-transform: rotate(75deg); |
|
-moz-transform: rotate(75deg); |
|
-ms-transform: rotate(75deg); |
|
-o-transform: rotate(75deg); |
|
transform: rotate(75deg); |
|
background: -moz-linear-gradient(50deg, rgba(255,255,255,0.10), rgba(0,0,0,0)); |
|
background: -ms-linear-gradient(50deg, rgba(255,255,255,0.10), rgba(0,0,0,0)); |
|
background: -o-linear-gradient(50deg, rgba(255,255,255,0.10), rgba(0,0,0,0)); |
|
background: -webkit-linear-gradient(50deg, rgba(255,255,255,.10), rgba(0,0,0,0)); |
|
background: linear-gradient(50deg, rgba(255,255,255,0.10), rgba(0,0,0,0)); |
|
pointer-events:none; |
|
} |
|
|
|
.no-pointerevents .contactHolder p:before { |
|
display: none; |
|
} |
|
|
|
|
|
.loading { |
|
position:absolute; |
|
margin:100px 0 0 130px; |
|
height:50px; |
|
width:50px; |
|
z-index: 9999; |
|
display:none; |
|
-o-border-radius: 5px; |
|
-webkit-border-radius: 5px; |
|
-moz-border-radius: 5px; |
|
-khtml-border-radius:5px; |
|
border-radius: 5px; |
|
-webkit-box-shadow:0 1px 3px #000; |
|
-moz-box-shadow:0 1px 3px #000; |
|
-o-box-shadow:0 1px 3px #000; |
|
-khtml-box-shadow:0 1px 3px #000; |
|
box-shadow:0 1px 3px #000; |
|
background:rgba(0,0,0,0.80) url(http://www.tollbrothers.com/tb/images/colorbox/loading.gif) center center no-repeat; |
|
} |
|
|
|
.theForm { |
|
margin:1.5em auto 3em; |
|
width:14em; |
|
} |
|
|
|
input[type="text"]{ |
|
/* Size and position */ |
|
width: 93%; |
|
|
|
padding: 8px 5px; |
|
margin-bottom: 6px; |
|
font-size: 12px; |
|
|
|
/* Styles */ |
|
background: #1f2124; /* Fallback */ |
|
background: -moz-linear-gradient(#1f2124, #27292c); |
|
background: -ms-linear-gradient(#1f2124, #27292c); |
|
background: -o-linear-gradient(#1f2124, #27292c); |
|
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c)); |
|
background: -webkit-linear-gradient(#1f2124, #27292c); |
|
background: linear-gradient(#1f2124, #27292c); |
|
border: 1px solid #000; |
|
box-shadow: |
|
0 1px 0 rgba(255,255,255,0.1); |
|
border-radius: 3px; |
|
|
|
/* Font styles */ |
|
font-family: 'Ubuntu', 'Lato', sans-serif; |
|
color: #fff; |
|
} |
|
|
|
.layoutForm { |
|
background:#fff; |
|
border:1px solid #fff; |
|
border-radius:4px; |
|
padding:.75em .75em; |
|
display:block; |
|
margin:.5em 0; |
|
width: 17em; |
|
position:relative; |
|
} |
|
|
|
.ui-tooltip { |
|
z-index:99999; |
|
font-size:.1em; |
|
background:#f6f6f6; |
|
border-radius:6px; |
|
box-shadow:none; |
|
color:#6fa4c8 !important; |
|
border:1px solid #dcdcdc !important; |
|
} |
|
|
|
|
|
|
|
.sendForm { |
|
/* Width and position */ |
|
width: 100%; |
|
padding: 8px 5px; |
|
margin: .5em 0em; |
|
|
|
/* Styles */ |
|
border: 1px solid #0273dd; /* Fallback */ |
|
border: 1px solid rgba(0,0,0,0.4); |
|
box-shadow: |
|
inset 0 1px 0 rgba(255,255,255,0.3), |
|
inset 0 10px 10px rgba(255,255,255,0.1); |
|
border-radius: 3px; |
|
background: #659AE0; |
|
cursor:pointer; |
|
|
|
/* Font styles */ |
|
|
|
color: #fff; |
|
font-size: 15px; |
|
|
|
} |
|
|
|
.closeForm { |
|
/* Width and position */ |
|
width: 100%; |
|
padding: 8px 5px; |
|
margin: .5em 0em; |
|
|
|
/* Styles */ |
|
border: 1px solid #0273dd; /* Fallback */ |
|
border: 1px solid rgba(0,0,0,0.4); |
|
box-shadow: |
|
inset 0 1px 0 rgba(255,255,255,0.3), |
|
inset 0 10px 10px rgba(255,255,255,0.1); |
|
border-radius: 3px; |
|
background: #ccc; |
|
cursor:pointer; |
|
|
|
/* Font styles */ |
|
|
|
color: #999; |
|
font-size: 15px; |
|
|
|
} |
|
|
|
|
|
.error { |
|
background:#F5494C !important; |
|
color:#bf0000 !important; |
|
border:1px solid #bf0000 !important; |
|
position:relative; |
|
} |
|
|
|
.eMessage,.emailError,.formError { |
|
color:#fff; |
|
font-size: .78em; |
|
font-weight:normal; |
|
display:none; |
|
} |
|
|
|
.thanks { |
|
margin: 38px 22px; |
|
text-align: left; |
|
line-height: 1.333; |
|
|
|
} |
|
|
|
.closeButton { |
|
margin: 15px 0px; |
|
} |