* {
	margin: 0;
}
html, body {
	/* height: 100%; */
}
 
/**************************************\
|------------COLOR SCHEME--------------|
|--------------------------------------|

\**************************************/
body {
background: white;
color: #444444;
margin: 0;
}
h1 {
color: #7ec7da;
}

h2 {
color: #464646;
}

.subHeading {
font-size: 1.4em;
color: #ff4100;
}

.arancia{
color: #ff4100;
}

.logo {
color: #990000;
}





/**************************************/
/*              GLOBALS               */
/**************************************/
#article h2 {
text-align: left;
line-height: 1.4em;
}
#article p{
text-align: justify;
}
#article ul, ol {
margin: 1em 2em;
padding: 5px;
clear: both;
}

#article li {
list-style-position: outside;
}

.thmbs {
width: 60px;
height: 60px;
}

.blurbthmb {
width: 148px;
height: 135px;
border: solid 1px silver;
margin-top: 8px;
}
.blurbType {
margin: 8px 0 32px 0;
font-size: 0.92em;
line-height: 125%;
}
.quickPicks {
width: 190px;
max-width: 190px;
height: 350px;
overflow: hidden;
margin: 12px 0;
background: url(../images/dots.gif) bottom repeat-x;
}


.quickPicks p {
padding: 15px 0 7px 0;
line-height: 125%;
}

.quickPickthmb {
border: solid 1px silver;
margin-top: 5px;
}
.articlethmb {
margin: 1.23em 0 .615em;
}

.articlepic {
float: left;
width: 190px;
margin: 0 15px 5px 0;
vertical-align: text-top; 
}

.signoff {
float: right;
width: 16px;
vertical-align: text-top;
}
.highpic {
float: left;
width: 190px;
margin: 0 0 7px 0;
vertical-align: text-top; 
}

.highbox {
float: left;
width: 109px;
margin: 0 0 7px 0;
border-left: 3px solid white;
}

.featureHeader {
font-size: 1.2em;
margin: 0 0 .67em;
font-weight: bold;
}

.borderbttm {
background: url(../images/dots.gif) bottom repeat-x;
/*border-bottom: 1px dotted #949494;*/
margin-bottom: 7px;
}
.bordertop {
border-top: 1px dotted #949494;
margin-top: 18px;
}
.articlePost {
background: url(../images/dots.gif) bottom repeat-x;
margin: 15px 0;
padding: 10px 0;
}
#comments  {
clear: both;
background: url(../images/dots.gif) top repeat-x;
margin: 10px 0;
padding: 10px 0;
}
/*FB form*/
element.style  {
overflow:hidden;
}
.wallkit_form textarea {
display:inline;
height:44px;
margin-top:5px;
overflow:hidden;
padding:3px;
width:85%;
}
/***/
#bookmarks img {
width: 20px;
height: 20px;
margin: 0 4px;
}

.middleCol {
margin-top: 20px;
}

/**************************************/
/*              HEADER                */
/**************************************/



#header {
width: 100%;
height: 139px;
margin: 0 0 50px 0;
background: #283246;
border-bottom: 10px solid #dce4e4;
position: relative;
}

#logo {
position: absolute;
top:20px;
left: -30px;
width: 236px;
height: 80px;
z-index: 99999;
}

#burst {
position: absolute;
top: 50px;
left: 487px;
width: 80px;
height: 77px;
z-index: 9999;
}

#smallIcons {
position: absolute;
left: 580px;
top: 121px;
width: 80px;
z-index: 999999;
}

#smallIcons img {
padding: 0 2px;
}


#formDiv {
position: absolute;
top: 85px;
left: 710px;
width: 250px;
font-size: 1em;
color: white;
font-weight: bold;
}
#formDiv a {
color: white;
font-size: 1em;
font-weight: bold;
}
#formDiv a:link {
color: white;
font-size: 1em;
font-weight: bold;
}

#formDiv a:visited {
color: white;
}

#formDiv a:hover {
color: #e4000f;
text-decoration: underline;
}


