@charset "utf-8";

/*
-----------------------------------------------------------------------------------------
MAP MAKER 2.0 - SCREEN
RPS
Email: production@rpsdigital.com

--------------
NOTES
--------------
This css file contains styles for basic layout and font styles for generic elements used
across the entire website such as the site structure, header, navigation and footer.

Reusable content elements such as promos, panels and cross-sell are also included.

--------------
CONTENTS
--------------
## RESET BROWSER DEFAULT CSS
## STRUCTURE
## BRANDING
## MAIN NAVIGATION
## MAIN NAVIGATION SECTION HIGHLIGHTING
## FOOTER
## TYPOGRAPHY
## COLOUR THEMES
## REUSABLE CONTENT PATTERNS
## FORM INSTRUCTIONS
## BASE FORM LAYOUT
## ACCESSIBLE HIDE

-----------------------------------------------------------------------------------------
*/


/*  ## RESET BROWSER DEFAULT CSS  ---------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-size: 100%;
line-height: 1.4;
margin: 0;
outline: 0;
padding: 0;
}
ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


/*  ## STRUCTURE  -------------------------------------------------------------------*/
body {
background-color: #1D333E;
color: #999;
font-family: 'Myriad Pro', arial, verdana, sans-serif;
position: relative;
text-align: center;
}
.container {
margin: 0 auto;
overflow: hidden;
padding: 10px;
text-align: left;
}
.header {
float: left;
position: relative;
width: 100%;
background-color: #1D333E;
}
.footer {
float: left;
margin-top: 10px;
width: 100%;
}
#content {
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 4px;
background: #DDDACF url(../images/stat/content-fade.png) repeat-x scroll 0 -60px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
float: left;
min-height: 400px;
padding: 14px 0;
position: relative;
width: 100%;
}


/*  ## BRANDING  --------------------------------------------------------------------*/
.branding {
padding: 10px 0 15px 5px;
}
.branding a img {
border: none !important;
}
.branding a {
background: url(../images/stat/logo.png) no-repeat 0 0;
display: block;
height: 33px;
overflow: hidden;
text-decoration: none;
text-indent: -3000em;
width: 127px;
}


/*  ## ADVERTS  ---------------------------------------------------------------------*/
.advert {
background-color: #FFF;
height: 60px;
position: absolute;
right: 0;
top: 10px;
width: 468px;
}


/*  ## PERSONALISATION  -------------------------------------------------------------*/
.personalisation {
color: #86979F;
left: 140px;
position: absolute;
top: 21px;
}
.personalisation p {
font-size: 81.25%;
}


/*  ## MAIN NAVIGATION  -------------------------------------------------------------*/
div.nav {
display: inline;
float: left;
margin: 0;
padding: 0;
}
div.nav ul {
float: left;
font: 75% Arial, Verdana, sans-serif;
}
div.nav li {
float: left;
margin: 0 5px 0 0;
position: relative;
}
div.nav li a {
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
background: #737D7D url(/images/stat/bg-tab-fade.png) bottom center repeat-x;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
display: block;
color: #CAC7BD;
float: left;
font-weight: bold;
margin-top: 2px;
position: relative;
padding: 10px 14px 6px;
text-decoration: none;
text-transform: uppercase;
}
div.nav li a:hover,
div.nav li a:focus {
background: #88908D url(/images/stat/bg-tab-fade-alt.png) bottom center repeat-x;
position: relative;
text-decoration: underline;
}
div.nav li:hover a {
background-color: #88908D;
}

/*  ## MAIN NAVIGATION SECTION HIGHLIGHTING  ----------------------------------------*/
.homepage div.nav li.nav-home a,
.signin div.nav li.nav-signin a,
.register div.nav li.nav-register a,
.saved-maps div.nav li.nav-saved-maps a,
.help div.nav li.nav-help a,
.about div.nav li.nav-about a {
color: #665D56;
background: #CAC7BD;
padding-top:12px;
margin-top: 0;
}


/*  ## TYPOGRAPHY  ------------------------------------------------------------------*/
h1 {
color: #000;
font-size: 175%;
font-weight: normal;
}
h2 {
color: #000;
font-size: 143.75%;
font-weight: normal;
margin-top: 1em;
text-transform: none;
}
.content-primary h2:first-child,
.content-primary h2.first,
.content-primary p:first-child,
.content-primary p.first {
margin-top: 0;
}
h3 {
color: #333;
font-size: 100%;
font-style: normal;
font-weight: normal;
margin-top: 1em;
text-transform: uppercase;
}
h4 {
font-size: 100%;
margin-top: 1em;
}


/*  ## LINK COLOUR  -----------------------------------------------------------------*/
a:link,
a:visited,
a:hover,
a:focus,
a:active {
color: #FF113A;
}


/*  ## BASE FORM LAYOUT  ------------------------------------------------------------*/

