Created
November 25, 2014 22:01
-
-
Save bobeckert/8cfd232d72a986b7495e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* body: #f7f7f7 #676767 #1682B9 | |
c1: #fff #858585 #FFFFFF | |
c2: #f7f7f7 #DDDDDD #66bc29 | |
*/ | |
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } | |
form { margin: 0; } | |
label { cursor: pointer; } | |
button, input { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; line-height: normal; *overflow: visible; } | |
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } | |
a, a:visited, a:active {color: $MERAKI:BODY_LINK_COLOR$; text-decoration: none;} | |
a:hover {color: #444;} | |
.hidden { display: none; } | |
body { | |
margin: 0; | |
background: $MERAKI:BODY_BACKGROUND_COLOR$; | |
color: $MERAKI:BODY_TEXT_COLOR$; | |
font-size: 14px; | |
line-height: 1.4em; | |
font-family: georgia, palatino, serif; | |
} | |
h1, h2 { font-family: helvetica, helvetica neue, verdana, tahoma, sans-serif; } | |
h1 { | |
font-size: 24px; | |
font-weight: bold; | |
color: $MERAKI:BODY_TEXT_COLOR$; | |
margin: 0; | |
} | |
h2 { | |
font-size: 14px; | |
font-weight: normal; | |
} | |
.header { | |
border-bottom: 1px solid $MERAKI:BODY_TEXT_SUBDUED$; | |
padding: 0 0 .5em; | |
margin: 0 0 1em 0; | |
} | |
.header table { width: 100%; } | |
#title_cell { vertical-align: bottom; } | |
#icon_cell { text-align: right; } | |
#container { | |
max-width: 900px; | |
min-width: 300px; | |
margin: 0 auto; | |
border-top: 12px solid $MERAKI:CONTENT2_TEXT_COLOR$; | |
padding: 0.5em 30px; | |
background: $MERAKI:CONTENT1_BACKGROUND_COLOR$; | |
box-shadow:0px 0px 10px #BFBFBF | |
} | |
#left_col { | |
float: left; | |
width: 100%; | |
} | |
#right_col { | |
float: left; | |
width: 420px; | |
margin-left: -420px; | |
} | |
#left_col_inner { | |
margin-right: 420px; | |
padding-right: 30px; | |
} | |
#blocked_msg { | |
text-align: center; | |
padding: 15px 0; | |
} | |
.formarea { | |
background: $MERAKI:CONTENT2_BACKGROUND_COLOR$; | |
color: $MERAKI:CONTENT1_TEXT_COLOR$; | |
padding: 15px; | |
border: 1px solid $MERAKI:CONTENT1_TEXT_SUBDUED$; | |
-moz-border-radius: 3px; | |
border-radius: 3px; | |
margin-bottom: 20px; | |
} | |
.formarea ul { | |
list-style: none; | |
padding: 0; | |
margin: 0; | |
} | |
.formarea li { margin-top: 22px; } | |
.formarea li:first-child { margin-top: 10px; } | |
.formarea br { display: none; } | |
.formarea label {min-height: 30px; margin: 1em 0 14px; padding: 0 0 15px;} | |
.formarea input {width: 95%;} | |
/*.formarea input:hover, .formarea input:focus {border-color: #aaa; box-shadow: none;}*/ | |
.formarea input, .formarea textarea { | |
padding: 7px; | |
background: $MERAKI:CONTENT1_BACKGROUND_COLOR$; | |
color: $MERAKI:BODY_TEXT_COLOR$; | |
border: solid 1px #ccc; | |
font-size: 1em; | |
} | |
.formarea select, .formarea textarea {font-size: 1em;} | |
.formarea .color_button { width: 50%; } | |
.color_button { | |
padding: 0; | |
-moz-border-radius: 3px; | |
border-radius: 3px; | |
font-style: normal; | |
font-weight: 600; | |
background: $MERAKI:CONTENT2_TEXT_COLOR$; | |
white-space: nowrap; | |
display: inline-block; | |
background: -moz-linear-gradient(top, $MERAKI:CONTENT2_TEXT_COLOR_RGBA$ 0%, $MERAKI:CONTENT2_MIDPOINT_COLOR_RGBA$ 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$MERAKI:CONTENT2_TEXT_COLOR_RGBA$), color-stop(100%,$MERAKI:CONTENT2_MIDPOINT_COLOR_RGBA$)); | |
background: -webkit-linear-gradient(top, $MERAKI:CONTENT2_TEXT_COLOR_RGBA$ 0%, $MERAKI:CONTENT2_MIDPOINT_COLOR_RGBA$ 100%); | |
background: -o-linear-gradient(top, $MERAKI:CONTENT2_TEXT_COLOR_RGBA$ 0%, $MERAKI:CONTENT2_MIDPOINT_COLOR_RGBA$ 100%); | |
background: -ms-linear-gradient(top, $MERAKI:CONTENT2_TEXT_COLOR_RGBA$ 0%, $MERAKI:CONTENT2_MIDPOINT_COLOR_RGBA$ 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$MERAKI:CONTENT2_TEXT_COLOR$', endColorstr='$MERAKI:CONTENT2_MIDPOINT_COLOR$',GradientType=0 ); | |
background: linear-gradient(top, $MERAKI:CONTENT2_TEXT_COLOR_RGBA$ 0%, $MERAKI:CONTENT2_MIDPOINT_COLOR_RGBA$ 100%); | |
} | |
.color_button:hover, .color_button:focus { | |
background: $MERAKI:CONTENT2_LINK_COLOR$; | |
background: -moz-linear-gradient(top, $MERAKI:CONTENT2_TEXT_COLOR_RGBA$ 0%, $MERAKI:CONTENT2_LINK_COLOR_RGBA$ 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$MERAKI:CONTENT2_TEXT_COLOR_RGBA$), color-stop(100%,$MERAKI:CONTENT2_LINK_COLOR_RGBA$)); | |
background: -webkit-linear-gradient(top, $MERAKI:CONTENT2_TEXT_COLOR_RGBA$ 0%, $MERAKI:CONTENT2_LINK_COLOR_RGBA$ 100%); | |
background: -o-linear-gradient(top, $MERAKI:CONTENT2_TEXT_COLOR_RGBA$ 0%, $MERAKI:CONTENT2_LINK_COLOR_RGBA$ 100%); | |
background: -ms-linear-gradient(top, $MERAKI:CONTENT2_TEXT_COLOR_RGBA$ 0%, $MERAKI:CONTENT2_LINK_COLOR_RGBA$ 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$MERAKI:CONTENT2_TEXT_COLOR$', endColorstr='$MERAKI:CONTENT2_LINK_COLOR$',GradientType=0 ); | |
background: linear-gradient(top, $MERAKI:CONTENT2_TEXT_COLOR_RGBA$ 0%, $MERAKI:CONTENT2_LINK_COLOR_RGBA$ 100%); | |
} | |
.color_button.wider { padding: 12px 30px; } | |
.color_button input, .color_button a { | |
padding: 12px 3px; | |
display: block; | |
border: none; | |
background: none; | |
width: 100%; | |
height: auto; | |
color: $MERAKI:CONTENT1_LINK_COLOR$; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
margin: -3px auto; | |
cursor: pointer; | |
} | |
.form_links { | |
float: right; | |
margin-top: -2em; | |
width: 45%; | |
text-align: center; | |
} | |
.footer { | |
clear: both; | |
border-top: 1px solid $MERAKI:BODY_TEXT_SUBDUED$; | |
padding: 0.5em 0 0 3px; | |
margin: 1em 0 0 0; | |
color: $MERAKI:BODY_TEXT_SUBDUED$; | |
} | |
.footer img { | |
margin-left: 5px; | |
vertical-align: top; | |
} | |
.error_outer { | |
margin: 0 auto 1em; | |
background: #ea4a52; | |
background: rgba(234, 74, 82, 0.5); | |
padding: 4px; | |
border-radius: 3px; | |
} | |
.error_inner { | |
background: #ea4a52; | |
color: #fff; | |
padding: 0.3em 20px; | |
text-align: center; | |
} | |
.error_inner p {font-family: Helvetica, Verdana, arial, sans-serif;} | |
.error_inner p span {font-size: 1.5em; font-weight: bold; margin-right: .8em;} | |
input:invalid, textarea:invalid { background-color: #f0dddd; } | |
.formarea input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 0px red; -webkit-box-shadow: 0px 0px 0px red; box-shadow: 0px 0px 0px red; } | |
.formarea label.invalid {border: none; color: red; min-height: inherit; padding: 5px 0 0; margin: 0;} | |
@media only screen and (max-width: 730px) { | |
#left_col_inner { margin: 0; padding: 0; } | |
#right_col { | |
float: none; | |
clear: both; | |
margin: 0 auto; | |
} | |
} | |
@media only screen and (max-width: 480px) { | |
#container { padding: 0.5em 5px; } | |
#right_col { width: 100%; } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment