/*
-----------------------------------------------
How to have fun when all your friends are at SXSW (2010)
author: dan rubin
edited: 2010-03-15
----------------------------------------------- */

/* remember to remove any resets not needed for this design */
@import url("reset.css");

/* math: it's what's for dinner */
body { font-size:100%; }
h1 { font-size:2.25em;  /* 16x2.25=36 */ }
h2 { font-size:1.5em;   /* 16x1.5=24 */ }
h3 { font-size:1.125em; /* 16x1.125=18 */ }
h4 { font-size:0.875em; /* 16x0.875=14 */ }
p  { font-size:0.75em;  /* 16x0.75=12 */ }

/* design */
body {
    background:#142840 url(images/bg-body.png);
    font-family:"helvetica neue",helvetica,sans-serif;
    text-align:center;
    color:#fff;
    -webkit-text-stroke:1px transparent;
}
@media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}}

#wrapper1 {
	background:url(images/bg-wrapper1.png) repeat-x left top;
}
#wrapper2 {
	background:url(images/bg-wrapper2.png) no-repeat left top;
}

#container {
	margin:0 auto;
	width:960px;
	height:480px;
	text-align:left;
}

#title {
	float:left;
	position:relative;
	width:320px;
	height:480px;
}
#title h1 {
	margin-left:15px;
	margin-top:18px;
	width:285px;
	height:448px;
	background:url(images/title.png) no-repeat;
	text-indent:-9999px;
}
#title p {
	position:absolute;
	left:20px;
	bottom:29px;
	font-size:11px;
	font-weight:bold;
}

#activities {
	float:left;
	width:320px;
}
#activities ul {
	margin-top:20px;
	padding:0 20px;
}
#activities ul li {
	position:relative;
	border-top:1px solid rgba(70,129,177,.1);
	height:48px;
	font-size:16px;
	line-height:48px;
	text-shadow:rgba(0,0,0,.4) 0px 2px 0;
}
#activities ul span {
	margin-right:6px;
	position:absolute;
	left:0;
	top:50%;
	margin-top:-10px;
	width:20px;
	height:20px;
	font-size:75%;
	font-style:normal;
	line-height:20px;
	text-shadow:none;
	text-align:center;
    background-color:rgba(0,0,0,.2);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
#activities ul a {
	display:block;
	padding-left:26px;
	background:url(images/bg-li.png) no-repeat center top;
	color:rgba(255,255,255,.85);
	text-decoration:none;
}
#activities ul a:hover {
	color:rgba(255,255,255,1);
	background:rgba(0,0,0,.05);
}
#activities ul a abbr {
	border-bottom:1px dotted rgba(53,97,146,.8);
}
#activities ul a strong {
	border-bottom:2px solid rgba(53,97,146,.4);
}
#activities ul a:hover strong {
	border-color:rgba(53,97,146,.2);
}
#activities ul a:hover abbr {
	border-color:rgba(53,97,146,.4);
}

#footer {
	margin:0 20px;
	border-top:1px solid rgba(70,129,177,.1);
	padding-top:6px;
}
#footer p {
    padding-bottom:10px;
	font-size:10px;
	text-align:center;
	color:rgba(255,255,255,.8);
}
#footer p a {
	padding-bottom:1px;
	color:rgba(255,255,255,.8);
	text-decoration:none;
	border-bottom:1px solid rgba(53,97,146,.4);
}
#footer p a:hover {
	color:rgba(255,255,255,1);
}


#other {
	float:left;
	width:300px;
	padding-top:34px;
	padding-left:20px;
	color:rgba(255,255,255,.95);
	text-shadow:rgba(0,0,0,.4) 0px 2px 0;
}
#other h2 {
	margin-bottom:8px;
	font-size:18px;
}
#other ul {
	margin-bottom:17px;
	font-weight:bold;
	line-height:18px;
}
#other ul ul {
	margin-bottom:6px;
	font-weight:normal;
}
#other ul li {
	font-size:14px;
}
#other ul a {
	text-decoration:none;
	color:rgba(255,255,255,.85);
}
#other ul a:hover {
	color:rgba(255,255,255,1);
}