#formDiv form input.text {
	border: 1px solid #000;
	width: 150px;
	padding: 2px;
	color: #333;
}


#formDiv form label {
	font-size: 0.95em;
	text-transform: uppercase;
	padding-bottom: 1px;
}


#formDiv form a {
	display: block;
	color: #bafffc;
	text-decoration: none;
	margin-top: 4px;
}


#formDiv .buttons {
margin: 15px 70px;
}

.slyForms input, textarea {
padding: 4px 2px;
font-size:12px;
border: solid #eee;  
}


.slyForms select {
padding: 4px;
font-size:0.96em;
width: 190px;
border: 1px solid black;
background:#a9a9a9; 
color: white;
}


#loginDiv {
position: absolute;
top: 50px;
left: 687px;
width: 250px;
font-size: 1em;
color: white;
font-weight: bold;
text-align: right;
}
#loginDiv a{
color: white;
font-size: 1em;
font-weight: bold;
}
#loginDiv a:link{
color: white;
font-size: 1em;
font-weight: bold;
}
#loginDiv a:visited{
color: white;
}
#loginDiv a:hover {
color: #e4000f;
text-decoration: underline;
}

/*form buttons*/
#wlpeLoginButton {
 border: none;
 width: 51px;
 height: 13px;
 padding: 0;
 background: url(../images/login.png);
 text-indent: -9999px;
}
#wlpeLoginButton:hover {
 color: red;
}
#wlpeLogoutButton {
 border: none;
 padding: 0.50em;
 background: transparent;
 color: white;
 font-size: 0.92em;
 font-weight: bold;
}
#wlpeLogoutButton:hover {
 color: red;
}
#wlpeRegisterButton {
 border: none;
 width: 59px;
 height: 13px;
 padding: 0;
 background: url(../images/register.png);
 text-indent: -9999px;
}
#wlpeRegisterButton:hover {
 color: red;
}
#wlpeReminderButton {
 border: none;
 width: 119px;
 height: 13px;
 padding: 0;
 background: url(../images/password.png);
 text-indent: -9999px;}
#wlpeReminderButton:hover {
 color: red;
}
#wlpeProfileButton {
 border: none;
 padding: 0.50em;
 background: transparent;
 color: white;
 font-size: 0.92em;
 font-weight: bold;
}
#wlpeProfileButton:hover {
 color: red;
}

#wlpeRegisterCancelButton {
border: none;
 width: 59px;
 height: 13px;
 padding: 0;
 background: url(../images/cancel.png);
 text-indent: -9999px;}

#postCommentButton {
 border: none;
 width: 94px;
 height: 13px;
 padding: 0;
 background: url(../images/post_comment_buttons.gif);
 text-indent: -9999px;
}
#wlpeSaveProfileButton {
 border: none;
 width: 39px;
 height: 13px;
 padding: 0;
 background: url(../images/save_button.gif) no-repeat;
 text-indent: -9999px;
}
#wlpeProfileLogoutButton {
 border: none;
 width: 55px;
 height: 13px;
 padding: 0;
 background: url(../images/logout_button.gif) no-repeat;
 text-indent: -9999px;
}
#wlpeProfileDeleteButton {
 border: none;
 width: 117px;
 height: 13px;
 padding: 0;
 background: url(../images/delete_buttons.gif) no-repeat;
 text-indent: -9999px;
}


#tabDiv {
position:absolute;
left:0px;
top:250px;
width:45px;
height:134px;
text-indent: -9999px;
z-index:1;
overflow: hidden;
background: red url(../images/follow_sly.png) no-repeat;
}

#tabDiv a {
	width:45px;
	height:134px;
	display: block; 
}

/* the overlayed element */
div.overlay {
	
	/* growing background image */
	background-image:url(../images/overlay/white.png);
	
	/* dimensions after the growing animation finishes  */
	width:500px;
	height:440px;		
	
	/* initially overlay is hidden */
	display:none;
	
	/* some padding to layout nested elements nicely  */
	padding:55px;
}
div.overlay img {
	padding: 0;
}

