/*
---------------------------------------
URI:		    http://www.Fashion18.com/
Version:	    1.0
Description:	Styles for www.Fashion18.com, a St. Joseph Communications property
Author:		    St Joseph Media
Author URI:	    http://www.stjoseph.com
-----------------------------------------*/

/*LAYOUT
----------------------------------------*/

* {padding: 0;margin: 0;}

#universal {margin: 4px auto; width: 800px; background-color: #fff; background-image: url('../global/bg_body.gif'); background-repeat: repeat-y; background-position: 638px; border-left: 1px solid #ed106d;}

#fashion #universal, #beauty #universal, #trends #universal, #shopping #universal, #fun #universal {border-left: none;}

/*workaround provides left column that extends to bottom of right rail; bg image is in [flavour].css*/
#universal-B {height: 100%; background-position: bottom left; background-repeat: no-repeat;}
#fashion #universal-B {background-image: url('../global/lr_fa-b.gif');}
#beauty #universal-B {background-image: url('../global/lr_be-b.gif');}
#trends #universal-B {background-image: url('../global/lr_tr-b.gif');}
#shopping #universal-B {background-image: url('../global/lr_sh-b.gif');}
#fun #universal-B {background-image: url('../global/lr_fu-b.gif');}

#column {float: left;}

#header {width: 100%; text-align: center; padding: 7px 0 5px 0; background: #c80d54 url('../global/bg_header.gif');}
#fashion #logowrapper, #beauty #logowrapper, #trends #logowrapper, #shopping #logowrapper, #fun #logowrapper {border-left: 1px solid #ed106d;}
#main-nav {width: 634px; text-align: center; height: 26px;}
#optional {width: 456px; float: none; text-align: center; margin-top: 4px; clear: both;}
#footer {height: 50px; text-align: center; clear: both; background: #be034a url('../global/stjosephmedia.gif') no-repeat 2% 50%;}


