/* layout styles: boxes and more boxes */

body {
background: #ffffff url(/images/top-orange-bg.jpg) repeat-x;
margin: 0px;
padding: 0px;
text-align: center;
color: #334953;
}

.clearBoth {
clear: both;
}

div#wrapper {
background-color: transparent;
margin: 0px auto;
position: relative;
width: 852px;
}

#topWhiteBorder {
background: #ffffff url(/images/top-white-bar.jpg) repeat-x;
width: 852px ;
height: 7px;
margin: 0px auto;
padding: 0px;
/* freaking ie 6 hack for empty div. ie6 gives empty divs a height equal to the height of text "if it were there". Geesh! So we give 
and explicit text height of 0 to override this ie crap. Sum-un-a-beetch */
font-size: 0px;
}


/* TOP NAVIGATION */
ul#topNav {
margin: 0px auto;
padding: 0px;
background-color: ;
width: 852px;
height: 49px;
text-align: left;
background-color: transparent;
position: relative;
}

ul#topNav li {
list-style-type: none;
margin: 0px;
padding: 0px 2px 0px 0px;
background-color: transparent;
display: block;
float: left;
}
ul#topNav li.lastMenuItem {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: transparent;
display: block;
float: left;
}

ul#topNav li a#home, ul#topNav li a#home:visited {
display: block;
background: transparent url(/images/home-out.jpg) no-repeat;
height: 49px;
padding: 0px;
width: 76px;
text-align: center;
text-decoration: none;
font: 13px "Trebuchet MS" Arial, sans-serif;
color: #fff;
text-transform: uppercase;
}
ul#topNav li a#home:hover, ul#topNav li a#home_on {
display: block;
background: transparent url(/images/home-on.jpg) no-repeat;
height: 49px;
padding: 0px;
width: 76px;
text-align: center;
text-decoration: none;
font: 13px "Trebuchet MS" Arial, sans-serif;
color: #fff;
text-transform: uppercase;
}


ul#topNav li a#why-rss, ul#topNav li a#why-rss:visited  {
display: block;
background: transparent url(/images/why-rss-out.jpg) no-repeat;
height: 49px;
padding: 0px;
width: 97px;
text-align: center;
text-decoration: none;
font: 13px "Trebuchet MS" Arial, sans-serif;
color: #fff;
text-transform: uppercase;
}
ul#topNav li a#why-rss:hover, ul#topNav li a#why-rss_on  {
display: block;
background: transparent url(/images/why-rss-over.jpg) no-repeat;
height: 49px;
padding: 0px;
width: 97px;
text-align: center;
text-decoration: none;
font: 13px "Trebuchet MS" Arial, sans-serif;
color: #fff;
text-transform: uppercase;
}

ul#topNav li a#hair-loss-article-feeds, ul#topNav li a#hair-loss-article-feeds:visited {
display: block;
background: transparent url(/images/hair-loss-article-feeds-out.jpg) no-repeat;
height: 49px;
padding: 0px;
width: 201px;
text-align: center;
text-decoration: none;
font: 13px "Trebuchet MS" Arial, sans-serif;
color: #fff;
text-transform: uppercase;
}
ul#topNav li a#hair-loss-article-feeds:hover, ul#topNav li a#hair-loss-article-feeds_on {
display: block;
background: transparent url(/images/hair-loss-article-feeds-over.jpg) no-repeat;
height: 49px;
padding: 0px;
width: 201px;
text-align: center;
text-decoration: none;
font: 13px "Trebuchet MS" Arial, sans-serif;
color: #fff;
text-transform: uppercase;
}


ul#topNav li a#hair-transplant-video-feeds, ul#topNav li a#hair-transplant-video-feeds:visited {
display: block;
background: transparent url(/images/hair-transplant-video-feeds-out.jpg) no-repeat;
height: 49px;
padding: 0px;
width: 230px;
text-align: center;
text-decoration: none;
font: 13px "Trebuchet MS" Arial, sans-serif;
color: #fff;
text-transform: uppercase;
}
ul#topNav li a#hair-transplant-video-feeds:hover, ul#topNav li a#hair-transplant-video-feeds_on {
display: block;
background: transparent url(/images/hair-transplant-video-feeds-over.jpg) no-repeat;
height: 49px;
padding: 0px;
width: 230px;
text-align: center;
text-decoration: none;
font: 13px "Trebuchet MS" Arial, sans-serif;
color: #fff;
text-transform: uppercase;
}