/* default close button positioned on upper right corner */
div.overlay div.close {
	background-image:url(../images/overlay/close.png);
	position:absolute;
	right:5px;
	top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}

div.wrap {
	height:441px;

}

div.wrap fieldset {
padding: 7px;
line-height: 1.8;
}

div.wrap input {
display: inline-block;
line-height: 1.8;
vertical-align: middle;
}

div.wrap fieldset ul {
margin: 0;
padding: 0;
}
div.wrap fieldset li {
list-style: none;
padding: 5px 2px 5px 10px;
margin: 0;
}

/* black */
div.overlay.black {
	background:url(../images/overlay/transparent.png) no-repeat !important;
	color:#fff;
}

/* petrol */
div.overlay.petrol {
	background:url(../images/overlay/petrol.png) no-repeat !important;
	color:#fff;
}

div.black h2, div.petrol h2 {
	color:#ddd;		
}




/**************************************/
/*             NAVIGATION             */
/**************************************/

#navBack {
background: #dce4e4;
float: left;
width: 675px;
height: 46px;
clear: both;
position: relative;
margin: 95px 0 0 15px;
padding: 0; 
}
.tpL{
position: absolute;
top: 0; 
left: 0;
background: url(../images/nav/nav_top_left.png) no-repeat;
width: 17px;
height: 8px;
}
.tpR{
position: absolute;
top: 0; 
right: 0;
background: url(../images/nav/nav_top_right.png) no-repeat;
width: 15px;
height: 8px;
}
#navBar {
 	float: left;
 	clear: both;
 	width: 100%;
 	height: 33px;
 	background: transparent;
 	margin: 12px 0 0 8px; 
 	
}

#navBar ul {
 	margin:0;
 	padding:0;
 	list-style: none;
 	
}

#navBar li {
 	float: left;
 	list-style: none;
 	margin:  0;
 	padding: 0;
}

#navBar  li a {
 	display: block;
 	position: relative;
 	width: 498px;
 	height: 33px;
 	background-position: top;
 	margin: 0 1px; 
 	padding:0;
 	text-indent: -999px;
 	overflow: hidden;
 	}

#navBar  li a:hover {
	background-position: 0 -53px;
	height: 33px;
	overflow: hidden;
	}


li#home a{ background: transparent url(../images/nav/home.png)  no-repeat; width: 71px; }

li#feature a{ background: transparent url(../images/nav/feature.png)  no-repeat; width: 115px;  }

li#quickpicks a{ background: transparent url(../images/nav/quickpicks.png)  no-repeat; width: 114px;  }

li#why a{ background: transparent url(../images/nav/why.png)  no-repeat; width: 94px;  }

li#hi a{ background: transparent url(../images/nav/hi.png)  no-repeat; width: 80px; }
/*Hover States*/

body#home-page li#home a:link, body#home-page li#home a:visited {	
	background-position: 0 -106px;
	height: 54px;
}
body#feature-page li#feature a:link, body#feature-page li#feature a:visited {	
	background-position: 0 -106px;
	height: 54px;
}

body#quickpicks-page li#quickpicks a:link, body#quickpicks-page li#quickpicks a:visited {	
	background-position: 0 -106px;
	height: 54px;
}
body#why-page li#why a:link, body#why-page li#why a:visited {	
	background-position: 0 -106px;
	height: 54px;
}
body#hi-page li#hi a:link, body#hi-page li#hi a:visited {	
	background-position: 0 -106px;
	height: 54px;
}



.links ul {
list-style-type: none;
width: 95%;
margin: 0;
padding: 0;
} 

.links li {
font-size: 0.92em;
background: url(../images/dots.gif) bottom repeat-x;
margin:  7px 0;
padding: 7px 0;
text-align: justify;
text-indent: 0px;
list-style-position: outside;
}

.links li a { 
color: #e4000f;
display: block;
font: bold 1.5em;
line-height: 1.2em;
text-decoration: none;
}

 * html .links li a {  /* make hover effect work in IE */
width: 400px;
}

