/*********************************************************************************************
This is the main stylesheet. These are the styles are for the website content that is editable 
by the client. These styles appear in the WYSIWYG editor.
*********************************************************************************************/

BODY {background: #ffffff url(/images/pete/sky_bg.jpg) top left repeat-x; font-size:12px;  font-family: Verdana, Arial, sans-serif; font-style: normal; text-align: center; color: #4b4b4b; margin-top:0}

/* TinyMCE specific rules */
body.mceContentBody {position: relative; width:750px; background: #114064; background-image: none; text-align: left; color: #ffffff;}

a {text-decoration: underline;outline: none}
a:link {color: #ffffff;	background: transparent; text-decoration: underline;outline: none}
a:visited {color: #ffffff; background: transparent; text-decoration: underline;outline: none}
a:hover {color: #00adef; background: transparent; text-decoration: underline;outline: none}

h1 {font-size: 16px; color: #ff690a}
h2 {font-size: 14px; color: #00adef}
h3 {font-size: 13px; color: #ffffff}
h4 {font-size: 12px; color: #ffffff}

a img { border:0;}

td {font-size:12px;  font-family: Verdana, Arial, sans-serif;text-align:left;vertical-align:top;}

.error {color: red}
.small {font-size: 10px ! important;}

.center {text-align: center; padding:0; margin:0;}
.right {text-align:right;}

.floatRight {float:right; padding: 0 15px;}
.floatLeft {float:left; padding: 0 15px;}


.clear {clear: both; height:1px; overflow: hidden; margin:0; padding:0;}
.clearLeft {clear: left; height:1px; overflow: hidden; margin:0; padding:0;}
.clearRight {clear: right; height:1px; overflow: hidden; margin:0; padding:0;}

.pageContent {position: relative; width:720px; padding: 0 15px 0 15px; color: #ffffff;}
.pageContent p {margin: 15px 0px;}


/*HOME PAGE*/
.homeContent {position: relative; width: 750px; margin:0; color: #4b4b4b;}
.homeWelcome {position: absolute; top: 0; left:10px; width:481px;}
.homePeteSnow {margin-left: 171px;}
.homeLeft{float:left; width:310px; padding-top: 140px;}
.homeRight{float:right; width: 300px; text-align: center;}
.homeBlog {width:300px;	}
.homeUpcomingAppearances {width:310px; text-align: center; margin-bottom: 20px; color:#ffffff;}
.homeUpcomingAppearances img {margin-bottom: 8px;}
.homeUpcomingAppearances td {border-bottom: 1px dotted #ffffff;}
.homeLatestNews {width:306px;}

.homeLatestNewsBox {width:306px; background: #ffffff url(/media/pete/news_pete.jpg) top left no-repeat;}
.homeBoxbl {background: url(/media/pete/roundedcornr_599440_bl.gif) 0 100% no-repeat;} 
.homeBoxbr {background: url(/media/pete/roundedcornr_599440_br.gif) 100% 100% no-repeat} 
.homeBoxtl {background: url(/media/pete/roundedcornr_599440_tl.gif) 0 0 no-repeat} 
.homeBoxtr {position: relative; min-height: 157px; background: url(/media/pete/roundedcornr_599440_tr.gif) 100% 0 no-repeat; padding:12px 10px 10px 12px;text-align: left;} 
.homeBoxtr ul {margin-top: 15px; margin-bottom: 5px;margin-left: 15px;padding-left: 0px;}
* html .homeBoxtr {height: 157px;}
* html .homeBoxtr ul {margin-left: 20px;  padding-left: 0px;}
.homeBoxtr ul li a, .homeBoxtr ul li a:visited {line-height: 21px; font-size: 11px; color: #4b4b4b;text-decoration: none;margin:0 0 0 200px; font-weight: normal;}
.homeBoxtr ul li a:hover {text-decoration: underline;}
.homeBoxtr ul li {font-weight: bold;}
.flakeTop {margin:-23px 0 0 15px;}
.flakeBottom {margin-left:15px;}

.homeBlogBox {width:300px; background: #ffffff url(/media/pete/roundedcornr_392051_grad.gif) repeat-x top left; margin-top: 20px;}
.homeBlogPhoto {position:absolute; top: 12px; right: 10px; width:102px;}
.homeBlogDate {font-size: 11px; margin: 0px; line-height: 20px; width:175px;}
.homeBlogTagline {font-size: 12px; font-weight: bold; margin: 0px;line-height: 20px; width:175px;}
.homeBlogContent {margin: 5px 0 5px 0; width:175px;}
.homeBlogMore {text-align: right; margin:0; line-height: 20px; width:175px;}
.homeBlogMore a, .homeBlogMore a:visited {font-size: 11px; color: #4b4b4b;text-decoration: none; font-weight: normal;}
.homeBlogMore a:hover {text-decoration: underline;}
.homeRight img {margin-top: 20px;}
.homeRight div img {margin-top: 0px;}

.homeCenter {position: absolute; width: 207px; top: 140px; left: 285px;}
.homePeteGallery1 {margin: 7px 0 0 45px;}
.homePeteGallery2 {margin: 7px 0 0 25px;}
.homePeteGallery3 {margin: 7px 0 0 50px;}
.homePeteGalleryLink {margin: 7px 0 0 50px;}

.homeReaderLink {position: absolute; top: 86px; left: 7px;width: 200px; font-size: 11px; margin: 0;}
.homeReaderLink a, .homeReaderLink a:link, .homeReaderLink a:visited {text-decoration: none;color: #4b4b4b;}
.homeReaderLink a:hover {text-decoration: underline;}

/*STORY OF PETE*/
.storyContent {position: relative; width: 650px; padding:0 50px 0 50px; color: #ffffff; font-size: 14px;}
.storyNav {text-align: center; font-size: 18px; color: #00adef;} 
.storyNav a, .storyNav a:link, .storyNav a:visited {color: #ffffff; text-decoration: none;}
.storyNav a:hover {color: #00adef; text-decoration: none;}
.storyNav img {vertical-align:middle;}

.firstPara:first-letter {font-size:24px;}
.storyPeteBlow{position:absolute; top:121px; right: 48px; width:213px;}
.storyEnd {width: 410px; margin-bottom: 35px;}


/*ACTIVITY PAGE*/
.activityLeft {float:left; width: 438px; text-align:center;}
.activityLeft div {float: left; width:199px; margin-right: 20px; font-size: 18px; font-family: Arial, Verdana, sans-serif;}
/*.activityLeft img, .activityRight img {margin: 0;}*/
/*.activityLeft div a img, .activityRight div a img {margin: 0 0 5px 20px;}*/
.activityLeft div a, .activityLeft div a:link, .activityLeft div a:visited, .activityLeft div a:hover, .activityRight div a, .activityRight div a:link, .activityRight div a:visited, .activityRight div a:hover  {text-decoration: none;}
.activityRight {float: right; text-align: center; width: 438px;}
.activityRight div {float: right; width:199px; margin-left: 20px; font-size: 18px; font-family: Arial, Verdana, sans-serif;}

.activityFlakesTR {position: absolute; top: 150px; right: 40px;}
.activityFlakesTL {position: absolute; top: 370px; left: 40px;}
.activityFlakesBR {position: absolute; top: 550px; right: 40px;}