.page form {
margin: 12px 0 0;
}
.homepage .page form {
margin: 0;
}
.page fieldset div.text {
overflow: hidden;
position: relative;
width: 700px;
padding-bottom: 10px;
}
.page fieldset div.text label {
width: 120px;
color: #000;
float: left;
display: block;
text-align: right;
padding: 5px 10px 0 0;
font-size: 82.75%;
}
.page fieldset div.text input {
width: 230px;
color: #000;
float: left;
display: block;
background:#FFFFFF url(../images/stat/bg-input.png) no-repeat scroll -1px -1px;
border:1px solid #CCCCCC;
color:#666666;
float:left;
font-size: 75%;
padding: 4px;
}
.page fieldset .message {
color: #FF113A;
padding: 5px 10px 0 0;
font-size: 82.75%;
}
.page fieldset div.error label {
color: #FF113A;
}
.page fieldset div.error input,
.page fieldset div.error textarea {
border-color: #FF113A;
}

.page fieldset .text div.message {
left: 380px;
position: absolute;
top: 0;
width: auto;
}
.page fieldset div.checkbox {
color: #000;
padding: 5px 0 0 130px;
font-size: 82.75%;
color: #999;
}
.page fieldset div.checkbox input {
margin: 0;
}
.page fieldset div.checkbox .message {
font-size: 100%;
}

.page div.form-buttons {
padding: 20px 0 20px 130px;
}
.homepage .page div.form-buttons {
padding: 0;
}
.page p.forgot {
font-size: 82.75%;
margin: 0;
}
.page p.forgot a,
.page .checkbox a {
color: #999;
}
.page p.instructions {
color: #666;
font-size: 82.75%;
}


/*  ## ACCESSIBLE HIDE  -------------------------------------------------------------*/
.hidden {
display: block;
height: 0;
left: -3000px;
line-height: 0;
position: absolute !important;
text-decoration: none;
top: -3000px;
visibility: hidden;
width: 0;
}


/*  ## MAPMAKER LAYOUT  -------------------------------------------------------------*/
.homepage .page {
background-color: transparent;
border: none;
display: block;
padding: 0 12px;
position: relative;
margin: 0;
min-height: 300px;
width: auto;
}

.page {
background-color: #F9F8F5;
border: 3px solid #B3B0A9;
margin: 0 12px;
padding: 12px;
}
.page h3 {
margin: 0 0 6px;
border-bottom: 2px solid #E9E8E6;
}


/*  ## TIPS  ------------------------------------------------------------------------*/
.getting-started p.instructions,
.getting-started #storage {
background-color: #FFC;
}
.getting-started #storage h3 {
border-bottom: 2px solid #ccc;
}
#instructions p {
color: #999;
font-size: 75%;
margin-top: 7px;
}


/*  ## ADD MARKERS  -----------------------------------------------------------------*/
#add-marker {
background-color: #F9F8F5;
border: 3px solid #B3B0A9;
left: 12px;
padding: 6px;
position: absolute;
top: 0;
width: 204px;
}
#add-marker p.instructions {
color: #999;
font-size: 75%;
background-co lor: #FFC;
margin: 5px 0;
}
#add-marker label {
float: left;
padding-top: 2px;
display: block;
font-size: 68.75%;
color: #333;
width: 60px;
}
#add-marker div.position {
border-bottom: 2px solid #E9E8E6;
padding-bottom: 5px;
margin-bottom: 5px;
}
#add-marker div div {
overflow: hidden;
width: 100%;
padding-bottom: 5px;
}
#add-marker div.text input {
background: #FFF url(../images/stat/bg-input.png) no-repeat -1px -1px;
border: 1px solid #CCC;
color:#666;
float: left;
font-size: 68.75%;
padding: 2px;
width: 138px;
}
#add-marker div.textarea label {
padding-bottom: 2px;
width: 150px;
}
#add-marker div.textarea textarea {
background: #FFF url(../images/stat/bg-input.png) no-repeat -1px -1px;
border: 1px solid #CCC;
color: #666;
float: left;
font-size: 75%;
height: 100px;
font-family: 'Myriad Pro', arial, verdana, sans-serif;
padding: 2px;
resize: none;
width: 198px;
}
#add-marker .error label {
color: #FF113A;
}
#add-marker div.error input,
#add-marker div.error textarea {
border-color: #FF113A;
}
#add-marker .form-buttons {
text-align: right;
}
#add-marker .form-buttons input {
margin-left: 5px;
}
#add-marker .form-buttons a {
font-size: 68.75%;
float: left;
}


/*  ## MAP  -------------------------------------------------------------------------*/
#mapcol {
margin-left: 229px;
margin-right: 229px;
position: relative;
}
#map {
border-left: 3px solid #B3B0A9;
border-right: 3px solid #B3B0A9;
border-top: 3px solid #B3B0A9;
height: 400px;
overflow: hidden;
}

#save-confirmation {
background-color: green;
color: #FFFFFF;
left: 50%;
margin-left: -135px;
padding: 5px 10px;
position: absolute;
text-align: center;
top: 375px;
width: 250px;
}

