/* CPTSC Styles - CSS Document 


Modified from source code by James Taylor
*/

/* RESET *************************************************************/
html, body, div, span, applet, object, iframe, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, strike, tt, var, u, center, dl, dt, dd, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

/*ol, ul {
	list-style: none;
}*/
blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: '""'; content: none; }

table { border-collapse: collapse; border-spacing: 0; width: 500px; }

table, th, td {
   border: 1px solid #0069aa;
   padding: 3px;
   background-color: #f2eddc;
} 

td
{
padding: 3px;
}

.tablecontainer
{
margin-left: 0px;
margin-right: 0px;
}

/* NOTES  ******************************************************/
/* 		
		Might want to eventually change the name of many of the divs used in the HTML/CSS to better match CPTSC content
		
		Colour palette
			Dark Blue 						- #0069aa
			Light Putty						- #f2eddc
			Light Blue						- #67afd5
			Orange							- #ce6e32
			
			
		Fonts
			Devanagari sangam, verdana, sans-serif
		
*/
/* FONTS  ******************************************************/
body { font-family: 'Devanagari sangam', verdana, sans-serif; font-size: 1em; }

h1, h2 { font-family: 'Calisto MT', cochin, serif; }

h3, h4, h5, h6 {font-family: 'Devanagari sangam', verdana, sans-serif; font-weight: 400; margin: .75em 0 .5em; }