/*
TYPOGRAPHY
----------------------------------------*/
p, li {font: 11px/14px Verdana, Arial, Helvetica, sans-serif; color: #333333; margin: 8px 0;}
a:active, a:link, a:visited {text-decoration: underline;}
a:hover {text-decoration: underline; color: #ff0066;}
a img {text-decoration: none; border: none;}
img {border: none;}
h1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;}
h2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333;}
h3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;}
.input {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #666666; font-weight: normal;}
.searchForm {display: inline;}
hr {color: #666666; background-color: #666666; text-align: left;}
.strong {font-weight: bold;}


/*
Utiliy menu
----------------------------------------*/
#utility {width: 630px; height: 54px; border: 1px solid white;}
#utility ul {margin-top: 6px; padding-top: 8px; white-space: nowrap; text-align: justify;}
#utility li {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #d8185e; display: inline; margin: 0 0 0 18px; padding: 0 0 0 6px;}
#utility a {color: #d8185e; text-decoration: none;}
#utility a:hover {border-bottom: solid 1px #d8185e;}
#utility img {float: left; padding: 7px 0 0 4px;}
#utility input.button {position: relative; top: 6px;}
#utility form {display: inline; margin: 0 0 0 10px; text-decoration: none;}
#utility form img {float: none; display: inline; padding: 0; margin: 0; position: relative; top: 5px; left: 5px;}
#utility form a:hover {border: none;}

/*
Main nav
----------------------------------------*/

#main-nav ul {background-color: #ed106d; float: left; width: 100%;}
#main-nav ul li {display: inline;}
#main-nav ul li a {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-transform: uppercase; font-weight: bold; padding: 0.5em 1.25em; text-decoration: none; float: left; border-left: 1px solid #fff; color: #fff;}
#main-nav ul li a.first {border-left: none;}
#home #nav-home a, #nav-home a:hover, #win #nav-win a, #nav-win a:hover, #chat #nav-chat a, #nav-chat a:hover {background-color: #E0717E;}
#fashion #nav-fashion a, #nav-fashion a:hover {background-color: #68318e;}
#beauty #nav-beauty a, #nav-beauty a:hover {background-color: #ca0088;}
#trends #nav-trends a, #nav-trends a:hover {background-color: #30afd0;}
#shopping #nav-shopping a, #nav-shopping a:hover {background-color: #93aa15;}
#fun #nav-fun a, #nav-fun a:hover {background-color: #fd8228;}

/*
Rail
----------------------------------------*/

#right-rail {float: right; text-align: center; width: 162px;}
#rail-button {background-color: #ed106d; text-align: center; /*position: absolute; left: 645px;*/ position: relative; width: 100%;}
#rail-button ul {width: 155px; padding: 0 0 2px 0; margin: 0 0 0 2px;}
#rail-button li {list-style-type: none; white-space: nowrap; text-align: left; padding-left: 2px; margin: 0 0 4px 0; background: #F25095 url('../global/sub_arrow.gif') no-repeat 97% 49%;}
#rail-button a {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FBCBDF; font-size: 10px; word-spacing: .2em; text-transform: uppercase; font-weight: bold; text-decoration: none;}
#rail-button a:hover {color: #ffffff;}
#skyscraper {margin-top: 4px;}

/*
Footer
----------------------------------------*/

#footer ul {margin-top: 10px;}

#footer li {font-family: Verdana, Arial, Helvetica, sans-serif; color: #ffffff; font-size: 10px; display: inline; white-space: nowrap; padding: 0 10px 0 8px; border-left: 1px solid white;}
#footer ul li.first {border-left: none;}
#footer a {color: #ffffff; text-decoration: none; font-weight: bold;}
#footer a:hover {border-bottom: 1px solid white;}
#footer p {font-family: Verdana, Arial, Helvetica, sans-serif; color: #ffffff; font-size: 10px; margin-top: 10px;}
#footer img {float: left; padding: 7px 0 0 15px;}
#footer select {float: right; position: relative; top: -30px; right: 10px;}

/*GLOBAL - used in several templates
---------------------------------------*/

#default-container {margin: 15px; padding-top: 15px; clear: both; width: 600px;}
#boxad {text-align: center; clear: both;}
#home boxad, #inside-container #boxad {margin-top: 4px;}
#article-container #boxad, #slideshow-container #boxad {margin-top: 15px;}
#inside-container {width: 634px; margin: 4px 0; float: left;}
#sub {float: left; width: 462px; margin-bottom: 2px; padding: 3px 0;}
.subheading {text-transform: uppercase; float: left; font-weight: bold; margin: 0 3px;}
.morefeatures {text-align: right; font-weight: bold; margin: 3px 0;}

/*featurepoll
---------------------------------------*/

#featurepoll {width: 290px; margin: 4px -3px 4px 4px; padding-bottom: 12px; float: left;}
#featurepoll p {padding: 8px 16px; color: #ffffff; font-weight: bold; margin-top: 0px;}
#featurepoll p.error {color: #FF0000; font-weight: bold; background: none;}
#featurepoll ul {margin: 15px 0 10px 15px;}
#featurepoll li {font: 10px Verdana, Arial, Helvetica, Sans-Serif; list-style-type: none;}
#featurepoll img.button-first {margin: 0 10px 0px 20px;}
#featurepoll img.button-second {margin: 0 10px 0px 15px;}
#featurepoll input {margin-right: 5px;}

/*article options
-------------------------------------------*/

ul.articleoptions {margin: 10px 0 20px 0; text-align: left; clear: both;}
.articleoptions a {text-decoration: none; color: #333333;}
.articleoptions a:hover {border-bottom: 1px solid;}
#article-container li {margin-top: 10px; margin-left: 30px; color: #666666;}
.articleoptions li {display: inline; padding: 10px 25px 10px 25px; margin: 0 4px 0 4px; font-weight: bold;}
#byline-photo {clear: both;}
#byline-photo p {margin: 0px 4px; font-style: oblique;}

/* archives and dailypicks nav
---------------------------------------------*/
p.archive-menu {float: right; margin: 0 6px; text-transform: uppercase; font-size: 10px; font-weight: bold;}
ul#archive-pagination {margin: 20px 0; clear: both; text-align: center;}
#archive-pagination li {display: inline; font-weight: bold;}
#archive-pagination li {margin: 10px;}
#archive-pagination li img {margin-bottom: -4px; border: none;}
#archive-pagination li a {text-decoration: underline;}
#archive-pagination li a.current {text-decoration: none; font-weight: normal;}
#archive-pagination a {text-decoration: none; color: #333333;}

p.error {font-weight: bold; color: #FF0000;}
p.divider {border-top: 1px dotted #e786c9; padding-top: 8px; font-weight: bold;}

/* quiz
---------------------------------------------*/
#quiz {width: 460px; height: 100%; float: left; margin-left: 4px;}
#quiz-question {padding: 10px; width: 440px; float: right;}
#quiz-question input {margin-right: 10px; float: left;}
#quiz-question #question-submit {text-align: right; margin-top: 10px; padding: 0 5px;}
#quiz-question #question-submit input {float: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;}
#quiz-question p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; font-weight: bold;}
#quiz-question label {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; display: block; width: 400px; float: left; clear: right; margin: 0 0 10px 0}
#quiz-results {margin: 10px 0}
#quiz-results p {color: #333333}
p#start-text {text-align: center; clear: both;}
p#start-text a {color: #ff0066;}
#quiz-footer {text-align: center; clear: both}