@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
@import url("core.css");
/* If you're doing a responsive design (and you probably should try) 
   you can use flex.css for the basic layout.
   otherwise, you can use fixed.css. Or roll your own. Whatever. 
*/
@import url("flex.css?v=5");

/* Most core styles and resets are defined in core.css, above.
   The following should be set on a per-project basis 
*/
body {
	/* root font stack and baseline grid:  */
	font: 1.25em/1.5em 'Helvetica','Arial Unicode',  "Verdana", Tahoma, Sans-Serif;
	color: #ddd;
	background: #6c98dc url(../img/pac_bg.jpg) bottom right fixed no-repeat;
	-moz-background-size: cover;
	background-size: cover;
}
select,input,textarea {color:#333}
a {color:#103973;}
a:link{-webkit-tap-highlight-color:#ffd}

/* Typography */
h1,h2,h3,h4,h5,h6{font-weight:bold}
h1{font-size:1.75em;line-height:1.5em; font-family:'Lato', inherit}
h2{font-size:1.5em; margin:.33em 0}
h3{font-size:1.25em}
small{font-size:85%}

/* define state styles! */
:focus {outline: 0;  }
::selection{background:#6c98dc;color:#fff;}

/* These are just helpers to let you see the basic preliminary layout
   and the basic elements. Remove at will.
   Remember: Articles can have headers and footers too.
*/

/*#wrapper > header h1 a {display:block;
	background: url(../img/PAC_LOGO.png) no-repeat;
	min-height:152px;
	text-indent:-5000px;
	}
*/
#wrapper > header {position:fixed; width:26.75%; padding-top:20px}
}
#wrapper > header h1 {position:relative; left:-3.5%;  margin-top:-3px;}

#wrapper > header p img {margin:10px auto}
#main_nav { margin:10px 0; background:#e9f0fb; border-radius:10px; border:2px solid #103973;
box-shadow: 0 5px 5px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 5px 5px rgba(0,0,0,.4); padding-top:30px; margin:-40px 3% 10px }
#main_nav ul {width: 93.75%; margin:0 auto}
#main_nav li {padding:15px 0 10px 0; font-size:.95em; text-align:center; float:left; width:50%}
#main_nav li a {font-weight:bold; color:#416ba7; text-shadow: 1px 1px 0 rgba(255,255,255,1);}
#main_nav li a:hover {color:#103973}


#content-main {background: #e9f0fb; background: rgba(255,255,255,.6); color:#333; border:2px solid #103973; border-radius:10px;
	box-shadow: 0 5px 5px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 5px 5px rgba(0,0,0,.5);  margin:20px 0; }
	
#content-main p {margin-bottom:1em}

#content-side {margin-top:360px}

img.noscale {width:auto; }

/* You'll probably want custom socialize links: */
ul.sociallinks {height:32px; 	padding:4px;margin:0; background:#416ba7; border-radius:8px; clear:both}
.sociallinks li {float:left; font-size:11px; list-style: none; white-space: nowrap; width:32%}
.sociallinks li img {float:left; margin-right:5px; width:32px}
.sociallinks li img.noscale {width:auto; float:none; }

.sociallinks li a {color:#ccc; font-weight:bold}
.sociallinks li iframe {display:inline-block; position:relative; top:5px}


/* End core. Now are now free to move about the cabin. */



.panorama {background: #103973; border-radius:8px; border:2px solid #103973; float:right; 
	box-shadow: 0 5px 5px rgba(0,0,0,.5); width:100%; min-height:360px;
	-webkit-box-shadow: 0 5px 5px rgba(0,0,0,.5);  overflow:hidden; margin-top:-7px; margin-right:-2px;}
.panorama * {display:block;  border-radius:8px; margin:0 auto; max-width:800px}
.panorama h1 {margin:0 2%; color:#fff; font-size:.7em; padding:3px 0 2px }

#content-well {padding:10px 2%}

#video-wrap {width:103%}
#video-wrap article {width:28%; float:left; margin-right:2%; line-height:1.25em; font-size:90%; height:200px; background:#f0f0f0; border:1px solid #888; box-shadow: 0 5px 5px rgba(0,0,0,.5); padding:8px 1.5%;
	-webkit-box-shadow: 0 5px 5px rgba(0,0,0,.5); margin-bottom:10px }
#video-wrap article section {display:none}
#video-wrap article img {display:block; border:1px solid #888;}
#video-wrap article h2 {font-size:70%; margin:0; line-height:1.25em; text-align:center;}


#articles #content-well > h1 {font-size:70%; background:#103973; color:#fff; border-radius:8px; padding:3px 10px; margin:-3px 0 5px -1%; width:100% }
#articles article {width: 47%; margin-right:3%; float:left; margin-bottom:15px; min-height:225px; padding-bottom:8px; border-bottom:2px solid #ccc }
#articles article h1 {font-size:1em; 	color:#416ba7; line-height:1.25em}
#articles article h1:hover {color:#103973}
#articles article hgroup {margin-bottom:.25em}
#articles figure {border:1px solid #111; float:right; width:33%; margin-left:2% }

#articles article a {color:#111}
#articles article p {font-size:85%; line-height:1.25em}
#articles article time {float:left; width:2.5em; text-align:center; font-weight:bold; border: 1px solid #444; display:block; margin: 3px 5px 0 0; background:#fff; display:none; }
#articles time .mo {display:block; color:#fff; background:#333; font-size:9px; text-transform: lowercase; line-height:1.25em}
#articles time .d {font-size:15px} 

#articles article#featured-first {float:none; width:100%}
#articles article#featured-first p {line-height:1.5em; font-size:1.1em}
#articles article#featured-first figure {width:48%; float:left; margin:0 2% 0 0}
#articles article#featured-first .mo {font-size:11px}
#articles article#featured-first .d {font-size:20px; line-height:1.5em}
#articles article#featured-first h1 {
	font-size:1.75em;
}

#article-lead-in {width:40%; margin: 0 0 0 2%}
figure.main-photo {width:100%; background:#111; border:1px solid #111; color:#fff}
figure.main-photo img {border-bottom:1px solid #111}
figure.main-photo figcaption {padding:5px; font-size:70%; line-height:1.25em}

#article-detail time {float:right}

#article-detail time, 
#article-detail .byline, 
#article-detail .source,
#article-detail #section_nav {font-size:70%; line-height:1.25em; font-weight:normal; color:#416ba7} 

#article-detail .byline, 
#article-detail .source,
#article-detail #section_nav {text-transform: uppercase}


#article-detail .byline {font-size:80%; font-weight:bold}
#article-detail .source {margin-bottom:1em}



#article-detail figure.main-photo .byline {float:right; position:relative; top:-2.2em; color:#eee; font-size:10px; text-shadow: 0 0 3px rgba(0,0,0,1); }


blockquote.pull-quote {margin:10px 0; border:solid #999; border-width:5px 0; padding:1em 5px 0; font-size:120%; font-style:italic;
	font-family: Georgia, serif; color:#888; line-height:1.5em; text-align:center}


.pager {background:#fff; color:#103973; border-radius:8px; font-size:70%; text-align:center; margin:5px 0 5px -1%; width:102%;
	line-height:1.5em; clear:both; border:1px solid #eee}
.pager a {font-size:120%; font-weight:bold; background:#ccc; padding:0 10px; border-radius:8px; font-weight:bold}


#default #content-well article {width:47%; float:left; margin-right:3%;; font-size:85%; padding-bottom: 1em; min-height:14em;}
#default #content-well article h1 {font-size:1.3em; line-height:1.25em}
#default #content-well article#featured-first {width:100%; float:none; margin:0; font-size:110%; min-height:9em}

#default article img {width:28.5%; float:right;  border:1px solid #103973; margin-left:2%; margin-right:0}
h2.kicker {font-size:12px; text-transform: uppercase; color:#666; margin-bottom:0}


.boxedform {margin-top:10px;
	border:1px solid #103973;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	background: #f3f3f3 url(http://media.kansascity.com/images/v15/bg-tab.png) repeat-x;
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff));
	background: -moz-linear-gradient(50% 50% 270deg,#eee, #fff);
	padding-top:9px}


.boxedform p {border-bottom:1px solid #d0d0d0; padding-bottom:9px;}
.boxedform label {float:left; padding:5px 10px; font-size:12px; color:#333; font-weight:bold; width:25%}
.boxedform label.nofloat {float:none; width:100%}
.boxedform input[type=text],
.boxedform textarea {width:60%}
.boxedform .submithold {text-align:center}


ul.gallery_list {margin:0; padding:0; list-style:none}
#gallery_list #content-main li {width:30%; float:left; margin-right:3%; margin-bottom:10px; font-size:90%; list-style:none;  min-height:240px;}
#gallery_list #content-main li img {border:1px solid #666}
#gallery_list #content-main li h3 {text-align:center; font-size:12px; line-height:1.25em; min-height:2.5em}

#gallery_list #content-main li:nth-child(3n+4) {clear:left}

#gallery_images {width:680px}
#gallery_images li {float:left; }
#gallery_images li div {display:none;  }
#gallery_images img {border:1px solid #888; margin-right:20px; margin-bottom:10px}
#cboxLoadedContent div img {width:100%;}


/*Gallery detail page*/
#gallery_detail #gallery_nav {padding:0; margin:0 0 .5em 0; width:660px; height:86px; overflow:hidden;}
#gallery_detail #gallery_nav li {float:left; width:13%; height:80px; background:black; margin: .5% .75% .5% 0; padding:0; border:1px solid #eee; list-style-type:none !important;
	-moz-transition: 0.4s all linear;
	-webkit-transition: 0.4s all linear;
	transition: 0.4s all linear;}
#gallery_detail #gallery_nav li img {width:100%;}

#gallery_detail #gallery_nav li.current {border:1px solid #470C04; box-shadow:0px 0px 2px black;
	-moz-transition: 0.4s all linear;
	-webkit-transition: 0.4s all linear;
	transition: 0.4s all linear;}
#iris {height:auto; overflow:hidden; position:relative;}

#iris img.vertical {width:72%; float:left; margin-right:.5em;}
#iris img.vertical + .figcaption {margin-top:2em; max-width:22%;}
#iris .byline {display:block; font-size:80%;}
#iris .figcaption {margin: .5em .5em; float:left;}
#gallery_detail .buy {display:none; padding: .1em .25em; font-weight: bold;
	border-radius: .5em; border: 1px solid white; box-shadow: 0 0 .5em rgba(0,0,0,.5);
	text-shadow: 0px -1px 0px rgba(255, 255, 255, .5);
	margin:.25em 10% 1em .25em;
	font-size:.8em;

	background: #cccccc; /* Old browsers */
	background: -moz-linear-gradient(top, #cccccc 0%, #eeeeee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #cccccc 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #cccccc 0%,#eeeeee 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #cccccc 0%,#eeeeee 100%); /* W3C */
}
#gallery_detail .buy.nocaption {position:absolute; bottom:0; left:0;}
#gallery_detail .buy:hover {text-decoration:none;}
#gallery_detail .buy:active {
	background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* W3C */
}
#gallery_detail .buy.sellable {display:inline-block;}
#gallery_detail #prefetch {overflow:hidden; opacity:0; height:1px; width:1px;}

#gallery_ctrls {height:0; margin:-.5em 0 0 0; font-size:1.5em;}
#gallery_ctrls b {cursor:pointer; display:block; color:#F36600;}
#gallery_ctrls b:hover {color:#F36600;}
#gallery_ctrls .previous {float: left; position: relative; left: -.75em; top: 2em;}
#gallery_ctrls .next {float: right; position: relative; right: -.5em; top: 2em;}

#iris img, #gallery_nav li, .gal_ctrls .next, .gal_ctrls .prev {cursor:pointer;}

#flatpage #video-wrap article {width:19.5%}


#articles #cboxLoadedContent {font-size:80%; line-height:1.25em; font-family: 'Lucida Grande', 'Lucida Unicode', Verdana, Helvetica, Arial, Sans-Serif;}

.related_galleries {clear:both; padding-bottom:1em}

#content-main .related_galleries ul {list-style-type:none; margin: 0; padding:0;}
.related_galleries h2 {font-size:1.2em; margin:.5em 0; border-bottom:2px solid #ccc; padding-left:4px; clear:both}
.related_galleries li {float:left; width:30%; margin-right:3%;}
.related_galleries img {float:left; margin-right:.5em; width:auto;
	border: 1px solid #DDD;
	padding: 5px;
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-border-radius: 3px;}
.related_galleries h3 {font-size:.8em;}


#hdrimages {height:98%; overflow:hidden}


/*Video stuff*/
.vidgal {margin: 1em 0 4em 0; padding:0; list-style-type:none; }
.vidgal li {width:30%; float:left; margin-right:3%; min-height:200px; }
.vidgal li img { border:1px solid #666;}
.vidgal li h3 {font-size:.7em; text-align:center; line-height:1.25em; min-height:3em}
.vidgal li:nth-child(3n+4) {clear:left}

/*SHOEBOX*/
#shoebox {position:fixed; width:100%; height:100%; top:0; left:0; z-index:5000; 
	background: url('/static/img/blackpixel80percent.png') top left repeat; background: rgba(0,0,0,.8); display:none;}
#shoebox #media {margin: 0 auto; position:relative; border:1px solid #666; box-shadow: 0 2px 12px black; cursor:pointer; width:640px; background:black; color:#eee;}
#shoebox #media.vmix {cursor:auto;}
#shoebox h3 {font-weight:bold;}
#shoebox h3, #shoebox p {padding:0 .5em; margin:.25em 0; color:#eee; text-shadow:none;}
#shoebox p {font-size:.8em; line-height:1.4em;}
#shoebox #sb-close {width:30px; height:30px; background:black; display:inline-block; cursor:pointer;
	position:relative; top:5%; left:-15px; color:#ddd; font-size:30px; line-height:1;
	box-shadow: 0 1px 4px black;
	-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; border:1px solid white;
	font-family:helvetica, arial, sans-serif !important;
}
#shoebox .shoebox-ctrls {text-align:center; margin:.5em 0;}
#shoebox .shoebox-ctrls b {margin:0 2em; font-size:2em; cursor:pointer;}




/* article related galleries */
.gallery_set img {width: 32%; float: left; margin: 1% 0 1% 1%; border:1px solid}
.gallery_set a:first-child img {margin-left:0;}
.gallery_set .gallery-trigger {display:none}
.gallery_set p {font-size:11px;}



/* VIDEO */
.responsify-video {
    margin:1em 0;
    display:block;
    width:100%;
    height:0;
    position:relative;
    overflow:hidden;
    padding-bottom:56.25%; /* 16:9 aspect ratio */
}
.responsify-video iframe {width:100%; height:100%; position:absolute; border:0;}

.vidlist {margin:1em 0; padding:0; list-style-type:none;}
.vidlist li {width:30%; float: left; font-size:.9em; line-height:1.2em; margin: 1em 3% 1em 0; min-height:200px;}
.vidlist img {box-shadow: 0 0 2px black; margin-bottom:.25em;}

/*Video Detail*/
.related_video {border-top:2px solid #999; margin: 0 0 1em 0; padding:.5em 0 0 0; height:auto; overflow:hidden;}
.related_video li {width:30%; padding: 0 3% 0 0; list-style-type:none; margin:0; float:left;}
.related_video img {box-shadow: 0 1px 2px rgba(0,0,0,.9);}
#video_detail h4 {margin-top:2em;}

/* smaller screens  */
@media screen and (max-width:1024px) {
	body {font-size:.9em:}
	#main_nav li {float:none; width:90%}
	#video-wrap article {height:150px; }
	#content-main {clear:both}
	
}

@media screen and (min-width:1300px) {
.panorama {width:68%; margin-left:2%}
#default article.has_image h1 {float:left; width:67.5%}
#default article#featured-first header { text-align: right;}

}