h1 { color: #ce6e32; font-style: normal; font-weight: 500; margin: 0; margin: .57em 0; padding: 0; line-height: 1.3em; }

h2 { color: black; font-size: 1.6em; font-style: normal; font-weight: 500; margin: .5em 0; padding-right: 10px; position: relative; line-height: 1.25em; }

h3 { font-size: 1.4em; }

h4 { font-size: 1.2em; }

h5 { font-size: 1em; }

h6 { font-size: .83em; }

p { font-size: 1em; }

p, ol, ul { margin: 1em 0; }

p, ol, ul { color: #333; font-style: normal; font-weight: 400; line-height: 1.5em; }

blockquote, q { font-size: .95em; line-height: 1.35em; margin: 1em 20px; }

i, cite, em, var { font-style: italic; }

strong, b { font-weight: 600; }

sub { font-size: x-small; vertical-align: sub; }

sup { font-size: x-small; vertical-align: super; }

ol, ul { padding: 0 0 0 1.5em; }

ol { list-style-type: decimal; }

ul { padding: 0 0 0 1.3em; }

ul li { padding-left: .2em; }

/* Aside specific fonts */
.grid-1-3  { border-top: 5px solid #0069aa; border-bottom: 1px solid #0069aa}
.grid-1-3 h2 { border-top: none; color: black; font-size: 1.1em; font-weight: 500; margin: .8em 0 0; padding: .6em 3% 2%; width: 94%; }

.grid-1-3 h2:first-child { margin-top: 0; border-top-left-radius: .2em; border-top-right-radius: .2em; }

aside p { color: black; }

.grid-1-3 p { margin: 0; padding: .3em 3% .3em; width: 75%; }

/* Footer specific fonts */
#footer p { color: #eee; }

/* BODY ******************************************************/
/* header */
header { background-color: #67afd5; /*border-top: 7px solid #272425;*/ clear: both; float: left; height: 5%; margin: 0; padding: 0; padding-top: 0; position: relative; width: 100%; }

#header { 
background-size: contain; height: 100%; margin: 0 auto; max-width: 1050px; }

#header a { display: inline; }


#header a:hover { border-bottom: none; text-decoration: none; }



/* Grid group */
.grid-group { clear: both; display: block; margin: 0 auto .5em; max-width: 1050px; width: 96%; }

/* Section */
.main { display: block; padding-bottom: 1em; }

/* Article */
.article { border-top: none; clear: both; margin: 0 0 3%; max-width: 1050px; padding: 0; }

.article:first-child { border-top: 1px solid #555; }

/* Aside */
.grid-1-3 { background-color: #f2eddc; clear: both; display: block; float: none; font-size: .9em; border-bottom-left-radius: .3em; border-bottom-right-radius: .3em; padding-bottom: .5em; }

/* Footer */
footer { background-color: #67afd5; clear: both; color: #ddd; float: left; margin: 1em 0 0; padding: 1em 0 5em; position: relative; width: 100%; height: 10%; min-height: 40px; }

#footer { font-size: .85em; margin: 0 auto; max-width: 1050px; position: relative; width: 96%; }

/* LINKS and NAVIGATION ******************************************************/


a { color: #0069aa; text-decoration: none; }

a:hover { border-bottom: 1px solid #ce6e32; color: #ce6e32; }

a:focus { background: #0069aa; color: #ffffff; }

.action { background-color: #ce6e32; border: none; border-radius: .3em; box-shadow: inset 0px 1px 1px -1px #ffffff; color: #fff; font-size: .95em; padding: .3em 2em; }

.action:hover { opacity: 0.8; cursor: pointer; color: #fff; border-bottom: none; }

.grid-1-3 a.action { margin: .3em 0 1em; }

.nav { background-color: #67afd5; border-top: 1px solid #ccc; clear: both; display: block; margin: 0; position: relative; width: 100%; z-index: 900; }



/* navigation 2 - visible on desktop view */
#nav2 { color: #fff; display: none; list-style: none; margin: 0; padding: 0; padding-bottom: .1em; position: absolute; }

#nav2 li { display: inline-block; padding: 0; }

#nav2 li a { border-bottom: none; color: #fff; display: inline-block; font-family: 'Devanagari sangam', verdana, sans-serif; font-size: 1.05em; font-weight: 500; padding: .4em .7em .2em; text-decoration: none; }

#nav2 li:last-child { border-right: none; }

#nav2 li a:hover { text-decoration: underline; background-color: #0069aa; }

/* nav 2 drop down */
#nav2 li ul { border-top: thin solid #444; display: none; list-style: none; margin: 0; margin-left: -1px; opacity: 0; padding: 0; position: absolute; z-index: 990; }

#nav2 li ul li { background-color: #0069aa; background-image: url(/assets/img/asn-stripe.png); border: none; display: block; float: none; width: 250px; }

#nav2 li ul li a { color: #fff; display: block; font-size: .95em; padding: .68em 1em; }

#nav2 li ul li a:hover { background: #ce6e32; color: #fff; text-decoration: none; }

#nav2 li ul li:after { content: no-close-quote; }

#nav2 li ul li:hover { text-decoration: none; border-bottom: none; }

#nav2 li:hover ul { display: block; opacity: 1; z-index: 500; }

#nav2 li ul li:last-child { border-bottom-right-radius: .3em; border-bottom-left-radius: .3em; }

#nav2 li ul li:last-child a:hover { border-bottom-right-radius: .3em; border-bottom-left-radius: .3em; }



/* CUSTOM CLASSES ******************************************************/
/* aside icon styling, appears to be redundant */
.icon-right { float: right; margin: .1em .25em 0 .25em; }

/* PAGE SPECIFIC STYLES ************************************************/
/* Index - home page styles */
.hero { border: 1px solid #0069aa; clear: both; display: block; margin: 1.5em 0 .8em; }

.hero ul, .hero ul li { margin: 0; padding: 0; }

#main-slider { margin: 0; position: relative; border: none; background-color: #67afd5; padding: 0; z-index: 100; }

.slides { width: 100%; display: block; margin: 0; vertical-align: bottom; list-style-type: none; }

.slides img { border-right: 1px solid #555; vertical-align: top; display: block; width: 100%; }

/* Can probably delete all but custom controls from the following section */

#main-slider ul li { padding: 0; }

.flex-control-nav { top: .5em; left: .5em; z-index: 950; }

.flex-control-nav { margin: 0; padding: 0; }

.hero-overlay { background-color: #fff; background: #f2eddc; width: 96%; padding: .5em 2% .8em; position: relative; bottom: 0; }

.hero-overlay h2 { font-size: 1.8em; padding-left: 2%; margin: .2em 0 0; }

.hero-overlay p { padding-left: 2%; }

.custom-controls { list-style-type: none; width: 100%; display: block; text-align: justify; }

.custom-controls li { list-style-type: none; width: 100%; display: block; text-align: justify; border: none; min-height: 260px; }

.custom-controls h2 { color: #fff; font-size: 1.4em; /* margin:0 1.1em; */ margin: 0 .5em; padding: .6em 0 .5em; border-bottom: 1px solid #fff; }

.custom-controls li h2 a { color: #fff; padding: 0; }

.custom-controls li a { color: #fff; font-size: 1em; padding: .5em 1.5em; /*border-top: 5px solid #0069aa;*/ }

.custom-controls li a:hover { border-bottom: none; }

.custom-controls p { color: #fff; margin: .5em .75em .5em; padding: .2em 0 .2em; font-size: 0.9em; }

.custom-controls p:last-child { text-align: left; margin-top: 0; padding-top: 0; margin-bottom: 0; }

.custom-controls p a.action { font-size: .9em; }

.slider-action { background-color: #31aE57; color: #fff; font-size: 1.1em; }

.custom-controls h2 a { color: #fff; }

.custom-controls li i.fa { color: #0069aa; z-index: 999; }

.custom-controls li:first-child i.fa { color: #fff; }

/* Three column layout home page */
.columns-1-3, .columns-1-3-long { background-color: #f2eddc; clear: both; display: block; float: none; border: 1px solid #0069aa; margin-top: .8em; padding-bottom: .5em; position: relative; }

.columns-1-3-long { border-left: none; border-right: none; }

.columns-2-3 { background-color: #f2eddc; display: block; float: none; margin-top: .8em; border: 1px solid #0069aa; position: relative; }

#news-long { clear: both; display: block; float: none; }

.columns-1-3 h2, .columns-2-3 h2, .columns-1-3-long h2 { border-top: 5px solid #0069aa; margin-top: 0; padding: .6em 3% 0; margin-bottom: .2em; }

.columns-1-3-long { border-top-left-radius: .2em; border-top-right-radius: .2em; }

.columns-2-3 h2 { border-top: 5px solid #0069aa; margin-top: 0; /*padding: .6em 1.5% 0;*/ padding: .6em 3% 0; }

.columns-1-3 h3, .columns-1-3-long h3 { margin: 0; padding: .2em 3% 0; }

.columns-1-3 p, .columns-2-3 p, .columns-1-3-long p { margin: 0; padding: .2em 3% .5em; }

.columns-2-3 p { margin: 0; display: block; padding: .2em 3% .5em; }

.sm-ad-hero-link { display: block; width: 100%; position: relative; height: 0; padding: 46.25% 0 0 0; overflow: hidden; }
.sm-ad-hero-link:hover { text-decoration: none; border-bottom: none; }

.columns-1-3 img { position: absolute; display: block; height: auto; width: auto; max-height: 125%; max-width: 125%; left: -5%; right: 0; top: 0; bottom: 0; margin: auto; border-bottom: 1px solid #555; vertical-align: top; }

.news h4 { border-top: 1px dotted #777; padding: .5em 0 0; margin: .2em 3% 0; line-height: 1.3em; }

.news p { font-size: .95em; }

/* Section index - Listings pages */
.section-hero-container { display: block; width: 100%; position: relative; height: 0; margin-bottom: 1em; padding: 46.25% 0 0 0; overflow: hidden; }

.section-hero { position: absolute; display: block; height: auto; width: 99%; top: 0; margin: auto; border: 1px solid #ddd; vertical-align: top; }

/* Listing pages */
/* Thumbs - for jackets etc. */
/* Might want to change the name of this div */

.thumbs { display: inline-block; margin: 1em 4%; border: 1px solid #555; }

.pubs-jackets { display: block; width: 90%; padding: 5%; position: relative; }

.pubs-jackets a, .pubs-jackets a:hover { border: none; padding: 0; margin: 0; }

.pubs-jackets img { display: inline-block; margin-right: 5%; width: 100%; /*width:45%;
border: 1px solid #555;
max-width:250px;*/ }

.pubs-jackets img:nth-of-type(even) { margin-right: 0; }





/* The below is responsive design stuff. Editing/deleting aspects of it, along with "grid-group" above in the CSS, is likely the key
to fixing the remaining mobile display visual bugs. */

/* QUERIES!       ******************************************************/
@media (min-width: 340px) { .conv-buttons { clear: both; }
  .conv-buttons li { display: inline-block; margin-right: 1.5em; width: auto; } }
@media (min-width: 400px) { #header img {  }
  .top-nav-text { display: inline; }
  .navMenuButton { position: absolute; bottom: 0; right: 0; }
  .thumbs { margin: 1em 9%; }
  .convention-nav1 li { width: 47.9%; display: inline-block; vertical-align: top; min-height: 180px; }
  .convention-nav1 li:nth-of-type(odd) { margin-right: 1.6%; }
  .custom-controls li { min-height: 220px; } }
@media (min-width: 501px) { .top-nav { margin: 0 2% 0 0; }
  .columns-1-3 { float: left; clear: right; margin: 1em 0 0 3%; width: 48%; min-height: 500px; }
  .columns-1-3:first-child { margin-left: 0; }
  .columns-2-3 { float: left; margin-top: 1em; width: 99.25%; }
  #news-long { clear: right; float: right; }
  .columns-1-3-long { margin-top: 1em; }
  /*.tagline { 	display:inline;  	font-size:1.15em; 	left:33%; 	top:40%; }*/
  .conv-info { display: inline-block; float: left; width: 72%; }
  .conv-buttons { display: inline-block; margin-top: .3em; position: inherit; right: 1em; text-align: right; }
  .conv-buttons li { display: block; margin: 0 0 .7em; width: 100%; }
  .convention-nav1 li { width: 48.5%; min-height: 165px; }
  .convention-nav1 li:nth-of-type(odd) { margin-right: 1%; }
  .conv-hero-overlay { position: absolute; }
  .thumbs { float: right; margin: 1em .5em 1.5em .5em; text-align: right; }
  .pubs-jackets { display: inline-block; width: 45%; float: right; padding: 1.5% 3% 3%; text-align: right; }
  .books-image-list { display: block; margin-bottom: 0; }
  .books-image-list li { float: none; width: 22.2%; }
  .custom-controls li { min-height: 190px; } }
@media (min-width: 601px) { .convention-nav1 li { min-height: 140px; }
  .custom-controls li { min-height: 170px; } }
@media (min-width: 701px) { header {  }
  #header img {  }
  /* Three column layout home page */
  .slides { width: 66%; clear: left; position: relative; display: inline-block; z-index: 500; }
  .slides img { width: 100%; z-index: 510; }
  .hero-overlay h2, .hero-overlay p { padding-left: 0; }
  .custom-controls { color: #fff; position: absolute; right: 0; top: 0; list-style-type: none; width: 34%; display: inline-block; font-size: 95%; }
  .custom-controls p:last-child { text-align: center; }
  .columns-1-3 { clear: right; float: left; margin: 1em 0 0 .5%; width: 48.5%; min-height: 490px; }
  .columns-1-3-long { margin-top: 0; min-height: 865px; }
  .columns-1-3:first-child { margin: 1em 1.5% 0 0; }
  .columns-2-3 { float: left; margin-top: 1em; width: 99.25%; }
  .columns-2-3 p { padding: .2em 2% .5em 1.5%; }
  .columns-2-3 h2 { padding: .6em 1.5% 0; }
  .columns-2-3 img.thumbs { margin: 0 2% 0 0; }
  #column-group-2-3 { float: left; width: 66%; }
  #news-long { clear: right; display: inline-block; float: right; width: 33%; margin: 1em 0 1em 1%; }
  .grid-1-3 { clear: right; float: right; font-size: .9em; padding-bottom: 1em; width: 30.33%; }
  #nav2 { display: block; font-size: .9em; margin: 0 auto; max-width: 1050px; position: relative; width: 96%; }
  #nav2 li:first-child a { margin-left: 0; }
  .navMenuButton { display: none; }
  .tagline { position: absolute; left: 38%; bottom: 10%; display: inline; font-size: 1.2em; }
  .main { float: left; width: 66.66%; }
  .top-nav { position: absolute; right: 0; top: 2%; display: inline; }
  .convention-nav1 li { width: 48.25%; min-height: 165px; }
  .convention-nav1 li:nth-of-type(odd) { margin-right: 1.4%; }
  .thumbs { float: right; margin: 1em .5em; clear: left; width: 22%; }
  h1 { max-width: 66.66%; } }
@media (min-width: 775px) { .tagline { bottom: 11%; }
  .custom-controls { font-size: 90%; }
  .custom-controls p a.action { font-size: 1em; }
  .hero-overlay { position: absolute; }
  .columns-1-3-long { min-height: 840px; }
  .tagline { font-size: 1.1em; } }
@media (min-width: 840px) { #nav2 { font-size: 1em; }
  .convention-nav1 li { width: 48.5%; min-height: 150px; }
  .convention-nav1 li:nth-of-type(odd) { margin-right: 1.2%; }
  .footer-nav { float: right; } }
@media (min-width: 860px) { .tagline { font-size: 1.25em; left: 37%; bottom: 12%; }
  .archive-list { padding: 0; }
  .archive-list li { display: inline-block; vertical-align: top; width: 47%; }
  .archive-list li:nth-of-type(even) { margin-left: 2.5%; }
  .archive-list li h3 { font-size: 1.4em; }
  .archive-list li img { margin-bottom: 0; }
  .archive-list li:last-child img { margin-bottom: 0; }
  .custom-controls { font-size: 100%; }
  .quick-links { padding: 0; }
  .quick-links li { display: inline-block; vertical-align: top; width: 47%; }
  .quick-links li:nth-of-type(even) { margin-left: 2.5%; }
  .columns-1-3-long { min-height: 840px; } }
@media (min-width: 980px) { #header { /*background-position: 35% 0;*/ }
  .tagline { font-size: 1.3em; left: 37%; bottom: 12%; }
  .custom-controls li h2 { margin: 0 1em; }
  .custom-controls li p { margin: 1em 1.5em; }
  .columns-1-3 { min-height: 450px; }
  .columns-1-3-long { min-height: 800px; } }
@media (min-width: 1050px) { #header {  }
  #header img {  }
  .tagline { left: 34%; font-size: 1.4em; }
  .convention-nav1 li:nth-of-type(odd) { margin-right: 1.6%; } }
@media (min-width: 1090px) { .convention-nav1 li { width: 48%; min-height: 125px; }
  .convention-nav1 li:nth-of-type(odd) { margin-right: 2.6%; }
  .pubs-jackets { width: 40%; padding: 1% 3% 3%; }
  .custom-controls p { font-size: 1em; }
  #header img {  }
  .tagline { left: 36%; font-size: 1.4em; }
  .top-nav { /*margin-right: .5%;*/ }
  .columns-1-3 { min-height: 420px; }
  .columns-1-3-long { min-height: 720px; } }
@media (min-width: 1185px) { .grid-group { margin: 0 auto; }
  header {  }
  #header {  }
  #header img {  }
  .tagline { left: 40%; font-size: 1.4em; } }