Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Style updates

  • Loading branch information...
commit 683175450a4675d4f721300d5d36f508e20ae908 1 parent 50bb865
@brendannee authored
Showing with 350 additions and 234 deletions.
  1. +344 −233 css/style.css
  2. BIN  images/geolocation.png
  3. +6 −1 index.html
View
577 css/style.css
@@ -10,22 +10,22 @@ color: #666;
}
a:hover{
- text-decoration:none;
- border-bottom:#999 dotted 1px;
+ text-decoration:none;
+ border-bottom:#999 dotted 1px;
}
a img{
- border:none;
+ border:none;
}
#logo{
position:absolute;
- top:0px;
- left:85px;
- width:120px;
- height:80px;
- background:#333333;
- text-align:center;
+ top:0px;
+ left:85px;
+ width:120px;
+ height:80px;
+ background:#333333;
+ text-align:center;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
@@ -46,44 +46,44 @@ height:10px;
}
#logo img {
- border:0;
+ border:0;
}
ul.input_boxes{
- padding:0;
- margin:0;
- position:relative;
- font-size:12px;
+ padding:0;
+ margin:0;
+ position:relative;
+ font-size:12px;
}
ul.input_boxes li{
- list-style-type:none;
- padding:4px 0;
- margin:0;
- font-weight:bold;
- clear:both;
+ list-style-type:none;
+ padding:4px 0;
+ margin:0;
+ font-weight:bold;
+ clear:both;
}
ul.input_boxes li.inputbox{
- width:245px;
- padding:0;
- position:relative;
+ padding:0;
+ position:relative;
}
ul.input_boxes li.geolocation{
- display:none;
- font-size:12px;
- font-weight:normal;
- padding:0 0 0 29px;
+ display:none;
+ font-size:12px;
+ font-weight:normal;
+ padding:0 0 0 29px;
}
ul.input_boxes li.geolocation img{
- vertical-align:middle;
+ vertical-align:middle;
}
ul.input_boxes li.geolocation a{
- color: red;
- padding-left:2px;
+ color: #2489CE;
+ font-weight: bold;
+ padding-left:2px;
}
.geolocationwaiting{
@@ -97,81 +97,185 @@ ul.input_boxes li.geolocation a{
}
ul.input_boxes li .textbox{
- width: 210px;
- margin:0;
+ width: 210px;
+ margin:0;
}
ul.input_boxes #hillsline{
- padding-top:3px;
+ padding-top:3px;
}
ul.input_boxes #hillsline label{
- width:100px;
- float:left;
- padding-top:3px;
- font-size:13px;
+ width:100px;
+ float:left;
+ padding-top:3px;
+ font-size:13px;
}
ul.input_boxes #hillsline select{
- float:right;
- width:150px;
- margin-right:2px;
+ float:right;
+ width:150px;
+ margin:5px;
+ line-height: 24px;
}
.error{
- border-color:#b22828;
- background-color:#ffd5d5;
+ border-color:#b22828 !important;
+ background-color:#ffd5d5 !important;
}
.icon{
- height:24px;
- width:24px;
- vertical-align:middle;
+ height:24px;
+ width:24px;
+ vertical-align:middle;
}
#swap{
- cursor:pointer;
- position:absolute;
- top:15px;
- right:5px;
+ cursor:pointer;
+ position:absolute;
+ top:28px;
+ right:5px;
+ z-index:100;
}
#content{
- position:relative;
- overflow:hidden;
+ position:relative;
+ overflow:hidden;
}
#sidebar{
- position:absolute;
- left:0;
- width:300px;
+ position:absolute;
+ left:0;
+ width:300px;
+ background: #CCC;
+ color: #333;
+ text-shadow: 0 1px 0 white;
+ font-weight: normal;
+ background-image: -moz-linear-gradient(top,#E6E6E6,#CCC);
+ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#E6E6E6),color-stop(1,#CCC));
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#E6E6E6', EndColorStr='#CCC')";
+
+
}
#sidebar-top{
padding-top:10px;
}
-#sidebar #inputs{
- padding-left:5px;
-}
-
-#submit{
- margin-right:5px;
- margin-bottom:5px;
+#inputs{
+ padding-left:5px;
+ font-size:20px;
+ line-height:26px;
+ margin-bottom:2px;
+ margin-top:5px;
+}
+
+#inputs input[type="text"] {
+ background-image: none;
+ padding: .4em;
+ line-height: 1.4;
+ font-size: 16px;
+ -webkit-appearance: none;
+ -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding-box;
+ background-clip: padding-box;
+ -moz-border-radius: .6em;
+ -webkit-border-radius: .6em;
+ border-radius: .6em;
+ border: 1px solid #C6C6C6;
+ background: #CCC;
+ color: #333;
+ text-shadow: 0 1px 0 white;
+ font-weight: normal;
+}
+
+
+.ui-btn {
+ display: block;
+ text-align: center;
+ cursor: pointer;
+ position: relative;
+ margin: .5em 5px;
+ padding: 0;
+ -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding-box;
+ background-clip: padding-box;
+ -moz-border-radius: 1em;
+ -webkit-border-radius: 1em;
+ border-radius: 1em;
+ border: 1px solid gray;
+ background: #FDFDFD;
+ font-weight: bold;
+ color: #111;
+ text-shadow: 0 1px 1px white;
+ background-image: -moz-linear-gradient(top,#EEE,#FDFDFD);
+ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#EEE),color-stop(1,#FDFDFD));
+ -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEE', EndColorStr='#FDFDFD')";
+}
+
+.ui-btn-hidden {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ -webkit-appearance: button;
+ opacity: 0;
+ cursor: pointer;
+}
+
+.ui-btn-inner {
+ padding: .6em 25px;
+ display: block;
+ height: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ position: relative;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding-box;
+ background-clip: padding-box;
+ -moz-border-radius: 1em;
+ -webkit-border-radius: 1em;
+ border-radius: 1em;
+ border-top: 1px solid white;
+ border-color: rgba(255, 255, 255, .3);
+ text-align: center;
+ cursor: pointer;
+ font-weight: bold;
+ color: #111;
+ text-shadow: 0 1px 1px white;
+}
+
+.ui-btn-text {
+ color: #444;
+ text-shadow: #F6F6F6 0px 1px 1px;
+ font-weight: bold;
+ font-size:18px;
}
#summary{
- padding:0 6px;
- overflow:hidden;
- display:none;
- height:110px;
+ margin:0 10px;
+ overflow:hidden;
+ display:none;
+ text-shadow:none;
+ border: 1px #999 solid;
+ -moz-box-shadow:3px 3px 8px #999;
+ -webkit-box-shadow:3px 3px 8px #999;
+ box-shadow:3px 3px 8px #999;
}
#summary div{
- border:1px solid #ccc;
- cursor:pointer;
- overflow:hidden;
+ border:1px solid #ccc;
+ cursor:pointer;
+ overflow:hidden;
}
#summary0{
@@ -187,139 +291,146 @@ ul.input_boxes #hillsline select{
}
#summary .title{
- padding:5px;
- border:none;
- margin:0;
- width:150px;
- float:left;
- font-weight:bold;
+ padding:5px;
+ border:none;
+ margin:0;
+ width:150px;
+ float:left;
+ font-weight:bold;
}
#summary .info{
- padding:3px;
- border:none;
- margin:0;
- width:100px;
- float:right;
- text-align:right;
- font-size:11px;
+ padding:3px;
+ border:none;
+ margin:0;
+ width:100px;
+ float:right;
+ text-align:right;
+ font-size:11px;
}
#sidebar #resultsBox{
- padding:3px 5px;
- margin:10px;
- font-size:14px;
- clear:both;
- border: 1px #999 solid;
--moz-box-shadow:3px 3px 8px #999;
--webkit-box-shadow:3px 3px 8px #999;
- display:none;
- overflow:auto;
+ background:#F9F9F9;
+ padding:3px 5px;
+ margin:10px;
+ font-size:14px;
+ clear:both;
+ border: 1px #999 solid;
+ -moz-box-shadow:3px 3px 8px #999;
+ -webkit-box-shadow:3px 3px 8px #999;
+ box-shadow:3px 3px 8px #999;
+ display:none;
+ overflow:auto;
}
#sidebar .stats{
- clear:both;
+ clear:both;
}
#sidebar .stats .title {
- font-weight:bold;
- color: #000;
+ font-weight:bold;
+ color: #000;
}
#sidebar .stats div{
- margin-top:3px;
+ margin-top:3px;
}
#sidebar .stats a{
- color:#666;
+ color:#666;
}
#sidebar .stats img{
- border:none;
- height:12px;
- width:12px;
+ border:none;
+ height:12px;
+ width:12px;
}
#directions{
- padding:5px 5px 0 5px;
- font-size:11px;
- overflow:auto;
+ padding:5px 5px 0 5px;
+ font-size:11px;
+ overflow:auto;
}
#directions ol{
- list-style-type:decimal;
- margin-top:0;
+ list-style-type:decimal;
+ margin-top:0;
}
#directions li{
- padding:5px 0;
- border-bottom:1px solid #ddd;
- margin-left:-20px;
- padding-left:-20px;
- cursor:pointer;
+ padding:5px 0;
+ border-bottom:1px solid #ddd;
+ margin-left:-20px;
+ padding-left:-20px;
+ cursor:pointer;
}
#directions li:last-of-type{
- border-bottom:none;
+ border-bottom:none;
}
#disclaimer{
- padding:0 5px 10px 5px;
- font-size:10px;
+ padding:0 5px 10px 5px;
+ font-size:10px;
}
/* MAP */
#map_wrapper{
- clear:both;
- border-left: solid 1px #999999;
- margin-left:300px;
- color:#000;
- font-size:11px;
- position:relative;
+ clear:both;
+ border-left: solid 1px #999999;
+ margin-left:300px;
+ color:#000;
+ font-size:11px;
+ position:relative;
}
#map_wrapper a:hover{
- border:none;
+ border:none;
}
#map-buttons{
position:absolute;
- top:5px;
- right:160px;
+ top:5px;
+ right:160px;
}
.map-button{
- overflow-x: hidden;
- overflow-y: hidden;
- text-align: center;
- -webkit-user-select: none;
- font-size: 12px;
- line-height: 160%;
- padding: 0px 6px;
- -webkit-box-shadow: rgba(0, 0, 0, 0.347656) 2px 2px 3px;
- box-shadow: rgba(0, 0, 0, 0.347656) 2px 2px 3px;
- min-width: 47px;
- color: black;
- border-width: 1px;
- border-style: solid;
- border-color: rgb(169, 187, 223);
- border-radius: 2px 2px;
- font-weight: normal;
- background:#FFF;
- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(254, 254, 254)), to(rgb(243, 243, 243)));
- background-attachment: initial;
- background-origin: initial;
- background-clip: initial;
- background-color: initial;
- background-position: initial initial;
- background-repeat: initial initial;
- display:inline-block;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ text-align: center;
+ -webkit-user-select: none;
+ font-size: 12px;
+ line-height: 160%;
+ padding: 0px 6px;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.347656) 2px 2px 3px;
+ box-shadow: rgba(0, 0, 0, 0.347656) 2px 2px 3px;
+ min-width: 47px;
+ color: black;
+ border-width: 1px;
+ border-style: solid;
+ border-color: rgb(169, 187, 223);
+ border-radius: 2px 2px;
+ font-weight: normal;
+ background:#FFF;
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(254, 254, 254)), to(rgb(243, 243, 243)));
+ background-attachment: initial;
+ background-origin: initial;
+ background-clip: initial;
+ background-color: initial;
+ background-position: initial initial;
+ background-repeat: initial initial;
+ display:inline-block;
}
.map-button a{
- display:block;
- color:#000;
+ display:block;
+ color:#000;
+}
+
+.map-button a img{
+ position:relative;
+ top:2px;
}
#map_canvas{
@@ -327,152 +438,152 @@ min-height:500px;
}
#map_canvas .message {
- font-size:14px;
+ font-size:14px;
}
#map_canvas a {
- color:#5b5b68;
- text-decoration:none;
+ color:#5b5b68;
+ text-decoration:none;
}
#map_canvas a {
- text-decoration:underline;
+ text-decoration:underline;
}
.popup{
- position:absolute;
- display:none;
- width:240px;
- border:2px solid #fff;
- background:#000 url(../images/tip.png) 10px 50% no-repeat;
- filter:alpha(opacity=80);
+ position:absolute;
+ display:none;
+ width:240px;
+ border:2px solid #fff;
+ background:#000 url(../images/tip.png) 10px 50% no-repeat;
+ filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
- text-align:left;
- border-radius: 5px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- color:#fff;
- padding:15px 25px 15px 40px;
- font-size:14px;
- z-index:150;
- -moz-box-shadow: 5px 5px 10px #333;
+ text-align:left;
+ border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ color:#fff;
+ padding:15px 25px 15px 40px;
+ font-size:14px;
+ z-index:150;
+ -moz-box-shadow: 5px 5px 10px #333;
-webkit-box-shadow: 5px 5px 10px #333;
box-shadow: 5px 5px 10px #333;
}
.popup li{
- padding:3px 0;
+ padding:3px 0;
}
.close{
- border:none;
- position:absolute;
- top:5px;
- right:5px;
+ border:none;
+ position:absolute;
+ top:5px;
+ right:5px;
}
#loading_image{
- top:50%;
- right:50%;
- background:#000;
- text-align:center;
+ top:50%;
+ right:50%;
+ background:#000;
+ text-align:center;
}
#welcome_screen{
- top:50%;
- right:50%;
- background:#333;
- filter:alpha(opacity=100);
+ top:50%;
+ right:50%;
+ background:#333;
+ filter:alpha(opacity=100);
-moz-opacity:1;
opacity: 1;
- text-align:center;
- padding:15px;
+ text-align:center;
+ padding:15px;
font-size:16px;
line-height:20px;
- width:380px;
+ width:380px;
}
#tooltip {
- background-color:#ffffff;
- font-weight:bold;
- border:1px #999999 solid;
+ background-color:#ffffff;
+ font-weight:bold;
+ border:1px #999999 solid;
}
#dragtext{
- top:150px;
- right:50%;
- width:250px;
+ top:150px;
+ right:50%;
+ width:250px;
}
#endpointtext{
- top:10px;
- right:50%;
- width:250px;
+ top:10px;
+ right:50%;
+ width:250px;
}
/* Profile */
#profile{
- margin-left:300px;
- position:relative;
- border-top: solid 1px #999999;
- border-left: solid 1px #999999;
- height:190px;
- clear:both;
- z-index:30;
- padding-bottom:15px;
+ margin-left:300px;
+ position:relative;
+ border-top: solid 1px #999999;
+ border-left: solid 1px #999999;
+ height:190px;
+ clear:both;
+ z-index:30;
+ padding-bottom:15px;
}
#profileIntro{
- font-size:14px;
- text-align:center;
- color:#333;
- font-weight:bold;
- margin-top:20px;
+ font-size:14px;
+ text-align:center;
+ color:#333;
+ font-weight:bold;
+ margin-top:20px;
}
#hideProfile{
- border:none;
- z-index:40;
- position:absolute;
- left:299px;
- bottom:180px;
- cursor:pointer;
+ border:none;
+ z-index:40;
+ position:absolute;
+ left:299px;
+ bottom:180px;
+ cursor:pointer;
}
#showProfile{
- position:absolute;
- bottom:0;
- left:0;
- border-top: solid 1px #999999;
- border-right: solid 1px #999999;
- display:none;
- background:white;
+ position:absolute;
+ bottom:0;
+ left:0;
+ border-top: solid 1px #999999;
+ border-right: solid 1px #999999;
+ display:none;
+ background:white;
}
#bottomCredits{
- position:absolute;
- bottom:0;
- right:0;
- color:#FFF;
- padding:2px 10px 0 2px;
- font-size:12px;
- background:#333;
- height:13px;
- -webkit-border-top-left-radius: 3px;
- -moz-border-radius-topleft: 3px;
- border-top-left-radius: 3px;
- z-index:40;
+ position:absolute;
+ bottom:0;
+ right:0;
+ color:#FFF;
+ padding:2px 10px 0 2px;
+ font-size:12px;
+ background:#333;
+ height:13px;
+ -webkit-border-top-left-radius: 3px;
+ -moz-border-radius-topleft: 3px;
+ border-top-left-radius: 3px;
+ z-index:40;
}
#bottomCredits a{
color:#FFF;
}
#bottomCredits a:hover{
- text-decoration:underline;
+ text-decoration:underline;
}
/* simple css-based tooltip */
@@ -495,10 +606,10 @@ div.tooltip {
}
#ie6msg{
- display:none;
- width:800px;
- margin:10px auto;
+ display:none;
+ width:800px;
+ margin:10px auto;
}
#ie6msg a{
- text-decoration:underline;
+ text-decoration:underline;
}
View
BIN  images/geolocation.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
7 index.html
@@ -56,7 +56,12 @@
<option value="high">Bring on the Hills!</option>
</select>
</li>
- <li style="text-align:right;"><input id="submit" type="submit" value="Get Directions" title="Get Directions" /></li>
+ <li style="text-align:right;">
+ <div class="ui-btn" id="submit">
+ <span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Get Directions</span></span>
+ <input type="submit" value="Get Directions" title="Get Directions" class="ui-btn-hidden">
+ </div>
+ </li>
</ul>
</form>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.