/*  PHPTwente.nl
=============================================================================
    This file contains all the basic styles for the PHPTwente website.
-----------------------------------------------------------------------------

    0. Index
    1. Import Web Font
    2. General Page Elements
        2.1. Main Section
			2.1.1. Strong tag
            2.1.2. Main Menu
            2.1.3. Logo
        2.2. Social Media Buttons
        2.3. Meetup Info
    3. Page Specific Styling
        3.1. Google Form
        3.2. 404 / Page not found
    4. Helper Classes
******************************************************************************/

/* Import Web Font
 ============================================================================ */
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);


/* General Page Elements
 ============================================================================ */
body {
    font-family: 'Droid Sans', sans-serif;

    background: #5a68a5;
    color: #FFF;
}

h1 {
	font-size: 1.5em;
}

h2 {
	font-size: 1.2em;
}

p {
	margin: 1em 0;
}

    /* Main Section
     ------------------------------------------------------------------------ */
    .container {
        background: #FFF;
        color: #333;
        width: 35em; /* Dividable by the amount of menu items */
        padding: 0;
        position: relative;
        margin: 1em auto;

        -webkit-border-radius: 1em;
        -moz-border-radius: 1em;
        border-radius: 1em;

        -moz-background-clip: padding;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
    }
	
        /* Strong tag
         -------------------------------------------------------------------- */
		.container strong {
			color: #222;
		}

        /* Main Menu
         -------------------------------------------------------------------- */
        .container nav {
			/* width 1em more than .container to allow for non css3 browsers */
            width: 36em;
            padding: 0;
            margin: 0;
            top: 0;
            position: absolute;
            left: 0;
            height: 1.5em;
            line-height: 1.5em;
            /*background: #5a68a5;*/
            background: none;
            z-index: 1;
        }

		.container nav :first-child {
	        -webkit-border-top-left-radius: 1em;
	        -moz-border-radius-topleft: 1em;
	        border-top-left-radius: 1em;

	        -moz-background-clip: padding;
			-webkit-background-clip: padding-box;
			background-clip: padding-box;
			
			border-left: 0;
        }

		.container nav :last-child {
            -webkit-border-top-right-radius: 1em;
            -moz-border-radius-topright: 1em;
            border-top-right-radius: 1em;

            -moz-background-clip: padding;
			-webkit-background-clip: padding-box;
			background-clip: padding-box;
        }

        .container nav a {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			
            background-color: #b0baeb;
            border-bottom: 0.1em solid #26388B;
            border-left: 0.1em solid #26388B;

            color: #FFF;

            margin: 0;
            padding: 0;

            /*width: 6em; *//* 36/6 */
            width: 7em; /* 35/5 */
            /*width: 9em; *//* 36/4 */

            overflow: hidden;
            display: block;
            float: left;
            text-align: center;
            text-decoration: none;
        }

        .container nav a.active,
        .container nav a.active:hover {
            color: #9BA9EB;
            background-color: #FFF;
            border-color: #FFF;
        }

        .container nav a:hover {
            background-color: #9BA9EB;
            color: #FFF;
        }

        /* Logo
         -------------------------------------------------------------------- */
        .container .logo {
	        margin-bottom: 0;
	        padding: 2.5em;
	        width: 30em;
	        position: relative;
        }

		/* Main Content
		-------------------------------------------------------------------- */
		#main-content {
			padding: 0 2em 1em;
		}
/* Social Media Buttons
 ------------------------------------------------------------------------ */
    #social-media-buttons
    {
        position: fixed;
        top: 1em;
        left: 50%;
        margin-left: 290px;
    }



    /*  Meetup Info
     ------------------------------------------------------------------------ */
    .meetup-info {display: none;}

    .meetup-info h1 {
        text-align: center;
        border-bottom: 1px solid #999;
        border-top: 1px solid #999;
        padding: 1em 0;
    }

    .meetup-info a {
        color: #5a68a5;
    }

    .meetup-info p {
        text-align: justify;
    }

    .meetup-info .call-to-action {
        font-weight: bold;
    }

    .meetup .meetup-info {
        display: block;
    }

    .meetup-info a.talk {
        display: block;
        font-weight:bold;
        text-align: center;
        margin: 1em;
    }
	
	/* Banners
     ------------------------------------------------------------------------ */
	.banner_468_60 {
		width: 468px;
		height: 60px;
		margin: 1em auto;
	}


/* Page Specific Styling
 ------------------------------------------------------------------------ */
    /* Google Form
     ------------------------------------------------------------------------ */
    .ss-base-body .container {
        background: #FFF;
        color: #333;
        width: 448px;
        padding: 3em;
        margin: 1em auto;

        -webkit-border-radius: 1em;
        -moz-border-radius: 1em;
        border-radius: 1em;

        -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
    }

    .ss-base-body .container h1 {
        text-align: center;
        border-bottom: 1px solid #999;
        border-top: 1px solid #999;
        padding: 1em 0;
    }

    .ss-base-body .container a {
        color: #5a68a5;
    }

    .ss-base-body .container div {
        text-align: justify;
    }

    .ss-base-body .align-right {text-align: right;}

    .ss-base-body .container .call-to-action {
        font-weight: bold;
        text-align: center;
    }

    .ss-no-ignore-whitespace {
        white-space: normal;
    }

/* 404 / Page not found
 ------------------------------------------------------------------------ */
    .page-not-found #main-content {
         text-align:center;
     }



/* Helper Classes
 ============================================================================ */
body .text-center {text-align:center}
/*====================================EOF=====================================*/