@media screen and (max-device-width: 640px){
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
	#navigation {
		font-size: 1em !important;
		font-weight:bold !important;
	}
    #content-container {
        top:115px !important;
        right:10px !important;
        width:85% !important;
        bottom:25px !important;
    }
    #content {
		font-size: 1.25em;
    }
}
@media only screen and (max-device-width: 640px) and (orientation: landscape) {
    .calendar_options {
        font-size:.75em !important;
    }
    #content h2 {
        font-size:1.5em !important;
    }
    #logo {
        top:5px !important;
    }
    #Xhead-container {
        visibility: hidden;
    }
    #header {
        height:10px !important;
    }
    #header p {
        position:absolute !important;
        top:5px !important;
    }
    #social-icons {
        position:absolute !important;
        top:5px !important;
    }
    #content-container {
        top:105px !important;
        right:10px !important;
        width:85% !important;
        bottom:25px !important;
    }
    #content {
		font-size: 1.75em;
    }
    #navigation ul {
        margin-left:125px !important;
        margin-right:0px !important;
        padding:10px;
    }    
    #navigation li {
        padding:0px;
    }
    #navigation li a {
        width:140px;
        line-height: 70%;
        border-right:solid 2px black;
    }
	#navigation {
        right:0px !important;
        text-align:right !important;
        width:100% !important;
		font-size: 1.3em !important;
		font-weight:bold !important;
		background-color: rgba(248, 240, 240, 0.90) !important;
        height:52px;
        padding-top:2px;
	}
    #top_blurb {
        bottom:25px !important;
        width:65px !important;
        height:250px !important;
    }
    #footer-container {
        height: 50px !important;
    }    
}
@media only screen and (max-device-width: 480px) and (orientation: portrait) {
    #header {
        height:10px !important;
    }
    #header p {
        position:absolute !important;
        top:5px !important;
    }
    #social-icons {
        position:absolute !important;
        top:5px !important;
    }
    #content-container {
        top:175px !important;
        right:10px !important;
        Xwidth:85% !important;
        bottom:25px !important;
    }
    #content {
		font-size: 3em;
    }
    #navigation ul {
        margin-left:75px !important;
        margin-right:0px !important;
        padding:5px;
    }    
    #navigation li {
        padding:0px;
    }
    #navigation li a {
        width:155px;
        line-height: 80%;
        border-right:solid 2px black;
    }
	#navigation {
        right:0px !important;
        text-align:right !important;
        width:100% !important;
		font-size: 1.84em !important;
		font-weight:bold !important;
		background-color: rgba(248, 240, 240, 0.90) !important;
        height:70px;
        padding-top:5px;
	}
    #top_blurb {
        bottom:25px !important;
        width:100% !important;
		font-size: 2.5em !important;
    }
    #top_blurb br {
        display:none;
    }
}
html, body {
	position:absolute;
	margin:0; 
	padding:0; 
	width:100%; 
	height:100%; 
	overflow:hidden; 
}

body {
	font-family:verdana, arial, sans-serif; 
	font-size:80%;
}

img {
    border:none;
}

p {
     line-height:150%; 
}

#background{
     position:absolute; 
     z-index:-2; 
     width:100%; 
     height:100%;
}

#logo{
    z-index:2;
	margin:0;
	position:absolute;
	top:10px;
	left:6px;
}

#head-container
{
	border-bottom: 2px solid #D80000;
}
#header
{
	top:0px;
	height:45px;
	width: 100%;
	padding: 10px;
     
	background-color:#ffffff;
	filter:alpha(opacity=95);
	opacity:0.95;     
}

#header h1 {
	font-size: 1.75em;
	color: #D80000;
	margin:0;
	font-weight:bold;
}

#header p {
	margin:0;
	position:absolute;
	top:45px;
	left:135px;
	font-style:italic;
	color: #000;
}

#navigation-container {
	background-color: rgba(248, 240, 240, 0.7);
	float: right;
	width: 100%;
	
	height:30px;
}

#navigation {
	float: right;
}

#navigation ul
{
	margin: 0;
	padding: 0;
	margin-right:15px;
    Xfont-weight:normal;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation li a
{
	display: block;
	float: left;
	padding: 7px 10px;
	color: #000;
	text-decoration: none;
}

#navigation li a:hover {
	background: #D80000;
	color:#fff;
}

#content-container
{
	overflow-x: hidden;
	overflow: auto;

	position:absolute;
	top:125px;
	right:25px;
	bottom:50px;
	Xleft:475px;
    width:900px;
	Xmax-width:60%;

	padding: 25px;

	border-left: 10px solid #D80000;

	/*	
		makes background transparent, but also images, and lightens text 
	*/
	xxbackground-color:#F8F0F0;
	/* for IE */
	xxfilter:alpha(opacity=93);
	/* for the rest * /
	xxopacity:0.93;

	/*
		makes background transparent, affects nothing else
	*/	
	background-color: rgba(248, 240, 240, 0.90);
}

#content
{
	text-align:left;
	color: #000;
}

#content h2 {
	margin:0;
	margin-bottom:25px;
	font-size: 2em;
	font-weight:bold;
}

#content table {
	margin:auto;
	border-spacing:0px;
    border-style: none;
}

#content table td {
	text-align:left;
    padding:5px;
}

#footer-container
{
    position:absolute;
    width: 100%;
    float: left;
    height: 35px;
    bottom:0;
	color: #fff;
	background: #000;
}

#footer
{    
	text-align: right;
    margin-right:15px;
	padding: 10px;
}

#footer a {
	color: #fff;
    text-decoration: none;
}

#social-icons{
    z-index:2;
	margin:0;
	position:absolute;
	top:38px;
	right:25px;
}

#randomquote {
    background: url(http://www.northshorefrogmen.com/quotes_bg.jpg) no-repeat;
	position:absolute;
    overflow: auto;
  
    width:400px;
    right:0px;
    bottom:100px;

    color:#000;
	background: #fff;
	filter:alpha(opacity=70);
	opacity:0.70;    
}

#randomquote p {
    padding-top:5px;
    padding-left:50px;
    padding-right:10px;
}


#twit_box {
	margin:0;
	position:absolute;
	bottom:50px;
	right:25px;
}

#cal_details {
	padding-left:25px !important;
}

#top_blurb {
	position:absolute;
	bottom:100px;
	left:0px;
	height:80px;
    width:225px;

	background-color:#D80000;

	padding:10px;
	color: #FFFFFF;
	Xtext-decoration:blink;
	z-index:999;
}

#top_blurb_big_message {
	position:absolute;
	Xbottom:200px;
	bottom:75px;
	left:0px;
	height:210px;
    width:500px;
	Xheight:210px;
    Xwidth:350px;

	background-color:#D80000;

	padding:10px;
	color: #FFFFFF;
	Xtext-decoration:blink;
	Xz-index:999;
}

.calendar_options {
    text-align:center;
    font-size:1em;
}

.calendar_options ul {
	display: inline-table;
}

.calendar_options ul li {
    padding:10px;
	list-style-type: none;
    display:table-cell
}