/*
Theme Name: Charles D'Angelo
Theme URI: none
Description: Theme for Charles D'Angelo
Version: 1.0
Author: William Richardson
Author URI: none

*/

a img.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{background:#fff;border:1px solid #f0f0f0;max-width:96%;text-align:center;padding:5px 3px 10px}
.wp-caption.alignright{margin:5px 0 20px 20px}
.wp-caption img{border:0 none;height:auto;max-width:98.5%;width:auto;margin:0;padding:0}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}
.alignnone,a img.alignnone,.wp-caption.alignnone,.wp-caption.alignleft{margin:5px 20px 20px 0}
.aligncenter,div.aligncenter,.aligncenter{display:block;margin:5px auto}
.alignright,a img.alignright{float:right;margin:5px 0 20px 20px}
.alignleft,a img.alignleft{float:left;margin:5px 20px 20px 0}

.clear {clear: both;}

/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html { font-size:100.01%; }
body {
  font-size: 75%;
  color: #333;
  background: #fff url(images/arrows-bg.png) top center no-repeat;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0px;
  padding: 0px;
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #333; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.4em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
/*
  These can be used to pull an image at the start of a paragraph, so
  that the text flows around it (usage: <p><img class="left">Text</p>)
 */
.left       { float: left !important; }
p .left     { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.right      { float: right !important; }
p .right    { margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a:focus,
a:hover     { color: #09f; }
a           { color: #06c; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong,dfn  { font-weight: bold; }
em,dfn      { font-style: italic; }
sup, sub    { line-height: 0; }

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre         { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }


/* Lists
-------------------------------------------------------------- */

li ul,
li ol  { margin: 0; }
ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }

ul     { list-style-type: disc; }
ol     { list-style-type: decimal; }

dl     { margin: 0 0 1.5em 0; }
dl dt  { font-weight: bold; }
dd     { margin-left: 1.5em;}


/* Tables
-------------------------------------------------------------- */

/*
  Because of the need for padding on TH and TD, the vertical rhythm
  on table cells has to be 27px, instead of the standard 18px or 36px
  of other elements.
 */
table         { margin-bottom: 1.4em; width:100%; }
th            { font-weight: bold; }
thead th      { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
/*
  You can zebra-stripe your tables in outdated browsers by adding
  the class "even" to every other table row.
 */
tbody tr:nth-child(even) td,
tbody tr.even td  {
  background: #e5ecf9;
}
tfoot       { font-style: italic; }
caption     { background: #eee; }


/* Misc classes
-------------------------------------------------------------- */

.small     { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large     { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide      { display: none; }

.quiet     { color: #666; }
.loud      { color: #000; }
.highlight { background:#ff0; }
.added     { background:#060; color: #fff; }
.removed   { background:#900; color: #fff; }

.first     { margin-left:0; padding-left:0; }
.last      { margin-right:0; padding-right:0; }
.top       { margin-top:0; padding-top:0; }
.bottom    { margin-bottom:0; padding-bottom:0; }

.see-more {display: block; font-size: 22px; padding-right: 16px; color: #333; text-decoration: none; background: url(images/small-arrow.png) no-repeat right;}
.see-prev {display: block; font-size: 22px; padding-left: 16px; color: #333; text-decoration: none; background: url(images/small-arrow-prev.png) no-repeat left;}

#container {width: 980px; margin: 0px auto; position: relative; padding: 0 0 30px 0;}

#header { padding: 25px 0 10px 0;}

#logo {display: block; width: 411px; height: 72px; background: url(images/logo.png); margin: 0 0 10px 15px; position: relative;}
#logo a {display: block; width: 100%; height: 100%; text-indent: -9999em; overflow: hidden;}
#book-callout-small {width: 469px; height: 125px; background: url(images/book-callout-small.png); position: absolute; right: 0; top: 10px;}

#navigation {margin: 0; overflow: visible;}
#navigation ul {display: block; margin: 0px; padding: 0px; overflow: visible;}
#navigation li {display: block; float: left; padding: 0 2px; position: relative; overflow: visible;}
#navigation li:first-child {padding: 0 2px 0 0;}
#navigation li:first-child a {padding: 5px 7px 5px 0;}
#navigation a {display: block; padding: 5px 6px; text-decoration: none; font-weight: bold; color: #000; font-size: 14px;}
#navigation a:hover {color: #d4383c;}
#navigation li ul {position: absolute; left: -9999em;; background: #fff; z-index: 100; width: 150px; border: solid 1px #ddd; padding: 7px 5px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
#navigation li:hover ul {display: block; left: 0;}
#navigation li ul li {float: none; background: #fff; padding: 0px; margin: 0px;}
#navigation li ul li:first-child {padding: 0px;
	-moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;}
#navigation li ul li:last-child {-moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;}
#navigation li ul li:first-child a {padding: 5px 7px;}

#charles {display: block; width: 396px; height: 793px; background: url(images/charles-lg.png); position: absolute; right: 55px; top: 10px; z-index: 20;}

#video-callout {display: block; width: 190px; position: absolute; top: 35px; left: 450px; overflow: hidden;}
#video-callout a {display: block; width: 48px; height: 48px; background: url(images/play-button.png); text-indent: -9999em; overflow: hidden; float: left; position: relative; top: 8px;}
#video-callout p {font-size: 16px; text-shadow: 1px 1px 1px #fff;}

#book-callout {display: block; width: 584px; height: 154px; background: url(images/book-callout-lg.png); text-indent: -9999em; overflow: hidden; position: relative; z-index: 10; margin: 0 0 15px 0;}

#success-stories {position: relative; z-index: 30; float: left; clear: both; margin: 0 0 20px 0;}
#success-stories h3 {font-size: 33px; font-weight: bold; margin: 0 0 5px 20px; text-shadow: 1px 1px 1px #fff;}

#success-list {background: url(images/green-gradient.png) bottom repeat-x #fff; padding: 20px 20px 10px 20px; float: left; clear: both; position: relative; overflow: hidden; width: 888px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);}
#success-list ul {margin: 0; padding: 0; overflow: auto; float: left; position: relative;}
#success-list li {display: block; float: left; width: 140px; height: 150px; overflow: hidden; position: relative; margin: 0 8px 0 0;}
#success-list li:last-child {margin: 0;}
#success-list li a {display: block; width: 140px;}
#success-list .label {display: block; width: 120px; height: 32px; padding: 0 10px 0 10px; line-height: 32px; background: #333;); position: absolute; bottom: -32px; color: #fff; font-size: 12px; font-weight: bold;}
#success-list .label em {display: block; position: absolute; right: 10px; line-height: normal; top: 10px; font-weight: normal;}
#success-list .see-prev {float: left; font-size: 24px; color: #333;}
#success-list .see-more {float: right; font-size: 24px; color: #333;}
#success-cycle {overflow: hidden; height: 150px; margin-bottom: 5px;}

#home-copy {clear: both; position: relative; z-index: 30; width: 550px;}
#home-copy h3 {font-size: 48px; margin: 0 0 5px 0;}
#home-copy p {font-size: 14px; line-height: 20px;}

#content {overflow: hidden;}

#ajax-content {background: url(images/green-gradient.png) bottom repeat-x #fff; width: 348px; padding: 15px 10px 10px 10px; float: left; margin-right: 10px;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
#ajax-content .meta {padding: 0 5px;}
#ajax-content .meta h3 {float: left; padding: 0; margin: 0 0 10px 0; font-size: 22px; color: #333;}
#ajax-content .meta #weight-loss {float: right; font-size: 22px; color: #333;}

#ajax-post-list {float: left;width: 540px; overflow: hidden;}
#ajax-post-list ul {float: left; width: 540px; margin: 0; padding: 0;}
#ajax-post-list li {float: left; width: 150px; padding: 10px; margin: 0 10px 10px 0; background: url(images/green-gradient.png) bottom repeat-x #fff; list-style: none; position: relative;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
#ajax-post-list .label {display: block; width: 150px; height: 32px; padding: 0 10px 0 10px; line-height: 32px; background: #333;); position: absolute; bottom: -32px; color: #fff; font-size: 12px; font-weight: bold;}
#ajax-post-list .label em {display: block; position: absolute; right: 10px; line-height: normal; top: 10px; font-weight: normal;}

#post-container {width: 604px; border: solid 1px #dfdfdf; padding: 20px; background: #fff; float: left; margin-right: 15px;
	-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}
#post-container h1 {margin-top: 0;}
#post-container .post {margin-bottom: 20px;}
#post-container .post-title {font-size: 22px; color: #333;}
#post-container .post-title a {color: #333;}
#post-container .postmeta p {color: #999; padding-bottom: 20px; border-bottom: 1px solid #eee;}
#post-container p {font-size: 13px; line-height: 17px; color: #333;}

#sidebar {float: left; width: 310px;}
#sidebar ul {list-style: none;}
#sidebar h2 {margin-top: 0;}

#sidebar-videos {overflow: hidden;}
#sidebar-videos ul {margin: 0px; padding: 0px;}
#sidebar-videos li {width: 89px; height: 89px; overflow: hidden; margin-right: 10px; float: left; position: relative;}
#sidebar-videos li:last-child {margin-right: 0;}
#sidebar-videos li img {width: 89px; height: 89px; position: relative; z-index: 10;}
#sidebar-videos li .title {position: absolute; left: 0; top: 89px; width: 75px; height: 75px; background: #333; color: #fff; padding: 7px; z-index: 20; line-height: 16px;}

#sidebar-success {overflow: hidden;}
#sidebar-success ul {margin: 0px; padding: 0px;}
#sidebar-success li {width: 89px; height: 89px; overflow: hidden; margin-right: 10px; float: left; position: relative;}
#sidebar-success li:last-child {margin-right: 0;}
#sidebar-success li img {width: 89px; height: 89px;}
#sidebar-success li span {position: absolute; top: 89px;}

#sidebar .module {padding: 10px; background: #fff; margin-bottom: 15px; border-bottom: solid 1px #ddd;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
	
#top-content {width:600px; padding: 20px; margin: 0 auto; background: #fff; border: solid 1px #dfdfdf; margin-bottom: 10px; overflow: hidden;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
#top-content.loading {background: url(images/ajax-loader.gif) #fff no-repeat center;}
#video-content {overflow: hidden;}
#video-content h2 {margin-top: 0;}
#video-post-list {background: url(images/green-gradient.png); padding: 20px; position: relative; overflow: hidden; width: 888px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin: 0 auto 10px auto;
	-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);}
#video-post-list ul {margin: 0; padding: 0; overflow: auto; float: left; position: relative; width: 888px;}
#video-post-list li {display: block; float: left; width: 140px; height: 150px; overflow: hidden; position: relative; margin: 0 8px 0 0;}
#video-post-list li:last-child {margin: 0;}
#video-post-list li a {display: block; width: 140px;}
#video-post-list li a.active {width: 130px; height: 140px; overflow: hidden; border: solid 5px #f8e69e;}
#video-post-list li a:hover {width: 130px; height: 140px; overflow: hidden; border: solid 5px #999;}
#video-post-list li a.active img, #video-post-list li a:hover img {position: relative; top: -5px; left: -5px;}
#video-post-list .label {display: block; width: 120px; height: 32px; padding: 0 10px 0 10px; line-height: 32px; background: #333;); position: absolute; bottom: -32px; color: #fff; font-size: 12px; font-weight: bold;}
#video-post-list .label em {display: block; position: absolute; right: 10px; line-height: normal; top: 10px; font-weight: normal;}
#video-post-list .see-more {position: absolute; right: 20px; bottom: 10px;}
#video-cycle {overflow: hidden; height: 150px;}

.video-list-controls {width: 888px; margin: 0 auto 10px auto; overflow: hidden;}
.video-list-controls a {display: block; font-size: 24px; color: #666; font-weight: bold;}
.prevThing {float:left;}
.nextThing {float: right;}