.links li a:hover {
background: #e3f2f0;
}

.links a .introTxt { 
color: #333;
display: block;
line-height: 125%; 
margin: 5px 0;
}

.links a span {
color: #125F15;
line-height: 150%;
}

.subNav {
margin: 1.08em 0;
}

.subNav li {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
list-style: none;
padding: 1px 0;
}
.subNav  li a {
color: #9199a5;
font-size: 0.88em;
}
.subNav li a:hover {
color: #e4000f;
}
.subNav li a:visited {
color: #9199a5;
}

.subNav li.currently a {
color: #e4000f;
}

#iconSet {
background: url(../images/dots.gif) top repeat-x;
margin: 5px 0;
}

#iconSet img {
vertical-align: middle;
}
#iconSet ul {
margin:5px 7px 0 0;
padding: 5px 0;
background: url(../images/dots.gif) bottom repeat-x;
}
#iconSet li {
list-style: none;
margin: 3px 0;
}
#iconSet li a {
color: #9199a5;
}
#iconSet li a:hover {
color: #e4000f;
}
#iconSet li a:visited {
color: #9199a5;
}
.rateThis{
margin: 9px 0 3px 0;
line-height: 125%;
}

/**************************************/
/*            MAIN CONTENT            */
/**************************************/
#featurebox {
 width: 90%;
 background: #e0e1e3;
 padding: 8px;
 border: 3px solid #5b666c;
}

.featurepic {
float: left;
width: 100px;
height: 100px;
margin: 7px;
vertical-align: middle;
}
.textField {

margin: 2px 0 0 8px;
height: 18px;
color: #7c7c7c;
}

.socialIcons{
width: 317px;
text-align: right;
padding: 5px 0;
margin: 2px 0;
background: url(../images/dots.gif) bottom repeat-x;
}



.splashForm {
margin: 5px 0;
border-bottom: 1px dotted #dbdbdb;
}

.submit
{
background: url(../images/submit.png) no-repeat;
text-indent: -9999px;
width: 71px;
height: 18px;
border: none;;
vertical-align: middle;
}
/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 310px;	
	height:286px;	
	
	
	/* custom decorations */
	padding:5px 0;	
	border:1px solid #ccc;
	background-color:white;				
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
	margin:0 ;
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	
	/* custom decoration */
	width:305px;
	height: 200px;
	padding:0 5px;
	background-color: white;
	margin:0;	
	
}
div.scrollable div.items div p {
font-size: 0.9em;
line-height: 125%;
margin: 3px 7px;
}
/* active item */
div.scrollable div.items div.active {
	border:1px inset #ccc;		
	background-color:white;
}


/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}

.scrollimg {
	border: 1px solid #2b2b2b;
	margin-left: 5px;
}

.scrollnav {
position: absolute;
top: 310px;
left: 0;
width: 310px;
height: 35px;
border-top: 1px solid #ccc;
clear: both;
z-index: 9999;
}
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	position:absolute;
	left:97px;
	top:8px;
	z-index: 999999;
	display:block;
	width:18px;
	height:18px;
	background:url(../images/left.png) no-repeat;
	float:left;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../images/right.png);
	left: 191px;	
}
/* position and dimensions of the navigator */
.navi {
	position: absolute;
	top:9px;
	left: 120px;
	width:200px;
	height:20px;
	z-index: 999999;
}


/* items inside navigator */
.navi a {
	float:left; 
    margin:3px; 
	width:8px;
	height:8px;
	background:url(../images/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}

.ditto_paging {
    border-top: 1px solid #8f8f8f;
    padding: 10px; 
    font-size: 86%;
    color: #8f8f8f;
}
.ditto_page {
border: 1px solid #8f8f8f;
color: #8f8f8f;
}
#ditto_pages .ditto_currentpage {
    border: 1px solid #e4000f;
    padding: 1px 4px 1px; 
    margin: 10px 0;
    background-color:#e4000f; 
    color: #fff;
} 
#ditto_pages .ditto_off {
    border: 1px solid #ccc;
    padding: 1px 4px 1px; 
    margin-right: 1px;
    color: #8f8f8f;
}
#ditto_pages a, #ditto_pages a:link, #ditto_pages a:visited {
    border: 1px solid #ccc; 
    padding: 1px 4px 1px; 
    margin-right: 1px; 
    text-decoration: none !important; 
    color: #8f8f8f;
} 
#ditto_pages a:hover {
    background-color: #e4000f;
    color: white;
}



