/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

    html {
    	overflow-y: scroll; /* Force scrollbars 100% of the time */
    }
    
	body {
        font-family: Cambria, Georgia, "Times New Roman", Times, serif;

        font-size: 100%; /* Use 16px as per informationarchitects.jp/en/100e2r/ and wilsonminer.com/posts/2008/oct/20/relative-readability/ */

        line-height: 1.5; /* A safe default for type of any size. */

        background-color: #fff;
        color: #333;
	}

    a, a:link, a:visited, a:focus, a:active {
        color: #000;
        text-decoration: underline;
    }
    a:hover {
        text-decoration: none;
    }

    b, strong {
        color: #000;
    }

    p {
        margin: 10px 0 20px 0;
    }

    h1, h2, h3 {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-weight: normal;
    }
    
    h1 {
        font-size: 310%;
        letter-spacing: -0.03em;
        line-height: 1em;
        color: #666;

        background: url('../img/cow.gif') left center no-repeat;
        padding-left: 150px;

        padding-top: 40px;
        padding-bottom: 20px;
    }
    h2 {
        font-size: 140%;
        color: #333;
        margin-bottom: 20px;
    }
    h3 {
        font-size: 130%;
        color: #fff;
        margin-bottom: 10px;
    }

    .container {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    #logo {
        padding-top: 50px;
    }
    #logo a {
        font-size: 110%;
    }

    small {
        font-size: 75%;
    }

    #header {
        background: #fff url('../img/bg_top.gif') 0 0 repeat-x;
    }

    #content1 {
        background: #f9efe5 url('../img/bg1.jpg') 0 0 repeat-x;
    }


    #content_red {
        background: #cc0000;
        color: #eee;
    }
    #content_red b, #content_red strong {
        color: #fff;
    }
    #content_red a, #content_red a:link, #content_red a:visited, #content_red a:focus, #content_red a:active {
        color: #fff;
        text-decoration:underline;
    }


/*
    #content2 {
        background: url('../img/bg2.jpg') 0 0 repeat-x;
        color: #000;
        text-shadow: 0 -1px 1px #000, 0 1px 1px #fff;
    }
*/
    #footer {
        padding-bottom: 50px;
        background: #55493b url('../img/bg3.jpg') 0 0 repeat-x;
        color: #eee;

        text-shadow: -1px -1px 1px #000;
    }

    #footer b, #footer strong {
        color: #fff;
    }

    #footer a, #footer a:link, #footer a:visited, #footer a:focus, #footer a:active {
        color: #fff;
        text-decoration:underline;
    }
    #footer a:hover {
        text-decoration: none;
    }


/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px)
{
/*
	body {
        font-size: 80%
	}
*/
    .container {
        padding-top: 20px;
        padding-bottom: 10px;
    }

    #header {
        padding-top: 10px;
    }

    #logo {
        padding-top: 0;
        text-align: right;
    }

    #logo img {
        width: 150px;
        height: 34px;
    }

    h1 {
        font-size: 200%;

        background-image: url('../img/cow_m.gif');
        padding-left: 100px;

        padding-top: 20px;
        padding-bottom: 10px;
    }
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

/*
@media only screen and (-webkit-min-device-pixel-ratio: 2)
{ 

	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}

}
*/