ul#topNav li a#hair-transplant-photo-feeds, ul#topNav li a#hair-transplant-photo-feeds:visited {
display: block;
background: transparent url(/images/hair-transplant-photo-feeds-out.jpg) no-repeat;
height: 49px;
padding: 0px;
width: 240px;
text-align: center;
text-decoration: none;
font: 13px "Trebuchet MS" Arial, sans-serif;
color: #fff;
text-transform: uppercase;
}
ul#topNav li a#hair-transplant-photo-feeds:hover, ul#topNav li a#hair-transplant-photo-feeds_on {
display: block;
background: transparent url(/images/hair-transplant-photo-feeds-over.jpg) no-repeat;
height: 49px;
padding: 0px;
width: 240px;
text-align: center;
text-decoration: none;
font: 13px "Trebuchet MS" Arial, sans-serif;
color: #fff;
text-transform: uppercase;
}

ul#topNav li span.menuLinkTopMargin {
display: block;
position: relative;
top: 10px;
background-color: transparent;
}

div#logoTagLine {
background: transparent url(/images/logo.jpg) no-repeat;
margin-left: auto;
margin-right: auto;
height: 81px;
width: 852px;
margin-top: 11px;
position: relative;
}

div#logoTagLine h1, div#logoTagLine h2 {
margin: 0px;
padding: 0px;
position: absolute;
top: 23px;
left: 148px;
font: bold 22px "Times New Roman", Georgia, serif;
color: #fff;
text-transform: uppercase;
background-color: transparent;
}

div#logoTagLine h1 a , div#logoTagLine h2 a, div#logoTagLine h2 a:visited, div#logoTagLine h2 a:hover {
text-decoration: none;
color: #fff;
}



div#logoTagLine h1 span, div#logoTagLine h2 span {
color: #f7b873;
background-color: transparent;
}

div#logoTagLine p#tagline{
margin: 0px;
padding: 0px;
color: #fff;
background-color: transparent;
font: bold normal 14px Verdana, sans-serif;
position: absolute;
top: 26px;
left: 450px;
}


div#contentTopBox {
background: #fff url(/images/page-header-bg.jpg) no-repeat;
margin-left: auto;
margin-right: auto;
height: 96px;
position: relative;
}

div#contentTopBox h1 {
color: #006497;
background-color: #fff;
margin: 0px;
padding: 0px;
font: normal 18px "Trebuchet MS", Verdana, sans-serif;
position: absolute;
top: 80px;
left: 40px;
}


#contentBoxWrapper, .fadeBox {
background: #fff url(/images/content-wrapper-bg.jpg) no-repeat;
width: 852px;
margin: 0px auto;
margin-bottom: 100px;
}

#footer {
background-color: #fff;
text-align: center;
width: 852px;
margin: 0px auto;
padding-top: 100px;
margin-bottom: 30px;
font: 11px Arial,Verdana,sans-serif;
color: #999;
}
#footer a, #footer a:visited {
color: #999;
text-align: center;
width: 852px;
margin: 0px auto;
}

#footer a:hover {
color: #336699;
text-align: center;
width: 852px;
margin: 0px auto;
}



#left {
background: #fff url(/images/blue-fade-content-top.jpg) no-repeat;
width: 503px;
position: relative;
left: 37px;
top: 20px;
float: left;
text-align: left;
}

#left .featureBox {
width: 400px;
height: 200px;
background-color: #fff;
border: 1px solid #bce9ff;
}

.leftMargin {
background-color: transparent;
margin: 30px 0px 0px 30px;
font: 12px Arial, sans-serif;
line-height: 180%;
width: 440px;
}

.leftFeatureMargin {
background-color: transparent;
margin: 30px 0px 0px 0px;
font: 12px Arial, sans-serif;
line-height: 180%;
}

.leftMargin h2 {
color: #006497;
background-color: #fff;
font: normal 18px "Trebuchet MS", Verdana, sans-serif;
}

