/* Smartphones (landscape and portrait) ----------- */
@media screen and (max-width: 768px) {

    #timelinewrapper * {
        max-width: 98%;
    }

    #timelinewrapper {
        font-size: 65%;
    }

    #timelinewrapper .container {
       padding:10px;
    }

    #timelinewrapper div.timelineToggle {
       float:none;
    }

    #timelinewrapper .timelineEvent div.media {
        display:block;
        float:none;
    }

    #timelinewrapper .timelineMinor dt {
       font-size:1.5em;
       white-space: normal;
    }

    #timelinewrapper .timelineMinor dd h3 {
       font-size:1.5em;
	   line-height:1.6em;
       white-space: normal;
    }

    #timelinewrapper div#timelineContainer {
    }

 #timelinewrapper .timelineMinor dd {
	padding-left: 24px;
	width: 100%;
}

    #timelinewrapper .timelineEvent .media p {
       font-size:1.2em;
    }

    #timelinewrapper dl.timelineMinor {
       float:none;
       max-width:95%;
    }

    #timelinewrapper .timelineEvent p {
       float:none;
       width:100%;
    }

    #timelinewrapper .timelineEvent blockquote {
       float:none;
       width:200px;
       font-size:1.4em;
	   line-height:1.4em;
    }
	
	#timelinewrapper #colorbox{
		width: 100%;
		
		}
		
	#timelinewrapper .picture{
	clear: left;
	width:100%;
	float: left;
}

#timelinewrapper .pictcopyright{	
	margin-right:3%;
}

#timelinewrapper .vidcopyright{	
	margin-right:3%;
}
}

@media screen and (max-width: 680px) {
 #timelinewrapper .timelineEvent div.media {
        display:none;
        float:none;
    }
	  #timelinewrapper .timelineMinor dd {
        margin-left:20px;
        padding-left:0;
        width:100%;
    }
	
	#timelinewrapper .pictcopyright{	
	margin-right:3%;
}

#timelinewrapper .vidcopyright{	
	margin-right:3%;
}
}
/* Smartphones (portrait) ----------- */
 @media only screen and (max-width : 320px) {

    #timelinewrapper * {
       /* max-width: 300px;*/
	   font-size:1.0em;
    }

}