/*
Theme Name: Credo Action
Theme URI: http://credoaction.com
Author: Marc Phu
Author URI: http://marcphu.com/
Description: 
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags:
*/


/* 	Reset
-------------------------------------------------------------- */
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; vertical-align: baseline; }
a img, :link img, :visited img { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: "";}
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

/* 	Wrapper
-------------------------------------------------------------- */
.header { height: 50px; background: #ff6707; }
.header .credo-logo a { display: block; text-indent: -999em; background: url(images/credo-logo-240x100.png) no-repeat -6px 0px; width: 120px; height: 50px; margin: 0px auto 0px auto; background-size: 120px 50px; }
.header .nav { display: none; }
.header .nav a { font: 14px/14px "proxima-nova",arial,sans-serif; font-weight: 700; text-transform: uppercase; }
.content-box { padding: 10px; }
.footer { clear: both; font-family: "proxima nova", arial, sans-serif; }
.footer-box { padding: 0px 10px 0px 10px; }
.footer .nav li a { /* background: #4A4744; color: #fff; */ background: #FCFAF8; color: #4A4744; display: block; line-height: 40px; margin: 0px 0px 1px 0px; text-indent: 10px; text-decoration: none; font-weight: bold; }
.footer .nav li a:before, .footer .nav li a:after { /* background: #4A4744; */ background: #FCFAF8; z-index: 1; }
.footer .publication { background: #FF6319; font-weight: bold; color: #fff; padding: 20px 0px 40px 10px; font-family: "proxima nova", arial, sans-serif; }
.footer .publication:before, .footer .publication:after { background: #FF6319; }
.footer .publication a { color: #fff; }

/* Typography & Styles
-------------------------------------------------------------- */

/*	Markup 
-------------------------------------------------------------- */
body { font-family: arial,sans-serif; font-weight: 400; color: #766F67; }
a  { color: #766F67; }
p { font: 15px/18px arial,sans-serif; margin-bottom: 15px; }
p:last-child { margin-bottom: 0px; }
strong, b { font-weight: bold; }
label { font-size: 12px; line-height: 20px; }
em, i { font-style: italic; }

/*	Typographic
-------------------------------------------------------------- */
.titleA { font-size: 30px; line-height: 30px; margin: 20px 0px 20px 0px; }
.titleB { font-size: 10px; line-height: 30px; font-weight: 600; text-transform: uppercase; } /* has switch for desktop */
.titleC { font: 24px/24px "proxima-nova",arial,sans-serif; font-weight: 700; }
.titleD { font-size: 16px; font-weight: bold; background: #ECE9E4; line-height: 60px; text-indent: 40px; }
.titleD span { position: relative; } 
.titleD span:before { content: ""; border-top: 1px solid #4A4744; border-right: 1px solid #4A4744; width: 10px; height: 10px; display: block; position: absolute; left: -30px; top: 3px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);}
.titleE { font-size: 12px; line-height: 30px; font-weight: bold; text-transform: uppercase; }
.titleF { font-size: 10px; line-height: 30px; font-weight: 600; text-transform: uppercase; } /* no switch for desktop */
.titleG { font-size: 12px; line-height: 20px; }
.titleH { font-size: 14px; line-height: 20px; font-weight:bold; }
.titleI { font-size: 12px; line-height: 30px; font-weight: bold; text-transform: uppercase; border-top: 1px solid #766F67; margin-bottom: 5px; }
.titleJ { font-size: 20px; line-height: 20px; text-align: center; }
.titleK { font-size: 12px; line-height: 15px; font-weight: bold; padding-bottom: 5px; }
.titleL { font-size: 18px; line-height: 30px; font-weight: bold; text-transform: capitalize; }
.titleM { font-size: 24px; line-height: 30px; font-weight: bold; margin: 20px 0px; }
.titleN { font: 16px/20px "proxima-nova", arial, sans-serif; font-weight: 700; }
.typeA { font: 14px/14px "proxima-nova",arial,sans-serif; font-weight: 700; text-transform: uppercase; }
.typeB { font: 10px/20px arial, sans-serif; text-transform: uppercase; }
.typeC { font: 30px/40px arial, sans-serif; color: #FF6707; margin-bottom: 20px; }
.labelA { line-height: 20px; font-weight: bold; font-size: 10px; text-transform: uppercase; }

/*	Buttons
-------------------------------------------------------------- */
.buttonA { display: inline-block; position: relative; font: 20px/40px "proxima-nova",arial,sans-serif;  font-weight: 700;  background: #FF6319;  border: none;  padding: 0px 18px 0px 15px; color: #fff; cursor: pointer; text-decoration: none; }
.buttonA:hover { text-decoration: none; }
.buttonA:after { content:''; display: inline-block; margin: 0px 0px 0px 6px; width: 0; height: 0; border-top: 6px solid transparent; border-left: 10px solid #fff; border-bottom: 6px solid transparent; }
.buttonB { display: block; font: 16px/30px "proxima-nova",arial,sans-serif; font-weight: 700; background: #FF6319; border: none; padding: 0; color: #fff; cursor: pointer; text-decoration: none; text-align: center; text-indent: -15px; }
.buttonB:after { content:''; position: absolute; margin: 11px 0px 0px 5px; width: 0; height: 0; border-top: 4px solid transparent; border-left: 8px solid #fff; border-bottom: 4px solid transparent; }
.buttonC  { position: relative; margin: 0px 0px 0px 12px; cursor: pointer; } 
.buttonC:before { content:''; position: absolute; margin: 6px 0px 0px -12px; width: 0; height: 0; border-top: 4px solid transparent; border-left: 7px solid #766F67; border-bottom: 4px solid transparent; }
.buttonC.clicked:before { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid #766F67; border-bottom: none; }
.buttonD { display: inline-block; font: 16px/30px "proxima-nova",arial,sans-serif; font-weight: 700; background: #FF6319; border: none; padding: 0px 5px; color: #fff; cursor: pointer; text-decoration: none; text-align: center; }
.buttonD:after { content: none; }
.buttonE { margin: 0px 20px 0px 20px; display: block; font: 14px/20px "proxima-nova",arial,sans-serif; font-weight: 700; background: #766F67; border: none; padding: 5px 0px 10px; color: #FCFAF8; cursor: pointer; text-decoration: none; text-align: center;  }
.clicked span:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); }
.buttonF { display: inline-block; position: relative; font: 12px/20px "proxima-nova",arial,sans-serif;  font-weight: 700; background: #766F67; border: none; padding: 0px 10px 0px 12px; color: #fff; cursor: pointer; text-decoration: none; margin-left: -1px; }
.buttonF:hover { text-decoration: none; }
.buttonF:after { content:''; display: inline-block; margin: 0px 0px 0px 6px; width: 0; height: 0; border-top: 4px solid transparent; border-left: 8px solid #fff; border-bottom: 4px solid transparent; }
a.buttonA:hover { color: #fff; cursor: pointer; text-decoration: underline; }

/*	Design
-------------------------------------------------------------- */
.banding { position: relative; }
.banding:before, .banding:after { width: 10px; content: ""; position: absolute; top: 0; bottom: 0; }
.banding:before { right: 100%; }
.banding:after { left: 100%; }
.banding-extralight, .banding-extralight:before, .banding-extralight:after { background: #FCFAF8; }
.banding-light-grey, .banding-light-grey:before, .banding-light-grey:after { background: #ECE9E4; z-index: 1; }
.border-top, .border-top:before, .border-top:after { background-image: url(assets/pix-dfdfdf.png); background-repeat: repeat-x; }
.note { text-align: center; }
.step-box h3 span { color: #3097D9; }
.icon-linkaway { background: url(assets/icon-linkaway.png) no-repeat center; text-indent: -999em; display: inline-block; width: 10px; line-height: 30px;  }

/*	Typography for Campaigners
-------------------------------------------------------------- */
.story { overflow: hidden; }
.story a { color: #766F67; text-decoration: underline; }
.story a:hover { color: #ff6319; }
.story .story-image1 { float: left; padding: 0px 10px 10px 0px; }
.story img.left { float: left; padding: 0px 10px 10px 0px; margin: 0px 0px 0px 0px; }
.story img.right { float: right; padding: 0px 0px 10px 10px; margin: 0px 0px 0px 0px; }
.story blockquote { font-size: 15px; line-height: 18px; /* padding: 10px 0px 10px 0px; */ margin: 0px 0px 20px 30px; }
.story blockquote p { font-size: 15px; line-height: 18px; margin-bottom: 22px; }
.story blockquote p:last-child { padding: 0px; margin: 0px; }
.story .highlight { font-size: 22px; line-height: 28px; border-top: 1px solid #ff6319; border-bottom: 1px solid #ff6319; padding: 10px 0px 10px 0px; margin: 0px 0px 20px 0px; }
.story .highlight p { font-size: 22px; line-height: 28px; margin-bottom: 22px; }
.story .highlight p:last-child { padding: 0px; margin: 0px; }
.story sup { font-size: 65%; line-height: 0; position: relative; vertical-align: baseline; top: -0.7em; }
.story ol { margin: 0px 0px 20px 40px; list-style-type: decimal; }
.story ul { margin: 0px 0px 20px 40px; list-style-type: disc; }
.story li { font-size: 15px; line-height: 18px; margin: 0px 10px 10px 0px; }
.story .sources:before { content: "SOURCES:"; font-size: 10px; line-height: 18px; font-weight: 600; }
.story ol.sources { margin: 0px 0px 20px 20px; }
.story .sources li { font-size: 12px; margin: 0px 0px 0px 0px; }
.story .resources:before { content: "RESOURCES:"; font-size: 10px; line-height: 18px; font-weight: 600; }
.story ul.resources { margin: 0px 0px 20px 20px; }
.story .resources li { font-size: 12px; margin: 0px 0px 0px 0px; }

/* 	Widgets
-------------------------------------------------------------- */
.widget { margin-bottom: 20px; }
.widget_credo_signup { border: 1px solid #ECE9E4; padding: 10px 0px; background: url(images/icon-people-illus.png) no-repeat 15px 12px; }
.widget_credo_signup #unknown_user { margin: 0px 10px 0px 100px; }
.widget_credo_signup #unknown_user .form-item { margin-bottom: 10px; }
.widget_credo_signup #unknown_user label { text-transform: lowercase; position: absolute; padding: 7px 0px 0px 10px; }
.widget_credo_signup #unknown_user input[type=text],
.widget_credo_signup #unknown_user input[type=email] { width: 100%; font: 12px/30px arial, sans-serif; height: 30px; padding: 0px; padding-left: 5px; border: 1px solid #C3C3C3; }
.widget_credo_signup #unknown_user label.error { position: relative; font-weight: bold; line-height: 12px; padding: 0px; text-transform: none; }
.widget_credo_signup #unknown_user input.error { background: #FFEAE0; border: 1px solid #FFA275; }
.widget_credo_twitter { border: 1px solid #ECE9E4; }
.widget_credo_twitter h4 a { display: block; text-decoration: none; font: 12px/12px "proxima-nova",arial,sans-serif; font-weight: 700; padding: 10px 10px 5px 10px; color: #FF6319; }
.widget_credo_twitter a { font-size: 8px; color: #eee; }
.widget-donation { background: url(images/icon-vote-illus.png) no-repeat 15px 12px; background-size: 70px; border: 1px solid #ECE9E4; padding: 10px 0px; }
.widget-donation a { text-decoration: none; }
.widget-donation h2 { margin: 0px 10px 0px 100px; }
.widget-donation p { font-size: 12px; line-height: 14px; margin: 0px 10px 0px 100px; }
.widget-donation .buttonF { margin: 10px 10px 0px 100px; }
.widget-mobilize { background: url(images/icon-people-illus.png) no-repeat 15px 12px; background-size: 70px; border: 1px solid #ECE9E4; padding: 10px 0px; }
.widget-mobilize a { text-decoration: none; }
.widget-mobilize h2 { margin: 0px 10px 0px 100px; }
.widget-mobilize p { font-size: 12px; line-height: 14px; margin: 0px 10px 0px 100px; }
.widget-mobilize .buttonF { margin: 10px 10px 0px 100px; }

/* 	Homepage
-------------------------------------------------------------- */
.campaign-entry { clear: both; display: table; width: 100%; margin-bottom: 10px; }
.campaign-entry a { color: #766F67; text-decoration: none; }
.campaign-entry .hero { display: table-cell; }
.campaign-entry .copy { display: table-cell; vertical-align: middle; padding: 0px 10px; }
.campaign-entry .copy h3 { font-size: 20px; line-height: 20px; }
.campaign-entry .copy .short { display: none; }
.campaign-entry .more { text-transform: uppercase; color: #FF6319; font-size: 10px; font-weight: bold; }
.campaign-entry:hover .more { text-decoration: underline; }

/* 	Contact Page
-------------------------------------------------------------- */
ul.list-table { margin: 0px 0px 30px 0px; }
.list-table > li { display: table; width: 100%; table-layout: fixed; }
.list-table label { display: table-cell; font-size: 12px; line-height: 12px; font-weight: bold; width: 30%; }
.list-table div { display: table-cell; width: 70%;  }
.list-table div a { display: block; overflow: auto; }

/* 	Campaign Page Style A
-------------------------------------------------------------- */
.page-template-page-campaignA-php .typeC { font-size: 25px; line-height: 35px; }
.page-template-page-campaignA-php .story p { font-size: 15px; line-height: 25px; }
.page-template-page-campaignA-php .story h3 { font-size: 18px; line-height: 25px; font-weight: bold; border-top: 2px solid #766F67; margin: 30px 0 18px; }
.page-template-page-campaignA-php .story h4 { font-size: 18px; line-height: 25px; color: #FF6707; }
.page-template-page-campaignA-php .col2 { background: #ECE9E4; padding: 20px 0; margin-bottom: 20px; }
.page-template-page-campaignA-php .col2 p { margin: 0 20px 10px 20px; }
.page-template-page-campaignA-php .fbox-trigger { position: relative; font: 15px/40px "proxima-nova",arial,sans-serif; font-weight: 700; background: #FF6319; border: none; margin: 20px; padding: 0px 18px 0px 15px; color: #FFF; cursor: pointer; text-decoration: none; text-align: center; }
.page-template-page-campaignA-php .the-fine-print p { font-size: 10px; line-height: 10px; margin: 0 0 10px; }

/* 	fbox Form Styles
-------------------------------------------------------------- */
.fbox { margin: 0 20px; }
.fline-left { width: 50%; float: left; }
.fline-right { width: 50%; float: right; }
.fbox label{ display: block; }
.fbox input[type=text] { width: 100%; border: 1px solid #C3C3C3; line-height: 20px; padding-left: 5px; }
.fbox select { width: 90%; }
.fbox textarea { height: 25px; border: 1px solid #C3C3C3; width: 100%; }
.fbox input { -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0;  -moz-border-radius: 0; }
.fbox input[type=submit] { display: inline-block; position: relative; font: 15px/40px "proxima-nova",arial,sans-serif; font-weight: 700; background: #FF6319; border: none; width: 100%; margin: 10px 0 20px; padding: 0px 18px 0px 15px; color: #FFF; cursor: pointer; text-decoration: none;  height: 40px; }
.fbox input.error { background: #FFEAE0; border: 1px solid #FFA275; }
.fbox label.error { color: #F77E43; font-weight: bold; }

/* Mobile Related
-------------------------------------------------------------- */
.desktop-init-hide { display: block; }
.mobile-init-hide { display: none; } /* Hide elements for mobile upon first loading */

	/* 
  ____ __  ___ 
 |__  / / ( _ )
   / / _ \/ _ \
  /_/\___/\___/
               
  	*/

@media only screen and (min-width: 768px)  { 

	.desktop-init-hide { display: none; }
	.mobile-init-hide { display: block; } /* Anything that was hidden for initial mobile hide needs to be turned back on */
	
	/* 	Wrapper
	-------------------------------------------------------------- */
	.header * { line-height: 50px; }
	.header-box { width: 730px; margin: 0px auto 0px auto; position: relative; }
	.header .credo-logo a { margin: 0px; }
	.header .nav { display: block; position: absolute; right: 12px; top: 0px; }
	.header .nav li { float: left; margin-left: 30px; }
	.header .nav li a { color: #fff; text-decoration: none; }
	.content { min-height: 540px;}
	.content-box { width: 730px; margin: 0px auto 0px auto; padding: 20px 0px; }
	.content-box:after { content: " "; display: table; clear: both; }
	.footer { font-size: 12px; /* border-top: 1px solid #ff6707; */ padding: 20px 0px 40px 0px; }
	.footer-box { width: 730px; margin: 0px auto 0px auto; padding: 0px; position: relative; }
	.footer .credo-logo { display: block; float: left; margin: 0px 20px 0px 0px; line-height: 20px; }
	.footer .nav li { float: left; line-height: 20px; padding-right: 5px; margin-right: 5px; border-right: 1px solid #D7D2CB; }
	.footer .nav li:last-child { border: none; }
	.footer .nav li a { background: none; color: #ff6319; text-indent: 0px; line-height: 15px; }
	.footer .publication { clear: both; font-size: 12px; line-height: 20px; background: none; color: #766F67; padding: 0px;  }
	.footer .publication a { color: #ff6319; text-decoration: none; }
	.footer .publication span { color: #D7D2CB; }
	
	/* 	Typography
	-------------------------------------------------------------- */
	.titleA { margin: 0px 0px 20px 0px; width: 410px; }
	.titleB { font-size: 16px; line-height: 40px; text-transform: none; font-weight: normal; background: #766F67; color: #ECE9E4; text-indent: 20px; }
	.titleC { font-size: 42px; line-height: 42px; }
	.titleM { margin: 0px; }
	.banding:before, .banding:after { content: none; }
	.form-box .titleB { display: block; }
	.form-prompt-box .statement-leadin { margin: 0px 20px; }
	.form-prompt-box .statement-leadin p { font-size: 12px; font-weight: bold; margin-bottom: 12px; }
	.form-prompt-box .statement-text { margin: 0px 20px 0px; }
	.form-prompt-box .statement-text p { font-size: 12px; font-weight: bold; margin-bottom: 12px; }
	.form-user-box .form-item { margin: 0px 20px; }
	#ak-errors li { margin: 0px 0px 0px 40px; }
	#ak-errors li:last-child { margin: 0px 0px 10px 40px; }
	.code-user-form-box .form-item { margin: 0px 20px; }
	
	/* 	Page layout
	-------------------------------------------------------------- */
	.col1 { width: 410px; float: left; }
	.col2 { width: 295px; float: right; }
	
	/* 	Homepage
	-------------------------------------------------------------- */
	.campaign-entry { clear: both; display: block; width: auto; margin-bottom: 20px; border-bottom: 1px solid #ECE9E4; padding-bottom: 20px; overflow: hidden; }
	.campaign-entry .hero { display: block; width: 110px; float: left; }
	.campaign-entry .copy { display: block; float: left; width: 280px; }
	.campaign-entry .copy h3 { font-size: 20px; line-height: 20px; margin-bottom: 6px; }
	.campaign-entry .copy .short { display: block; font-size: 14px; line-height: 16px; margin: 0px; }
	
	/* 	Campaign Page Style A
	-------------------------------------------------------------- */
	.page-template-page-campaignA-php .typeC { width: 410px; float: left;  }
	.page-template-page-campaignA-php .col2 { float: right; }
	
}

	/*
  ___ ____ ___ 
 / _ \__  | __|
 \_, / / /|__ \
  /_/ /_/ |___/
               
  	*/


@media only screen and (min-width: 975px)  { 
	/* Wrapper
	-------------------------------------------------------------- */
	.header-box { width: 935px; margin: 0px auto 0px auto; }
	.content-box { width: 935px; margin: 0px auto 0px auto; }
	.footer-box { width: 935px; margin: 0px auto 0px auto; }

	/* Typography
	-------------------------------------------------------------- */
	.titleA { margin: 0px 0px 20px 0px; width: 615px; }
	
	/* Page layout
	-------------------------------------------------------------- */
	.col1 { width: 615px; }
	
	/* 	Homepage
	-------------------------------------------------------------- */
	.campaign-entry .copy h3 { font-size: 24px; line-height: 24px; margin-bottom: 3px; }
	.campaign-entry .copy { width: 485px; }
	.campaign-entry .copy .short { font-size: 15px; line-height: 17px; }
	
	/* 	Campaign Page Style A
	-------------------------------------------------------------- */
	.page-template-page-campaignA-php .typeC { width: 615px;  }
	
}

/* IE
-------------------------------------------------------------- */
.lt-ie7 .page-template-page-campaignA-php .optional-field { margin: 20px 0; }
.lt-ie8 .page-template-page-campaignA-php .fline-right input { margin: 0; padding: 0; }
.lt-ie8 .page-template-page-campaignA-php .fline-left { float: none; width: 100%; clear: both; }
.lt-ie8 .page-template-page-campaignA-php .fline-right { float: none; width: 100%; clear: both; }
.lt-ie9 .page-template-page-campaignA-php .fbox-trigger { display: none; }
.lt-ie9 .page-template-page-campaignA-php .typeC { float: left; }