@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic);



body {

 margin:0px;

 padding:0px;

 font-family: 'Lato', sans-serif;

}



        #content {

            width: 400px;

            padding: 10px;

            margin: 0 auto;

        }

            #content h1 { color: #333; line-height: 1em; }

            

            ul#nav { padding-left: 0; list-style: none; width: 100%; margin-bottom: 40px; }

            ul#nav:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

            

                #content ul#nav li { float: left; width: 20%; text-align: center; }

                #content ul#nav a { 

                        display: block; 

                        /*background: #000;*/

                        color: #FFF; 

                        font-weight: bold; 

                        padding: 10px; 

                        border-right: 1px solid #FFF;

						text-decoration:none;

                }

                #content ul#nav a:hover { background: #333; }

				

				



        .open {

            display: none;

            float: left;

            width: 31px;

            height: 20px;

            margin-right: 10px;

            background: url(../menu.png) center center no-repeat;            

            text-indent: -999999px;

            border: 0;

			

        }

        

        /* Media Queries

        * 

        * Note: Please don't base your responsive design off of this code. It is just here for demo purposes.

        * Rather, grab yourself a copy of Ethan's book: http://www.abookapart.com/products/responsive-web-design

        ================================================== */

        

        /* Mobile and iPad Portrait */

		

		

		

		    	@media only screen and (max-width: 50000px) {

    	    #content { width:50px; float:left; margin:5px 15px 0 0px; padding:0px;  }

    	    #content h1 { font-size: 22px; line-height: 30px; /*background-color: #000;*/ color: #FFF; padding: 10px; }

    	    #content ul#nav { display: none; }

    	    

    	    .open { display: block;  }

    	    #pageslide { width: 200px; }

    	        #pageslide #nav li { padding: 10px 0; border-bottom: 1px solid #666; }

    	        #pageslide #nav li a { font-size:15px; color: #FFF; border: none; text-decoration: none; font-weight:400; }

    	        #pageslide #nav li a:hover { text-decoration: underline; }

    	}

		

		

		

		

		

		

		

		

    	@media only screen and (max-width: 959px) {

    	    #content { width: 400px; }

    	    #content h1 { font-size: 22px; line-height: 30px; /*background-color: #000;*/ color: #FFF; padding: 10px; }

    	    #content ul#nav { display: none; }

    	    

    	    .open { display: block; }

    	    #pageslide { width: 200px; }

    	        #pageslide #nav li { padding: 10px 0; border-bottom: 1px solid #666; }

    	        #pageslide #nav li a { font-size:15px; color: #FFF; border: none; text-decoration: none; }

    	        #pageslide #nav li a:hover { text-decoration: underline; }

    	}

    	

    	/* Mobile Landscape and Portrait */

    	@media only screen and (max-width: 767px) {

    	    #content { width: 400px; }

    	    #content h1 { font-size: 22px; line-height: 30px; /*background-color: #000;*/ color: #FFF; padding: 10px; }

    	    #content ul#nav { display: none; }

    	    

    	    .open { display: block; }

    	    #pageslide { width: 200px; }

    	        #pageslide #nav li { padding: 10px 0; border-bottom: 1px solid #666; }

    	        #pageslide #nav li a { font-size:15px; color: #FFF; border: none; text-decoration: none;}

    	        #pageslide #nav li a:hover { text-decoration: underline; }

    	}

    	

    	/* Mobile Portrait */

        @media only screen and (max-width: 479px) {

            #content { width: 280px;  }

            #content h1 { font-size: 14px; }

        }

        

		

		

		

		

					    	@media only screen and (max-width: 35em) {

    	    #content { width:50px; float:left; margin:0px 15px 15px 0px; padding:0px;  }

    	    #content h1 { font-size: 22px; line-height: 30px; /*background-color: #000;*/ color: #FFF; padding: 10px; }

    	    #content ul#nav { display: none; }

    	    

    	    .open { display: block; }

    	    #pageslide { width: 200px; }

    	        #pageslide #nav li { padding: 10px 0; border-bottom: 1px solid #666; }

    	        #pageslide #nav li a { font-size:15px; color: #FFF; border: none; text-decoration: none; }

    	        #pageslide #nav li a:hover { text-decoration: underline; }

    	}

		

		

		

		

		

		

		

		

		

			    	@media only screen and (max-width: 24em) {

    	    #content { width:50px; float:left; margin:0px 15px 15px 0px; padding:0px;  }

    	    #content h1 { font-size: 22px; line-height: 30px; /*background-color: #000;*/ color: #FFF; padding: 10px; }

    	    #content ul#nav { display: none; }

    	    

    	    .open { display: block; }

    	    #pageslide { width: 200px; }

    	        #pageslide #nav li { padding: 10px 0; border-bottom: 1px solid #666; }

    	        #pageslide #nav li a { font-size:15px; color: #FFF; border: none; text-decoration: none; }

    	        #pageslide #nav li a:hover { text-decoration: underline; }

    	}