/*  ## MAP FUNCTIONS  ---------------------------------------------------------------*/
#functions {
background-color: #F9F8F5;
border-left: 3px solid #B3B0A9;
border-right: 3px solid #B3B0A9;
border-bottom: 3px solid #B3B0A9;
overflow: hidden;
padding: 10px 7px 7px 7px;
zoom: 1;
}
#functions form {
padding: 0;
}
#functions div.map-share {
float: left;
}
#functions div.map-save {
float: right;
}
#functions div.map-save div {
float: left;
}
#functions div.map-save div {
float: left;
}
#functions div.map-save label {
float: left;
padding-top: 2px;
display: block;
font-size: 68.75%;
color: #333;
text-align: right;
padding-right: 10px;
}
#functions div.map-save #map_name {
background: #FFF url(../images/stat/bg-input.png) no-repeat -1px -1px;
border: 1px solid #CCC;
color: #666;
float: left;
font-size: 75%;
font-family: 'Myriad Pro', arial, verdana, sans-serif;
padding: 2px;
width: 138px;
margin-right: 10px;
}
#functions div.error label {
color: #FF113A;
}

#functions div.error #map_name {
border-color: #FF113A;
}


/*  ## MARKER STORAGE  --------------------------------------------------------------*/
#storage {
background-color: #F6F6F3;
border: 3px solid #B3B0A9;
float: right;
overflow: hidden;
padding: 4px 6px 8px 6px;
width: 204px;
}
#storage li {
-moz-border-radius: 3px;
background: #BBB8AF url(/images/stat/bg-storage-marker.png) repeat-x 0 0;
border-radius: 3px;
display: block;
float: left;
font-family: arial, verdana, sans-serif;
font-size: 12px;
margin-top: 3px;
position: relative;
width: 100%;
}
#storage li a {
color: #BBB8AF;
}
#storage li.edit {
background-color: orange;
}
#storage li span.marker {
display: block;
float: left;
padding: 3px 5px;
}
#storage li span.marker span {
display: none;
}
#storage li a.viewlink {
background: url(../images/stat/grey.png) top right repeat-y;
border-right: 1px solid #CFCCC2;
color: #333;
display: block;
padding-right:5px;
text-decoration: none;
width: 150px;
}
#storage li a.viewlink:hover {
text-decoration: underline;
}
#storage li a.removelink,
#storage li a.editlink {
display: block;
height: 14px;
margin-top: -7px;
overflow: hidden;
position: absolute;
right: 5px;
text-decoration: none;
text-indent: -3000em;
top: 50%;
width: 14px;
}
#storage li a.removelink {
background: transparent url(../images/stat/delete-page-orange.gif) no-repeat 0 0;
}
#storage li a.editlink {
background: transparent url(../images/stat/edit-page-yellow.gif) no-repeat 0 0;
right: 23px;
}


table {
border-collapse: collapse;
margin: 1em 0;
}

table td,
table th {
padding: 4px 10px;
background-color: #F9F8F5;
border-bottom: 1px solid #B3B0A9;
}

/*  ## SHARE BOX  -------------------------------------------------------------------*/
#sb-holder {
width: 700px;
margin: 0 auto;
z-indez: 9000;
background-color: #F9F8F5;
border:3px solid #B3B0A9;
padding:12px 8px;
text-align: left;
position: relative;
}
#sb-holder h3 {
margin: 0.8em 0 0.3em;
}
#sb-holder p.instructions {
	margin-bottom: 0.5em;
}
#sb-holder textarea {
width: 700px;
height: 360px;
}
#sb-close {
width: 44px;
height: 44px;
position: absolute;
top: -21px;
right: -20px;
text-indent: -2000px;
background: transparent url(../images/stat/close.png) top left;
overflow: hidden;
}

#sb-nav {
width: 100%;
overflow: hidden;
border-bottom: 2px solid #DDDACF;
}
#sb-nav li {
float: left;
}
#sb-nav li a {
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
float: left;
display: block;
padding: 5px 10px 0;
background: #B3B0A9 none;
color: #333;
text-decoration: none;
margin-right: 4px;
font-size: 82.75%;
text-transform: uppercase;
}
#sb-nav li.active a {
float: left;
display: block;
padding: 5px 10px 0;
background: #DDDACF url(../images/stat/content-fade.png) repeat-x scroll 0 -80px;
}


/*  ## FOOTER  ----------------------------------------------------------------------*/
.footer {
padding: 10px 0 30px;
}
.footer p {
color: #86979F;
font-size: 75%;
padding-top: 4px;
}
.footer .info #rps-logo {
position: absolute;
left: 0;
top: 10px;
}
.footer .info {
width: 400px;
position: relative;
padding: 10px 0 0 40px;
overflow: hidden;
}
.footer .info ul,
.footer .info ul li {
float: left;
}
.footer .info ul li a,
.footer .info ul li span {
display: inline;
float: left;
font-size: 75%;
color: #86979F;
margin-left: 14px;
}
.footer .info ul li.first a,
.footer .info ul li.first span {
margin-left: 0;
}


/*  ## POPUP  -----------------------------------------------------------------------*/
div.popup {
color: #000;
font-family: Roboto, Arial, sans-serif;
font-size: 13px;
line-height: 15px;
margin: 0;
width: 270px;
}
div.popup a {
    color: #1122CC;
}