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

html 			{ height: 100%; }
body 			{ font-family: Lato,sans-serif; font-size: 14px; line-height: 22px; margin: 0; }
a 				{ color: #2518b5; }
br.clear 		{ clear: both; }
h1 				{ margin: 33px 0 45px; text-align: center; }
h1 img			{ width: 200px; }
h2				{ margin: 5px 0 25px; font-size: 25px; font-weight: 300; line-height: 28px; }
h2 strong		{ border-bottom: 4px solid #eee; font-weight: 300; }
h3				{ margin: 22px 0 8px; font-size: 17px; font-weight: 400; line-height: 28px; border-bottom: 1px solid #ddd; padding-bottom: 6px; }
body.home 		{ background-image: url(/images/home-bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; }

ul.menu 			{ list-style-type: none; text-align: center; padding: 0; }
ul.menu li			{ display: inline; margin: 0 14px; }
ul.menu li a		{ color: #666; text-decoration: none; font-weight: 300; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; }
ul.menu li a.cur	{ color: #000; font-weight: 400; border-bottom: 2px solid #eee; }

#container 		{ width: 90%; margin: 10px 5%; position: relative; }

.date			{ width: 300px; margin: 22px auto; padding: 20px; text-align: center; font-size: 33px; font-weight: 300; color: #555; background-color:rgba(255, 255, 255, 0.5); }

.block 				{ margin: 55px 0; }
.block img 			{ float: left; width: 58%; margin-right: 4%; }
.block .text 		{ float: left; width: 38%; position: relative; }
.block .text p		{ margin: 8px 6% 8px 0; }

.block2 			{ margin: 55px 0; text-align: center; }
.block2 .text 		{ margin: 0 25%; }
.block2 .text p		{ margin: 20px 0; }

#useful-info 		{ margin: 30px 0; display: flex; flex-wrap: wrap; }
#useful-info div 	{ width: calc(30.5% - 52px); margin: 1.4%; padding: 16px 25px; min-height: 335px; border: 1px solid #ccc; line-height: 20px; }
#useful-info div h2	{ font-size: 23px; margin-bottom: 19px; }
#useful-info div img { float: left; margin: 0 15px 10px 0; }
#useful-info .schedule span { display: block; float: left; width: 56px; padding: 2px 0; margin-right: 7px; font-size: 12px; text-align: center; background-color: #f4f4f4; }

form#rsvp 					{ width: 450px; margin: 55px auto; border: 1px solid #ddd; padding: 0 30px; text-align: left; }
form#rsvp input[type=text]	{ padding: 5px; font-size: 15px; width: 200px; }
form#rsvp input[type=text].short { width: 80px; }
form#rsvp .additional 		{ background-color: #f4f4f4; padding: 8px 28px; display: none; }

div.dashboard 		{ display: flex; justify-content: center; margin-top: 30px; }
div.dashboard div 	{ width: 105px; height: 105px; margin: 0 14px; padding: 12px 15px 22px 15px; box-shadow: 0 0 5px #bbb; border-radius: 8px; text-align: center; color: #666; }
div.dashboard div span.num { font-size: 46px; line-height: 60px; font-weight: 300; }
div.dashboard div span.extra { font-size: 19px; line-height: 33px; opacity: 0.50; }
div.dashboard div:nth-of-type(2) { color: green; }
div.dashboard div:nth-of-type(3) { color: green; }
div.dashboard div:nth-of-type(4) { color: green; }
div.dashboard div:nth-of-type(5) { color: red; }
div.dashboard div.buses { font-size: 11px; line-height: 13px; }
div.dashboard div.buses p { margin: 3px 0; position: relative; top: -11px; }
div.dashboard div.buses span { display: inline-block; font-size: 22px; font-weight: 300; line-height: 22px; padding-top: 5px; }
div.notes 			{ margin: 25px 0; text-align: center; font-size: 13px; color: #777; } 
div.notes p			{ margin: 5px 0; } 
table 				{ border-collapse: collapse; margin: 25px auto; }
table td 			{ border: 1px solid #ccc; font-size: 11px; padding: 1px 2px; }
table tr.top 		{ font-weight: bold; }
table tr.deleted 	{ color: #999; text-decoration: line-through; }
table td.decline 	{ background-color: #ffd4cc; }
table td.service_reception_ONLY	{ background-color: #ffe0cc; }
table tr.deleted td.service_reception_ONLY	{ background-color: inherit; }
table td.calc  		{ background-color: #f5f5f5; }
table td.calc.edited { background-color: #cce6cc; }
table input[type=number] { width: 25px; }


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

}

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

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