/*
Theme Name: Family 4th 2013
Theme URI: http://family4th.org/
Description: All new
Version: 1.0
Author: Shaun Swick
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
*/

/** colors
blue: 164e89
red: b0251f
**/

/* import fonts */
@font-face {
    font-family: 'picto';
    src: url('modernpics-webfont.eot');
    src: url('modernpics-webfont.eot#iefix') format('embedded-opentype'),
         url('modernpics-webfont.woff') format('woff'),
         url('modernpics-webfont.ttf') format('truetype'),
         url('modernpics-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}
.picto {font-family: 'picto'; font-size: 150%; line-height: 1;}
.picto.xl {font-size: 5em; margin-top: 0;}

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */ outline: 0;}
body {line-height: 1;}
ol, ul {list-style: none;}
table {/* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0;}
caption, th, td {font-weight: normal; text-align: left;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
img {max-width: 100%;}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

/* =Structure
----------------------------------------------- */
body {background: #fff; font-family: "chaparral-pro", Georgia, serif;}
.container {margin: 0 auto; line-height: 1.6;}
#bgwrap {background: url(img/stripesbg.jpg); /*background-attachment: fixed;*/}

/* =Global
----------------------------------------------- */

/* Headings */
h1, h2, h3, h4, h5, h6 {color: #164e89; font-weight: 900; font-family: "museo", serif; line-height: 1.2;}
h1 {font-size: 3em;}
h2 {font-size: 2.75em;}
h3 {font-size: 2.5em; color: #111; font-weight: 700;}
h4 {font-size: 2em; font-weight: 900;}
h5 {font-size: 1.5em; font-weight: 700;}
h6 {font-size: 1.5em; font-weight: 300;}

/* Text elements */
p {font-family: "chaparral-pro", Georgia, serif; margin-bottom: 1em; font-size: 1.25em;}
ul, ol {font-family: "chaparral-pro", Georgia, serif; font-size: 1.25em; margin-bottom: 1em;}
ul {list-style: circle;}
ol {list-style: decimal;}
p + ul, p + ol {margin-left: 2em;}
p.intro, .intro p {font-size: 1.5em;}
ul li, ol li {}
ul ul, ol ol, ul ol, ol ul {font-size: inherit;}
dl {}
dt {}
dd {}
strong {font-weight: bold;}
cite, em, i {font-style: italic;}
blockquote {}
blockquote em, blockquote i, blockquote cite {}
blockquote cite {}
abbr, acronym, dfn {}
sup, sub {font-size: 75%; height: 0; line-height: 1; position: relative; vertical-align: baseline;}
sup {bottom: 1px;}
sub {top: .5px;}
.caps {text-transform: uppercase;}
.block {display: block;}

hr {clear: both; height: 1px;}
.invisible {visibility: hidden;}
.spacer {margin-bottom: 1.5em;}
.break {clear: both; padding: 0 0 .25em; margin: .5em 0 1.5em; border-bottom: 1px solid #b0251f;}
.left {float: left;}
.right {float: right;}
.acenter {text-align: center;}

/* Forms */
form {margin-bottom: 2em;}
input[type="text"], input[type="email"], textarea {
	font-size: 100%; padding: 5px; border: 1px solid #ddd; background: #f5f5f5; 
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
	}
textarea {width: 24em; height: 8em;}
input[type="text"]:focus, textarea:focus {border: 1px solid #ccc; background: #fff;}
input[type="submit"] {color: #fff; display: block; margin: 1em 1em 1em 0; padding: .25em .6em; font-size: 1em; font-weight: bold; border: 1px solid #000; background: #000;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; clear: both;}
input[type="submit"].inline {display: inline; padding: .25em .5em; font-size: .8em;}
select {font-size: 125%;}
input[type="submit"]:hover, input[type="submit"]:focus {border: 1px solid #666; background: #666;}
input[type="submit"]:active {border: 1px solid #ccc; background: #eee; color: #000;}

label {display: block; margin: .75em 0 .25em}

td.req label:after, label.req:after {content: " *";}	
td.warn, p.warn, .mce_inline_error, h4.warn {border-left: 4px solid #b0251f; padding-left: 8px;}
h4.warn {margin-bottom: 1.5em;}
.warn input[type="text"] {border-color: #b0251f;}
.warn label, .mce_inline_error {color: #b0251f;}
span.asterisk {color: #b0251f;}

a.button {color: #fff; text-decoration: none; margin: 0 .5em 0 0; padding: .25em .6em; font-size: 1em; font-weight: bold; border: 1px solid #000; background: #000;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
a.button:hover {color: #fff; border-color: #666; background: #666;}
a.button:active {border: 1px solid #ccc; background: #eee; color: #000;}

/* Links */
a {text-decoration: underline; color: #b0251f;}
a:focus, a:active, a:hover {text-decoration: none; color: #000;}

#mast {padding: 1em 0; margin: 0; background: #164e89 url(img/blue-textured2.jpg); text-align: center;}
#mast img {max-width: 75%; margin: 0 auto; display: block; position: relative; margin-top: -3em;}
#mast .menu {font-weight: 700; font-family: "museo", serif;}
nav .menu {list-style: none; margin: 0; width: 100%; text-align: center;}
nav .menu li {margin: .5em .75em 0 .75em; padding: 0; display: inline-block; text-align: center;}
#mast .menu a {color: #fff; text-decoration: none; font-size: 1.75em; padding-bottom: .333em;}
#mast .menu a:hover {background: url(img/flair-white.png) bottom center no-repeat;}
#social {position: relative; z-index: 999;}
.icons {list-style: none; margin: 0 0 0 4em; padding: 0; text-align: left;}
.icons li {margin: .5em .75em 0 0; display: inline-block; text-align: left;}
.icons a {text-indent: -9999px; display: block; width: 50px; height: 50px; background-position: top left; padding: 0; background-repeat: no-repeat; border: none;}
.icons a:hover {background-position: bottom left;}
.icons .mc a {background-image: url(img/email.png);}
.icons .tw a {background-image: url(img/twitter.png);}
.icons .fb a {background-image: url(img/facebook.png);}

/* Info Sidebar */
#info-links, #sidebar .hilite {/*border: 1px solid #164e89; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;*/ background: #164e89; list-style:none; margin:0; padding: 1.5em;}
#info-links {list-style: none; padding-top: .75em; width: auto; font-size: 1em; margin: 0;}
#info-links a {text-align: left; text-decoration: none; display: block; padding: .25em; margin: 0; border-bottom: 2px solid #fff;}
#info-links a:hover {border-bottom-color: #ccc;}
#info-links .anchors {font-weight: 900; font-family: "museo", serif; color: #fff; font-size: 1.25em;}
#info-links .anchors:hover {border-bottom-color: #b0251f;}
#info-links li {margin:2px 0 5px; text-decoration:none; text-transform:uppercase; float: none;}
#info-links .shortcuts {list-style: none; margin: 10px 0; padding: 0; display: none;}
#info-links .shortcuts li {margin:0 0 5px; text-transform:none;}
#info-links .shortcuts a {color:#fff; border-bottom-width: 1px;}
#sidebar .hilite > p {margin-bottom: 0;}
#sidebar .hilite img {border: none; width: 100%;}
h3 span.new {background: url(img/new.png) top left no-repeat; display: inline-block; width: 48px; height: 25px; color: #cc0000; text-indent: -9999px;}
.shortcuts span.new {margin: 0 0 -.15em .25em; background: url(img/new-small.png) top left no-repeat; display: inline-block; width: 31px; height: 16px; color: #cc0000; text-indent: -9999px;}
#info-links #getting {display: block;}

#main {background: #fff; padding: 1em 0 4em;}
#pre-content {margin: 0 1em 1em;}
#pre-content h1 {position: relative; z-index: 999; background: #b0251f; color: #fff; padding: .25em; margin: -1em 0 0; font-size: 4em; text-align: center;}
#content {padding: 4.5em 6em 0;}

#footer {background: #fff; text-align: center; color: #999; margin: 6em 0 0; font-size: .75em;}
#footer .menu a {color: #999;}
#footer .menu a:hover {text-decoration: none;}

.logo-list {list-style: none; margin: 0; padding: 0; text-align: center;}
.logo-list li {width: 30%; display: inline-block; height: 6em; margin: 1em 0; padding: 0; text-align: center;}
.logo-list img {vertical-align: middle;}

/* GALLERY */
#fakecols {list-style: none; margin: 20px 0 0;}
#fakecols li {margin-bottom: 42px; height: 200px;}
#fakecols .last {margin-right: 0;}
#fakecols li a {text-decoration: none;}
#fakecols img {border: 5px solid #b0251f; margin-bottom: 10px; -moz-box-shadow: #000030 3px 3px 9px;}
#posters div {margin-top: 1em;}
#posters ul {list-style: none; margin: 0; padding: 0;}
#posters li {float: left; width: 33%; padding-right: .333333%; text-align: center;}
#posters a img {border: 5px solid #b0251f;}

#photo-disp {height: 190px;}
#photo-disp img {display: none;}
#photo-disp img.first {display: block;}

#visualization {width: 15em; height: 15em;}
#visualization p {font-size: .75em; text-align: center; margin: 0 2em .5em;}

/* clearfix */
ul.clear:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
ul.clear {display: inline-block;} 
html[xmlns] ul.clear {display: block;}
* html ul.clear {height: 1%;}

/* =Responsive Structure
----------------------------------------------- */

@media screen and (max-width: 320px) {
#social {display: none;}
#mast img {max-width: 90%; margin: 0 auto;}
#mast .menu a {font-size: 1em;}
#nav-info a span, #nav-thanks, #nav-gallery {display: none;}
#support #nav-support a, #info #nav-info a, #contact #nav-contact a {background: url(img/flair-tiny.png) bottom center no-repeat;}
#pre-content {display: none;}
#pre-content h1 {padding: .25em; margin: 0; position: inherit; font-size: 2.5em; text-align: center; color: #111;}
#content {padding: 1em 1em 0; margin-top: 0;}
.logo-list li {width: 90%; display: block; height: auto; margin: 2em auto;}
}

@media screen and (min-width: 321px) {
}

@media screen and (min-width: 481px) {
#photo-disp {height: 285px;}
}

@media screen and (min-width: 661px) {
#photo-disp {height: 380px;}
#pre-content h1 {background: url(img/banner-ribbon.png) top center no-repeat; padding: .45em .25em .4em;}
}

@media screen and (min-width: 690px) {
#photo-disp {height: 380px;}
}

@media screen and (min-width: 768px) { /* ipad or higher */

/* Columns
-------------------------------------------------------------- */
   
.column {float: left;}

/** NB! all px calcs are based on a full-width container **/

.span-1  {width: 4.166667%; /* 40px / 960px */}
.span-2  {width: 8.3333334%; /* 80px / 960px */}
.span-3  {width: 12.5%; /* 120px / 960px */}
.span-4  {width: 16.166667%; /* 160px / 960px */}
.span-5  {width: 20.833333%; /* 200px / 960px */}
.span-6  {width: 25%; /* 240px / 960px */}
.span-7  {width: 29.166667%; /* 280px / 960px */}
.span-8  {width: 33.333333%; /* 320px / 960px */}
.span-9  {width: 37.5%; /* 360px / 960px */}
.span-10 {width: 41.166667%; /* 400px / 960px */}
.span-11 {width: 45.833333%; /* 440px / 960px */}
.span-12 {width: 50%; /* 480px / 960px */}
.span-13 {width: 54.166667%; /* 520px / 960px */}
.span-14 {width: 58.833333%; /* 560px / 960px */}
.span-15 {width: 62.5%; /* 600px / 960px */}
.span-16 {width: 66.666666%; /* 640px / 960px */}
.span-17 {width: 70.833333%; /* 680px / 960px */}
.span-18 {width: 75%; /* 720px / 960px */}
.span-19 {width: 79.166667%; /* 760px / 960px */}
.span-20 {width: 83.333333%; /* 800px / 960px */}
.span-21 {width: 87.5%; /* 840px / 960px */}
.span-22 {width: 91.666667% /* 880px / 960px */;}
.span-23 {width: 95.833333%; /* 920px / 960px */}
.span-24 {width: 100%;}

/* Add these to a column to append empty cols. */
.append-1  {padding-right: 4.166667%; /* 40px / 960px */}
.append-2  {padding-right: 8.3333334%; /* 80px / 960px */}
.append-3  {padding-right: 12.5%; /* 120px / 960px */}
.append-4  {padding-right: 16.166667%; /* 160px / 960px */}
.append-5  {padding-right: 20.833333%; /* 200px / 960px */}
.append-6  {padding-right: 25%; /* 240px / 960px */}
.append-7  {padding-right: 29.166667%; /* 280px / 960px */}
.append-8  {padding-right: 33.333333%; /* 320px / 960px */}
.append-9  {padding-right: 37.5%; /* 360px / 960px */}
.append-10 {padding-right: 41.166667%; /* 400px / 960px */}
.append-11 {padding-right: 45.833333%; /* 440px / 960px */}
.append-12 {padding-right: 50%; /* 480px / 960px */}
.append-13 {padding-right: 54.166667%; /* 520px / 960px */}
.append-14 {padding-right: 58.833333%; /* 560px / 960px */}
.append-15 {padding-right: 62.5%; /* 600px / 960px */}
.append-16 {padding-right: 66.666666%; /* 640px / 960px */}
.append-17 {padding-right: 70.833333%; /* 680px / 960px */}
.append-18 {padding-right: 75%; /* 720px / 960px */}
.append-19 {padding-right: 79.166667%; /* 760px / 960px */}
.append-20 {padding-right: 83.333333%; /* 800px / 960px */}
.append-21 {padding-right: 87.5%; /* 840px / 960px */}
.append-22 {padding-right: 91.666667% /* 880px / 960px */;}
.append-23 {padding-right: 95.833333%; /* 920px / 960px */}
.append-24 {padding-right: 100%;}


/* Add these to a column to prepend empty cols. */
.prepend-1  {padding-left: 4.166667%; /* 40px / 960px */}
.prepend-2  {padding-left: 8.3333334%; /* 80px / 960px */}
.prepend-3  {padding-left: 12.5%; /* 120px / 960px */}
.prepend-4  {padding-left: 16.166667%; /* 160px / 960px */}
.prepend-5  {padding-left: 20.833333%; /* 200px / 960px */}
.prepend-6  {padding-left: 25%; /* 240px / 960px */}
.prepend-7  {padding-left: 29.166667%; /* 280px / 960px */}
.prepend-8  {padding-left: 33.333333%; /* 320px / 960px */}
.prepend-9  {padding-left: 37.5%; /* 360px / 960px */}
.prepend-10 {padding-left: 41.166667%; /* 400px / 960px */}
.prepend-11 {padding-left: 45.833333%; /* 440px / 960px */}
.prepend-12 {padding-left: 50%; /* 480px / 960px */}
.prepend-13 {padding-left: 54.166667%; /* 520px / 960px */}
.prepend-14 {padding-left: 58.833333%; /* 560px / 960px */}
.prepend-15 {padding-left: 62.5%; /* 600px / 960px */}
.prepend-16 {padding-left: 66.666666%; /* 640px / 960px */}
.prepend-17 {padding-left: 70.833333%; /* 680px / 960px */}
.prepend-18 {padding-left: 75%; /* 720px / 960px */}
.prepend-19 {padding-left: 79.166667%; /* 760px / 960px */}
.prepend-20 {padding-left: 83.333333%; /* 800px / 960px */}
.prepend-21 {padding-left: 87.5%; /* 840px / 960px */}
.prepend-22 {padding-left: 91.666667% /* 880px / 960px */;}
.prepend-23 {padding-left: 95.833333%; /* 920px / 960px */}
.prepend-24 {padding-left: 100%;}

.colborder {border-right: 1px solid #ccc;}

#photo-disp {height: 456px;}
}

@media screen and (min-width: 810px) {
#index #pre-content h1 {margin: -.25em 0 0;}
}

@media screen and (min-width: 960px) {	
.container {max-width: 960px;}
#photo-disp {height: 570px;}
#pre-content h1, #index #pre-content h1 {margin: -1em 0 0; padding: .45em .25em .4em;}
}