#lastColumn img {
max-width: 150px;
}


.summaryTxt {
text-align: justify;
font-size: 0.92em;
line-height: 125%;
margin: 0 0 4px 0;
}



/**************************************/
/*               FOOTER               */
/**************************************/

#footer {
	margin: 8px 0;
	background: #e3f2f0;
	font-size: 0.72em;
}
.push{height: 119px;}
#footer a:link { text-decoration: none; font-weight:bold; color: #626262; padding:0 2px; letter-spacing: 0.1em; }
#footer a:visited { text-decoration: none; font-weight:bold; color: #626262; padding:0 2px; letter-spacing: 0.1em;}
#footer a:hover { text-decoration: underline; color: #11b2ef; }
#footer a:active, a:focus { text-decoration: underline; color: #000; }
#footer p {
 	margin: 1em 0;
 	
}

#footNav {
padding: 15px 0;
}
.footLogo {
padding: 14px 8px;
width: 86px;
vertical-align: middle;
}

/**************************************/
/*               Headlines              */
/**************************************/
.headline {
text-indent: -9999px;
height: 39px;
width: 175px;
margin: 0 0 5px 0;
}

.feature {
background: url(../images/headlines/feature.png) no-repeat -5px ;
}
.quickpicks {
background: url(../images/headlines/quickpicks.png) no-repeat -5px;
}
.highlights {
background: url(../images/headlines/highlights.png) no-repeat -4px;
}
.thumbsup {
background: url(../images/headlines/thumbsup.png) no-repeat;
}
.sponsor {
background: url(../images/headlines/sponsor.png) no-repeat -5px;
}

.headlineLrg {
text-indent: -9999px;
height: 39px;
width: 275px;
}

.featureLrg {
background: url(../images/headlines/feature_lrg.png) no-repeat;
}

.reviewsLrg {
background: url(../images/headlines/reviews_lrg.png) no-repeat;
}

.quickpicksLrg {
background: url(../images/headlines/quickpicks_lrg.png) no-repeat;
}

.loginHL {
background: url(../images/headlines/login_hl.png) no-repeat;
}

.registerHL {
background: url(../images/headlines/register_hl.png) no-repeat;
}

.followHL {
background: url(../images/headlines/follow_hl.png) no-repeat;
}
.sayHi {
background: url(../images/headlines/say_hi.png) no-repeat;
}

.whySly {
background: url(../images/headlines/why_sly.png) no-repeat;
}

.nowrap {
text-align: left;
}

#ajaxSearch_form {
color: #444;
width: auto;
}
#ajaxSearch_input {
width: auto;
display: inline;
height: 18px;
border: 1px solid #ddd;
border-left-color: #c3c3c3;
border-top-color: #7c7c7c;
background: #fff;
margin: 0 3px 0 0;
padding: 3px 0 0;
}
#ajaxSearch_submit {
display: inline;
height: 18px;
width: 71px;
line-height: 18px;
background: url(../images/submit.png) no-repeat;
text-indent: -99999px;
border: none;
vertical-align: middle;
}
#ajaxSearch_output {
border: 1px solid #444;
padding: 10px;
background: #fff;
display: block;
height: auto;
vertical-align: top;
z-index: 99999999;
}
.AS_ajax_result {
    color: #444;
    margin-bottom: 3px;
}
.AS_ajax_resultLink {
    text-decoration: underline;
}
.AS_ajax_resultDescription{
    color: #555;
}
.AS_ajax_more {
    color: #555;
}