@charset "UTF-8";

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {color: #222;}
body {font-size: 1em; line-height: 1.4; font-family: "adobe-caslon-pro",serif;}
::-moz-selection {background: #ccc; text-shadow: none;}
::selection {background: #ccc; text-shadow: none;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
/* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */
img {vertical-align: middle;}
fieldset {border: 0; margin: 0; padding: 0;}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}
.rNarrow{display: none;}
.rWide{display: block;}

#minor li.rNarrow{display: none;}

a{text-decoration: none; color: #3dc99a;}
a img{border: 0;}
h1 a, h2 a{color: #222;}
h1 a:hover, h2 a:hover{color: #3dc99a;}

.edit_this{color: #999; font-size: 10px;}

/* ==========================================================================
   Structure
   ========================================================================== */

#container{width: 900px; margin: auto;}
aside{width: 280px; float: left;}
article, nav, .prev-next{width: 600px; float: right;}
#container > header{padding: 20px 0; margin-bottom: 20px; background: transparent url(/assets/images/rule_2a.gif) no-repeat bottom left; background-size: 900px 12px;}
#main_content{padding: 0;}
ul#minor,
ul#socmed{width: 300px;}
ul#minor{float: left;}
ul#socmed{float: right;}
#container > footer{background: transparent url(/assets/images/rule_2c.gif) no-repeat top left;  background-size: 600px 12px; padding: 20px 0;  width: 600px; float: right;}
.col_container{margin-bottom: 20px;}
	
/* ==========================================================================
   Navigation
	our navigation consists of background images in a retina-resolution sprite, specified at half size for normal screens
   ========================================================================== */

p#copyright{font-size: 12px; padding: 40px 0 10px 0; text-align: right; color: #666; line-height: 1;}
p#copyright a{color: #000;}
#nav ul,
ul#minor,
ul#socmed{list-style: none outside none; margin: 0; padding: 0;}
#nav ul li,
ul#minor li,
ul#socmed li{margin: 0; padding: 0; text-indent: -9999px; display: inline;}
ul#minor li a,
ul#socmed li a,
#nav ul li a{background-image: url(/assets/images/spritesheetv2.png); background-repeat: no-repeat; background-size: 98px 987px;}
#nav > a{display: none;}

#nav ul{float: right; margin-top: 30px;}
#nav ul li a{margin-left: 27px; height: 25px; display: block; float: left;}
#nav ul li#nav_buy a{margin-left: 24px;} /* to even out spacing and bring ABOUT flush left */
#nav ul li#nav_chapters a{margin-left: 28px;} /* to even out spacing and bring ABOUT flush left */
#nav ul li:first-child a{margin-left: 0;}

#nav_about a{width: 57px; background-position: -2px -2px;}
#nav_about a.selected,
#nav_about a:hover{background-position: -2px -32px;}
#nav_chapters a{width: 67px; background-position: -2px -185px;}
#nav_chapters a.selected,
#nav_chapters a:hover{background-position: -2px -215px;}
#nav_openideo a{width: 65px; background-position: -2px -367px;}
#nav_openideo a:hover{background-position: -2px -397px;}
#nav_tools a{width: 52px; background-position: -2px -527px;}
#nav_tools a.selected,
#nav_tools a:hover{background-position: -2px -557px;}
#nav_blog a{width: 57px; background-position: -2px -928px;}
#nav_blog a:hover{background-position: -2px -958px;}
#nav_events a{width: 60px; background-position: -2px -307px;}
#nav_events a.selected,
#nav_events a:hover{background-position: -2px -337px;}

#nav_buy a{width: 81px; background-position: -2px -125px;}
#nav_buy a.selected,
#nav_buy a:hover{background-position: -2px -155px;}

#minor{float: left; margin-top: 30px; margin-bottom:30px;}
#minor li a{margin-right: 20px; height: 26px; display: block; float: left;}
#minor li:last-child a{margin-right: 0;}

#nav_minor_bulk a{width: 92px; background-position: -2px -63px;}
#nav_minor_bulk a:hover{background-position: -2px -94px;}
#nav_minor_subscribe a{width: 93px; background-position: -2px -465px;}
#nav_minor_subscribe a:hover{background-position: -2px -496px;}
#nav_minor_contact a{width: 73px; background-position: -2px -245px;}
#nav_minor_contact a:hover{background-position: -2px -276px;}

#socmed{float: right; margin-top: 10px; margin-bottom:30px;}
#socmed li a{margin-left: 0px; height: 28px; display: block; float: right;}
#socmed li:last a{margin-left: 0;}

#nav_socmed_facebook a{width: 35px; background-position: -2px -587px;}
#nav_socmed_facebook a:hover{background-position: -2px -621px;}
#nav_socmed_flickr a{width: 30px; background-position: -2px -655px;}
#nav_socmed_flickr a:hover{background-position: -2px -689px;}
#nav_socmed_google a{width: 27px; background-position: -2px -723px;}
#nav_socmed_google a:hover{background-position: -2px -757px;}
#nav_socmed_pinterest a{width: 30px; background-position: -2px -791px;}
#nav_socmed_pinterest a:hover{background-position: -2px -825px;}
#nav_socmed_twitter a{width: 31px; background-position: -2px -859px;}
#nav_socmed_twitter a:hover{background-position: -2px -893px;}

/* IE8 and under, no background-size, we serve a different sprite */
html.ie8 ul#minor li a,
html.ie8 ul#socmed li a,
html.ie8 #nav ul li a,
html.ie7 ul#minor li a,
html.ie7 ul#socmed li a,
html.ie7 #nav ul li a{background-image: url(/assets/images/spritesheet_IE8v2.png); background-repeat: no-repeat;}

html.ie8 .cycle-pager span,
html.ie7 .cycle-pager span {background: transparent url(/assets/images/nav_slide_IE8.gif) no-repeat top left;}
html.ie8 .cycle-pager span.cycle-pager-active,
html.ie7 .cycle-pager span.cycle-pager-active {background: transparent url(/assets/images/nav_slide_selected_IE8.gif) no-repeat top left;}


/* ==========================================================================
   Home Page
   ========================================================================== */
#slideshow{width: 900px; background: transparent url(/assets/images/rule_2b.gif) no-repeat bottom left; background-size: 900px 12px; padding-bottom: 10px;}
#slides-text{width: 280px; float: left;}
#slides-text a{color: #222;}
#slides-text div.table{display: table; width: 280px; height: 440px;}
#slides-text div.cell{display: table-cell; vertical-align: middle; width: 280px;}
#slides-text > div > div > div {width: 280px; font-size: 45px; line-height: 1; font-weight: 500; text-transform: uppercase; font-family: "franklin-gothic-urw", sans-serif;}
#slides-image{width: 600px; float: right;  margin-bottom: 20px;}
#slides-image div{width: 600px;}
.slide{display: none;}
.slide.first{display: block;}
.cycle-pager {}
.cycle-pager span {cursor: pointer; display: inline-block; width: 15px; height: 15px; margin: 10px 3px 0 3px; background: transparent url(/assets/images/nav_slide.gif) no-repeat top left;  background-size: 15px 15px; text-indent: -9999px;}
.cycle-pager span.cycle-pager-active {background: transparent url(/assets/images/nav_slide_selected.gif) no-repeat top left; background-size: 15px 15px;}
.cycle-pager > * { cursor: pointer;}
.cycle-overlay {display: none !important;}

article.twitter p{color: #7d7d7d; font-size: 13px;}
article.twitter p a{color: #000;}
article.twitter p a.twitter-name{font-family: "franklin-gothic-urw", sans-serif; text-transform: uppercase; font-weight: bold; font-weight: 500; }

/* ==========================================================================
   Interior Pages
   ========================================================================== */

.col_1{width: 290px; float: left;}
.col_2{width: 290px; float: right;}
article section{margin-top: 20px;}
article h1{text-transform: uppercase; font-family: "franklin-gothic-urw", sans-serif; margin: 0; font-size: 15px; font-weight: 500; }
article h2{text-transform: uppercase; font-family: "franklin-gothic-urw", sans-serif; margin: 0; font-size: 15px; font-weight: 500; }
article > h1{text-transform: uppercase; font-family: "franklin-gothic-urw", sans-serif; margin: 0; font-size: 20px; font-weight: 700;  letter-spacing: 1px;}
article > h2{text-transform: uppercase; font-family: "franklin-gothic-urw", sans-serif; margin: 0; font-size: 20px; font-weight: 700; }
.col_1 > h1, .col_2 > h1{margin-top: 20px;}

#chapter article > h1{color: #999; font-weight: 500;}
#chapters article section h2{font-weight: 700;}
#chapters section > a h1 {color: #999;}
#chapters section > a h2 {color: #000;}
#chapters section > a:hover h2{color: #3dc99a;}

#events .col_1{width: 600px;}
#events .col_2{width: 0px;}
#events section{padding: 20px 0 0 0; border-top: solid 1px #eee;}
/*
#events section.last{border-bottom: solid 1px #eee;}
*/
#events section p{}
#events p.date{color: #999; font-size: 14px;}
/*#events p.date span{color: #bbb;}*/
#events .events_link{display: block; color: #000; text-transform: uppercase; font-weight: 500; font-family: "franklin-gothic-urw", sans-serif; margin: 0; font-size: 15px; padding: 20px 0; font-weight: bold;}

#tools .col_1{width: 600px;}
#tools .col_2{width: 0px;}
#tools section{padding: 20px 0 0 0; border-top: solid 1px #eee;}
#tools section.last{padding-bottom: 20px;}
#tools section p{}
#tools section h1{font-weight: 500;}
#tools section strong h1{font-weight: 700;}
#tools section img{float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 18px;}

#one_col_page .col_1{width: 600px;}
#one_col_page .col_2{width: 0px;}

.video-container{margin-top: 15px;}

/* PREV NEXT ******************************/
.prev-next{border-top: solid 1px #eee; padding: 20px 0;}
.prev-next p{margin: 0; color: #999; font-size: 14px;}
.prev-next p a{text-decoration: none;}
.prev{display: block; width: 42%; float: left; text-align: left; }
.next{display: block; width: 42%; float: right; text-align: right;}


/* ==========================================================================
   Modals
   ========================================================================== */
#offerModal{width: 630px; height: 850px;}
#subscribeModal{width: 450px; height: 170px; background-color: #fff; padding: 20px;}
/* Mailchimp */
#subscribeModal{background:#fff; width: 420px; margin: auto; text-align: center;}
#mc_embed_signup label{display: block; margin-bottom: 10px; font-size: 15px;}
#mc_embed_signup input.email{font-size: 13px; padding: 6px 6px; width: 150px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #dcdcdc;}
#mc_embed_signup .button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ededed;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:13px;
	font-weight:normal;
	padding:5px 16px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}
#mc_embed_signup .button:hover {
	background-color:#dfdfdf;
	cursor: pointer;
}
#mc_embed_signup .button:active {
	position:relative;
	top:1px;
}
#mc_embed_signup .response{font-size: 13px; background-color: #FFFCE2; padding: 12px; border: solid 1px #dfdfdf; line-height: 1.5;}

/* ==========================================================================
   SEARCH
   ========================================================================== */
#search .col_1{width: 600px;}
#search .col_2{width: 0px;}
#search .col_container a{color: #222;}
#search .col_container a:hover{color: #3dc99a;}

/* ==========================================================================
   FREEFORM
   ========================================================================== */

.ff_composer * {
	-webkit-box-sizing	: border-box;
	-moz-box-sizing		: border-box;
	box-sizing			: border-box;
}
.ff_composer .line,
.ff_composer .line:last-child,
.ff_composer .last_unit{overflow:hidden;}
.ff_composer .unit{float:left; padding:4px;}
.ff_composer .unit_right{float:right;}
.ff_composer .size1of1{float:none;}
.ff_composer .size1of2{width:50%;}
.ff_composer .size1of3{width:33.33333%;}
.ff_composer .size2of3{width:66.66666%;}
.ff_composer .size1of4{width:25%;}
.ff_composer .size3of4{width:75%;}
.ff_composer .line:last-child,
.ff_composer .last_unit{float:none;width:auto;}
.ff_composer p,
.ff_composer h1,
.ff_composer h2,
.ff_composer h3,
.ff_composer h4,
.ff_composer h5,
.ff_composer h6 {margin-top: 0;}
.ff_composer .required_item {margin-left: 4px; color:red;}
.ff_composer textarea,
.ff_composer input[type="text"],
.ff_composer input[type="email"],
.ff_composer input[type="url"],
.ff_composer input[type="number"],
.ff_composer input[type="password"],
.ff_composer input[type="search"] {width: 95%;
	font-size: 13px; padding: 6px 6px;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		border-radius:3px;
		border:1px solid #dcdcdc;
		margin-bottom: 5px; 
		-moz-box-shadow: inset 0px 0px 10px #ececec;
		-webkit-box-shadow: inset 0px 0px 10px #ececec;
		box-shadow: inset 0px 0px 10px #ececec;
		}
.ff_composer input,
.ff_composer textarea{
	outline:none;
	transition: all 0.15s ease-in-out;
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
}
.ff_composer input:focus,
.ff_composer textarea:focus {
    box-shadow: 0 0 5px rgba(172,240,214,1);
    -webkit-box-shadow: 0 0 5px rgba(172,240,214,1); 
    -moz-box-shadow: 0 0 5px rgba(172,240,214,1); 
}
.ff_composer input[type="submit"]{
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background-color:#ededed;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:13px;
font-weight:normal;
padding:5px 16px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;

}
.ff_composer input[type="submit"]:hover {
	background-color:#dfdfdf;
	cursor: pointer;
}
.ff_composer ul.dynamic_recipients {list-style: none; padding:0;}
.ff_composer .field_label {font-weight: bold; line-height: 1;}
form .accessibility{display: none;}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media only screen and ( max-width: 640px ) /* 640 */
{
	@viewport{width: device-width;}
	.rNarrow{display: block;}
	.rWide{display: none;}
	#minor li.rNarrow{display: block;}
	#minor li.rWide{display: none;}
	#container > header{position: relative; height: 30px;}
	#nav ul li,
	ul#minor li,
	ul#socmed li{display: block;}
	#nav{position: absolute; top: 0; right: 0; z-index: 500;}
	#nav > a{float: right; display: block; width: 25px; height: 25px; background: transparent url(/assets/images/icon-nav.gif) no-repeat top left;  background-size: 25px 25px; text-indent: -9999px;}
	#nav ul{width: 100px; background-color: #fff; padding-right: 20px;  position: relative; top: 0; right: -30px; display: none; padding-top: 5px;
		-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
		-moz-box-shadow:    0px 0px 20px rgba(0, 0, 0, 0.05);
		box-shadow:         0px 0px 20px rgba(0, 0, 0, 0.05);
		}
	#nav ul.open{display: block;}
	#nav ul li a{float: right; margin-bottom: 5px; margin-top: 5px;}
	#nav ul li:first-child a{margin: auto;}
	
	.cycle-overlay {display: block !important; position: absolute; bottom: 32px; width: 100%; z-index: 600; background: black; color: white; opacity: .5;}
	.cycle-overlay p{padding-left: 15px; }
	
	#logo{position: absolute; top: 0; left: 0;}
	#container{width: 95%; margin: auto;}
	aside, article, nav, #container > footer, .col_1, .col_2, #tools .col_1, #events .col_1, #one_col_page .col_1, .prev-next{width: 100%; float: none; margin-bottom: 20px;}
	ul#minor,
	ul#socmed{width: 100%; float: left; clear: both; margin-bottom: 20px; display: block;}
	ul#minor li a,
	ul#socmed li a{float: left;}
	#container > footer{background-size: 100% auto;}
	
	#slideshow{width: 100%; background: transparent url(/assets/images/rule_2b.gif) no-repeat bottom left; background-size: 100% auto;}
	#slides-text{display: none;}
	#slideshow img, #slides-image, #slides-image div{width: 100%;}
	#slides-image{float: none;}
	#slideshow img{height: auto;}
	/* Responsive YouTube embed ******************************/
	.video-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
	.video-container iframe,
	.video-container object,
	.video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
}
@media only screen and ( max-width: 300px ) /* 300 */
{
	aside img{width: 100%; height: auto;}
}
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}