/* 
   We select this css whenever there is a screeen < 980px (the width used by the screen.css).
   Well, to try and make a mobile css which utilizes 100% (that is < 980px) of the width is not
   practical considering that some images are simply wider than, say, 320px on some handhelds.
   So, I'll still create a page width of 672px (the normal width of the dynamic column) so that images
   meant for the dynamic column will still fit.  Then devices can be allowed to scale that width down
   if they need to make things fit... this is the best option for now short of creating two entirely 
   separate sites.

   Then, this css file tweaks the screen.css after importing it
*/

@import url('screen.css');

body {
	margin: 0 auto;
	width: 100%;
	font-size: 90%;
}

#container {
	width: 95%;
	margin: 0 auto;
	/*width: 100%;*/
}

/*
.event-image {
	width: 100%;
}
*/

#header {

	position: relative; /* to be able to use absolute positioning of the nav */
	width: 100%;
	height: 90px;
}

#header-carousel {
	display: none;
}

#header-name {
	/*FIXME width: 375px;*/
	/*width: 175px;*/
	background: url('ipc-name.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width:100%;
	height: 90px;
}

#nav {
	right: 0px;
}

#static_column {
	width: 100%;
	float: none;
	margin-top: 10px;
}

#dynamic_column {
	width: 100%;
	float: none;
	padding-top: .25em;
}

#footer {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin: 20px 0 0 0;
}

dd {
	margin-left: 1em;
}