/*
    This is Elliot's custom.css file, which overrides the original Beautiful Pro style.
    Do not move or rename either the style.css or custom.css files, or the sky will fall down on you.
*/

/*
Site Header
---------------------------------------------------------------------------------------------------- */

/* Makes the primary nav bar wide enough to prevent wrapping for screens ≥ 1140px. */
.site-header .widget-area {
	width: 1020px;
}
.site-header .wrap {
	padding: 40px 0 0 0;
	padding: 4rem 0 0 0;
}

/* Substitute the logo instead of the header text or header image. */
.title-area {
    width: 120px;
    height: 120px;
    background-image: url("/static/sig.png");
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 0;
    margin-bottom: 20px;
    margin-bottom: 2rem;
}
.site-title {
    display: none;
}

/* Hides the header background graphic. */
.beautiful .site-header-banner {
    height: 0px;
}

/*
Site Navigation
---------------------------------------------------------------------------------------------------- */

/* Makes the primary nav bar text just a touch smaller. */
.genesis-nav-menu {
    font-size: 14px;
    font-size: 1.4rem;
    margin-top: 30px;
}
.genesis-nav-menu a {
    font-size: 14px;
    font-size: 1.4rem;
    letter-spacing: 2px;
    letter-spacing: 0.2rem;
	padding: 12px;
	padding: 1.2rem;
}

/*
Structure and Layout
---------------------------------------------------------------------------------------------------- */

/* Decreases the padding above the content so we can fit more above the fold. */
.site-inner {
    padding-top: 10px;
    padding-top: 1rem;
}
footer.site-footer {
    font-size: 0.7em;
}

/*
Content
---------------------------------------------------------------------------------------------------- */

/* Centered, light, uppercase headers. */

h2 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 200;
    padding-bottom: 1em;
}

/* Trendy content blocks. */
div.content-block {
    min-height: 200px;
    padding: 40px 10px;
}
div.content-block.type-a {
    background: #ffffff;
}
div.content-block.type-b {
    background: #f4f4f4;
}
div.content-block.welcome {
    background: #e5fee5;
    width: 400px;
    height: 120px;
    min-height: 0px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
    font-size: 24px;
}

/* World map for traveler page. */
div#traveler-map {
    position: relative;
}
img.map-image {
    width: 100%;
}
div.map-labels {
    position: absolute;
    width: 8%;
    height: 6%;
    padding: none;
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #fff,
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        0px 1px 0 #fff,
        1px 0px 0 #fff,
        0px -1px 0 #fff,
        -1px 0px 0 #fff;
    font-weight: bold;
    line-height: 1em;
}
div.map-labels a {
    color: #e5554e;
}
div.map-labels a:hover {
    color: #2a93ff;
}

/* Position the map labels over the correct locations on the map. */
div.maui        { left: 3%;    top: 39%; }
div.anchorage   { left: 3%;    top: 16%; }
div.portland    { left: 10.5%; top: 28%; }
div.california  { left: 11%;   top: 32%; }
div.annarbor    { left: 22%;   top: 26%; }
div.tampa       { left: 22%;   top: 39%; }
div.nyc         { left: 24.5%; top: 31%; }
div.canaries    { left: 41.5%; top: 37%; }
div.london      { left: 45%;   top: 22%; }
div.thailand    { left: 74%;   top: 48%; }
div.japan       { left: 84.5%; top: 32%; }
div.nz          { left: 94.5%; top: 83%; } 


/*
Media Queries
---------------------------------------------------------------------------------------------------- */


/* Makes the primary nav bar 100% width and puts it under the logo, for screens < 1140px. */
@media only screen and (max-width: 1139px) {

    /* Make the content area fill 90% of the available width. */
	.beautiful-landing .site-inner,
	.site-inner,
	.wrap {
		max-width: 90%;
		width: 90%;
		padding: 10px 0;
		padding: 1rem 0;
	}

    /* Let the logo area take the full width above the navigation. */
    .title-area {
        width: 100%;
    }

    /* Let the primary navigation take the full width, centered. */
    .site-header .widget-area {
        display: inline-block;
        width: 100%;
        text-align: center;
    }

    /* Move the primary navigation higher so it's aligned well with the logo. */
    .genesis-nav-menu {
        margin-top: 0;
    }
    
    /* Continue displaying the primary navigation. */
    .responsive-menu {
        display: block;
    }

    /* Responsive menu icons suck. Cut it out. */
    #responsive-menu-icon {
        display: none;
    }
}
@media only screen and (max-width: 768px) {
    div.map-labels {
        font-size: 14px;
    }
}