/* rss formatting. this formats the hassonandwong.com/video-feed.xml*/
#left .blogItem {
background-color: transparent;
margin: 10px 0px 15px 0px;
padding-bottom: 10px;
width: 100%;
}

/* normal links */
#left a {
background-color: #fff;
color: #006290;
font-weight: normal
}
#left a:visited {
background-color: #fff;
color: #333;
font-weight: normal
}
#left a:hover {
background-color: #fff;
color: #ff9933;
font-weight: normal
}


/* links within feeds */
#left .blogItem a {
display: inline-block;
padding-bottom: 6px;
margin: 4px 0px 0px 0px;
float: left;
color: #006290;
font-weight: normal;
}
#left .blogItem a:visited {
display: inline-block;
padding-bottom: 6px;
margin: 4px 0px 0px 0px;
float: left;
color: #333;
}
#left .blogItem a:hover {
display: inline-block;
padding-bottom: 6px;
margin: 4px 0px 0px 0px;
float: left;
color: #ff9933;
text-decoration: none;
}




/* remove br from rss */
#left .blogItem p {
float: left;
width: 270px;
margin: 0px 0px 0px 10px;
}
/* end left column rss formatting */


#left a.subscribe, #left a.subscribe:visited {
width: 130px;
display: inline-block;
height: 20px;
padding: 0px 0px 2px 6px;
color: #bf7a31;
}
#left a.subscribe:hover {
width: 130px;
display: inline-block;
height: 20px;
padding: 0px 0px 2px 6px;
color: #4797ff;
}
#left .blogItem p a.normal {
display: none;
}

#wrapper .bottomFeatureBox {
background: #fff url(/images/bottom-featured-box.jpg) no-repeat;
margin: 0px auto;
width: 776px;
clear: both;
text-align: left;
position: relative;
}

#wrapper .bottomFeatureBox h2.featured {
color: #006497;
background-color: #fff;
margin: 0px 0px 15px 0px;
padding: 0px;
font: normal 18px "Trebuchet MS", Verdana, sans-serif;
position: relative;
left: 78px;
top: 11px;
text-align: center;
width: 220px;
}

#wrapper .bottomFeatureBox .featureMargin {
position: relative;
top: 30px;
left: 40px;
width: 690px;
}
#wrapper .bottomFeatureBox p  {
padding-right: 15px;
}
#wrapper .bottomFeatureBox p img.featureThumb {
width: 274px;
float: left;
padding-right: 20px;
}

#wrapper .bottomFeatureBox ul {
background-color: transparent;
position: relative;
left: 30px;
}

#wrapper .bottomFeatureBox a {
background-color: #fff;
color: #006290;
font-weight: normal
}
#wrapper .bottomFeatureBox a:visited {
background-color: #fff;
color: #333;
font-weight: normal
}
#wrapper .bottomFeatureBox a:hover {
background-color: #fff;
color: #ff9933;
font-weight: normal
}

#right {
width: 242px;
background-color: #fff;
margin: 0px;
padding: 0px;
float: left;
position: relative;
left: 66px;
top: 20px;
}
#right h2 {
background-color: #2ba8d2;
font: bold 15px "Trebuchet MS" Arial, Verdana, sans-serif;
color: #fff;
width: 228px;
height: 24px;
text-transform: uppercase;
float: left;
text-align: left;
padding: 2px 0px 0px 14px;
margin: 0px 0px 2px 0px;
}


#right ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
float: left;
}

#right ul li
{
display: inline-block;
background-image: url(/images/right-nav-bullet.jpg);
background-repeat: no-repeat;
background-position: 8px 6px;
border-bottom: 1px dashed #c9c9c9;
text-align: left;
padding: 6px 0px 9px 28px;
color: #333;
font: 11px Verdana, sans-serif;
width: 212px;
}
#right ul li.last
{
border: none;
}


#right ul li a, #right ul li a:visited
{
display: block;
background-color: #fff;
color: #006699;
text-decoration: none;
}

#right ul li a:hover
{
display: block;
background-color: #fff;
color: #2ba7cf;
text-decoration: underline;
}