﻿/* Intro Screen
-----------------------------*/
#intro_main 
{
	background: url(../img/intro_bg.jpg) no-repeat 0 22px;
	clear: both;
	height: 374px;
	padding: 46px 0 0 40px;
	width: 802px;
}
#intro_main h2
{
	text-indent: -5000px;
	background: url(../img/intro_header.png) no-repeat 0 0;
	width: 733px;
	height: 106px;
	padding: 0 0 15px 0;
}
#intro_main p
{
	font-size: 14px;
	line-height: 18px;
	margin: 0 0 15px 0;
	width: 415px;
}
#intro_main .sl_button
{
	text-indent: -5000px;
	background: url(../img/sl_button.png) no-repeat 0 0;
	width: 247px;
	height: 109px;
	display: block;
	
}
#intro_main a 
{
	color: #000;
}
.wrapper 
{
	font-family: Helvetica, Arial, Sans-Serif;
	width: 845px;
	margin: 0 auto;
}
.header 
{
	float: left;
	width: 845px;
	margin: 20px 0 0 0;
}
.logo 
{
	float: left;
	width: 123px;
	height: 31px;
	padding: 0 0 0 10px;
}
#view_toggle 
{
	list-style-type: none;
	float: right;
	padding: 5px 30px 0 0;
}
#view_toggle li
{
	float: right;
}
#view_toggle li.selected a 
{
	display: none;
}
.view_features
{
	color: #888;
	font-size: 14px;
	text-decoration: none;
	background: url(../img/close.jpg) no-repeat right 0;
	padding: 0 25px 5px 0;
	line-height: 20px;
}
.view_all 
{
	color: #228cb6;
	font-size: 12px;
	text-decoration: none;
}
.view_all:hover, .view_all:active 
{
	text-decoration: underline;
}
#main 
{
	width: 843px;	
	clear: both;
	background: url(../img/wrapper_bg_large.jpg) no-repeat 0 22px;
	height: 527px;
}

div#main.large 
{
	background: url(../img/wrapper_bg.jpg) no-repeat 0 22px;
	height: 372px;
}



div.clear 
{
	clear:both;	
}

/* Intro
-----------------------------*/
#intro 
{
	padding: 43px 0 0 20px;
	width: 280px;
	float: left;
}
#intro h3
{
	text-indent: -5000px;
	background: url(../img/intro.png) no-repeat 0 0;
	width: 242px;
	height: 97px;
}
#intro p 
{
	width: 250px;
	font-size: 13px;
	line-height: 19px;
	margin: 15px 0 0 0;
}


/* Features
-----------------------------*/
#screenshot 
{
	background: url(../img/screenshot.png) no-repeat 0 1px;
	float: left;
	height: 342px;
	position: relative;
	width: 518px;
}
#clutter div,
#savetime div,
#office div 
{
	position: absolute;	
}
#screenshot a 
{
	font-size: 11px;
	line-height: 13px;
	padding: 3px 10px 5px 5px;
	background: #fff;
	font-weight: bold;
	text-decoration: none;
	float: left;
	box-shadow: 3px 3px 3px #888;
	-moz-box-shadow: 3px 3px 3px #888;
	-webkit-box-shadow: 3px 3px 3px #888;
}
#screenshot a span 
{
	float: left;
	display: block;

}
#screenshot a img 
{
	float: right;
	width: 18px;
	margin: 7px 0  0 0;
}
#screenshot a .pointer 
{
	width: 8px;
	position: absolute;
}

/* Remove the Clutter Features
-----------------------------*/
#clutter a { color: #45a145; border: 2px solid #45a145; }
#clutter a:hover { background: #f2f8f2 url(../img/green_hover.png) repeat-x 0 0; }

/* Conversations */
#clutter #conversations { top: 27px; left: 7px; }
#clutter #conversations a { width: 160px; }
#clutter #conversations span { width: 140px; }
#clutter #conversations .pointer { top: 30px; right: 0; }

/* Junk */
#clutter #junk { top: 91px; left: 19px; }
#clutter #junk a {	width: 165px; }
#clutter #junk span { width: 145px; }
#clutter #junk .pointer { top: -17px; left: 0; }

/* Sweep Keep */
#clutter #sweep-keep { top: -20px; left: 56px; }
#clutter #sweep-keep a { width: 145px; }
#clutter #sweep-keep span { width: 125px; }
#clutter #sweep-keep .pointer { top: 30px; right: 0; }

/* Sweep */
#clutter #sweep { top: -20px; left: 230px; }
#clutter #sweep a { width: 145px; }
#clutter #sweep span { width: 125px; }
#clutter #sweep .pointer { top: 30px; left: 0; }

/* Filter */
#clutter #filter { top: 81px; left: 259px; }
#clutter #filter a { width: 145px; }
#clutter #filter span { width: 125px; }
#clutter #filter .pointer { top: -17px; left: 0; }

/* Save Time Features
-----------------------------*/
#savetime a { color: #f67b20; border: 2px solid #f67b20; }
#savetime a:hover { background: #fef2e6 url(../img/orange_hover.png) repeat-x 0 0; }

/* Send Photos */
#savetime #sharephotos { top: -20px; left: 80px; }
#savetime #sharephotos a {	width: 105px; }
#savetime #sharephotos span {	width: 85px; }
#savetime #sharephotos .pointer { top: 30px; left: 0; }

/* Manage */
#savetime #updates { top: 110px; left: 105px; }
#savetime #updates a { width: 195px; }
#savetime #updates span { width: 175px; }
#savetime #updates .pointer { top: 30px; left: 0; }

/* View Photos */
#savetime #photoview { top: 215px; left: 250px; }
#savetime #photoview a {	width: 150px; }
#savetime #photoview span {	width: 130px; }
#savetime #photoview .pointer { top: 30px; left: 0; }

/* Find Messages */
#savetime #search { top: -5px; left: 225px; }
#savetime #search a { width: 135px; }
#savetime #search span { width: 115px; }
#savetime #search .pointer { top: 30px; right: 0; }

/* Chat */
#savetime #chat { top: 163px; left: 36px; }
#savetime #chat a { width: 135px; }
#savetime #chat span { width: 115px; }
#savetime #chat .pointer { top: 30px; left: 0; }

/* One Place */
#savetime #oneplace { top: 60px; left: 34px; }
#savetime #oneplace a { width: 135px; }
#savetime #oneplace span { width: 115px; }
#savetime #oneplace .pointer { top: -15px; left: 0; }

/* Experience */
#savetime #experience { top: 111px; left: 348px; }
#savetime #experience a { width: 135px; }
#savetime #experience span { width: 115px; }
#savetime #experience .pointer { top: 30px; left: 0; }

/* Microsoft Office Features
-----------------------------*/
#office a { color: #007aac; border: 2px solid #007aac; }
#office a:hover { background: #f4f9fc url(../img/blue_hover.png) repeat-x 0 0; }

/* Share */
#office #share { top: 230px; left: -25px; }
#office #share a {	width: 155px; }
#office #share span{ width: 135px; }
#office #share .pointer { top: 30px; right: 0; }

/* View Docs */
#office #viewedit { top: 230px; left: 170px; }
#office #viewedit a { width: 155px; }
#office #viewedit span { width: 135px; }
#office #viewedit .pointer { top: 30px; left: 0; }

/* Collaborate */
#office #collaborate { top: 120px; left: 95px; }
#office #collaborate a { width: 170px; }
#office #collaborate span { width: 150px; }
#office #collaborate .pointer { top: -15px; left: 0; }





/* Pillars (tabs)
-----------------------------*/
.pillars 
{
	position: relative;
	top: -34px;
	left: 4px;
	display:none;
}

.pillars.show 
{
	display:block;
}

.pillars a 
{
	color: #000;
	outline: 0;
	text-decoration: none;
}
.pillars span 
{
	font-size: 12px;
	line-height: 16px;
	display: block;
}
.reg 
{
	font-size: 10px;
	width: auto;
	display: inline !important;
	padding: 0 !important;
}
.pillars #clutter_tab
{
	width: 279px;
	float: left;
	margin: 0 1px 0 0;
}
.pillars #clutter_tab:hover,
.pillars #clutter_tab.selected
{
	background: url(../img/clutter_hover_bg.png) no-repeat 0 0;
	cursor: pointer;
}
.pillars #clutter_tab img 
{
	padding: 30px 0 0 40px;
}
.pillars #clutter_tab span 
{
	width: 190px;
	padding: 25px 0 0 40px;
}
.pillars .dividers 
{
	background: url(../img/dividers.png) no-repeat 0 20px;
	position: relative;
	left: -2px;
}
.pillars #savetime_tab 
{
	width: 256px;
	float: left;
	position: relative;
	top: 5px;
}

.pillars #savetime_tab:hover,
.pillars #savetime_tab.selected
{
	background: url(../img/time_hover_bg.png) no-repeat 0 0;
	cursor: pointer;
}
.pillars #savetime_tab img 
{
	padding: 20px 0 0 30px;
}
.pillars #savetime_tab span 
{
	width: 215px;
	padding: 15px 0 0 25px; 
}

.pillars #office_tab
{
	width: 305px;
	float: left;
}
.pillars #office_tab:hover,
.pillars #office_tab.selected
{
	background: url(../img/office_hover_bg.png) no-repeat 0 0;
	cursor: pointer;
}
.pillars #office_tab img 
{
	padding: 20px 0 0 30px;
}
.pillars #office_tab span
{
	width: 210px;
	padding: 23px 0 0 30px;
}

/* All Features
-----------------------------*/
#allfeatures 
{
	float: left;
	padding: 43px 0 0 53px;
}
#allfeatures a 
{
	font-size: 11px;
	line-height: 13px;
	padding: 3px 10px 5px 5px;
	background: #fff;
	font-weight: bold;
	text-decoration: none;
	float: left;
	box-shadow: 3px 3px 3px #888;
	-moz-box-shadow: 3px 3px 3px #888;
	-webkit-box-shadow: 3px 3px 3px #888;
	width: 200px;
	margin: 0 0 20px 0;
}

#all_clutter, #all_savetime, #all_office
{
	width: 260px;
	float: left;
}

#all_clutter { padding: 70px 0 0 0; } 
#all_savetime { padding: 15px 0 0 0; } 
#all_office { margin: 0; padding: 128px 0 0 0; }

#allfeatures a span 
{
	float: left;
	display: block;
	width: 170px;

}
#allfeatures a img 
{
	float: right;
	width: 18px;
	margin: 7px 0  0 0;
}

#all_clutter a { color: #45a145; border: 2px solid #45a145; }
#all_clutter a:hover { background: #f2f8f2 url(../img/green_hover.png) repeat-x 0 0; }

#all_savetime a { color: #f67b20; border: 2px solid #f67b20; }
#all_savetime a:hover { background: #fef2e6 url(../img/orange_hover.png) repeat-x 0 0; }

#all_office a { color: #007aac; border: 2px solid #007aac; }
#all_office a:hover { background: #f4f9fc url(../img/blue_hover.png) repeat-x 0 0; }


#shareThis { display: none; float:left;width:122px;height:auto;min-height:37px;position:relative; margin-top: 13px;}
    #shareThis {_height:35px;}
    body.scriptDisabled #shareThis {display:none;}
    
#shareThis .hoverCont {left:0px; top: -194px;}

#shareThis a {color:#666;text-decoration:none; font-family:verdana,sans-serif; font-size:62.5%;}
    #shareThis a.share {display:block;float:left;width:122px;height:37px;text-indent:-9999em;background:url("../img/share_links_bg.png") 0 0 no-repeat;}
    
#shareThis li,
#shareThis li a,
#shareThis .emailafriend a,
#shareThis h3 {background:url(../img/gloShareThis.png) no-repeat;}

#shareThis h3 {width:130px;height:16px;text-indent:-9999em;background-position:0 -40px;}

#shareThis ul {float:left;padding:0;margin:0 0 10px 0;width:50%;list-style:none;background-color:#fff;}

#shareThis li {display:block; padding:0;}
    #shareThis li {_padding:0;_height:1%;}

#shareThis li a {display:block;padding:8px 5px 8px 30px;color:#666;text-decoration:none;background-position:-370px -40px;}
    #shareThis li a {_padding:0 5px 0 30px;_line-height:30px;}
    #shareThis li a:hover {text-decoration:underline;}

#shareThis .emailafriend {clear:left;padding:15px 0 0 0;border-top:solid 1px #c1d6ee;}
#shareThis .emailafriend a {display:block;height:18px;width:102px;text-indent:-9999em;background-position:-400px 0;}

#shareThis .delicious {background-position:-30px 0;}
#shareThis .digg {background-position:-150px 0;}
#shareThis .live {background-position:-120px 0;}
#shareThis .messenger {background-position:-330px -39px;}
#shareThis .facebook {background-position:-210px 0;}
#shareThis .myspace {background-position:-60px 0;}
#shareThis .reddit {background-position:-90px 0;}
#shareThis .newsvine {background-position:-240px 0;}
#shareThis .twitter {background-position:-270px 0;}
#shareThis .google {background-position:-180px 0;}
#shareThis .bebo {background-position:-330px 0;}
#shareThis .linkedin {background-position:-360px 0;}
#shareThis .hi5 {background-position:-300px 0;}

#shareThis .hoverCont .tt1 {float:none;}



.hoverCont {position:absolute;background:url(http://windowslive.com/Content/img/global/tooltip/tt-br.gif) 100% 100% no-repeat;z-index:50;}
.hoverCont .tt3 {margin:0 5px 0 0;padding:13px 0 0 0;background:url(http://windowslive.com/Content/img/global/tooltip/tt-b.gif) 0 0 no-repeat;}
    .hoverCont.top .tt3 {background-image:url(http://windowslive.com/Content/img/global/tooltip/tt-b-top.png);}
    #ie .hoverCont .tt3 {padding:5px 0 0 0;background-position:0 100%;}
.hoverCont .tt2 {padding:0 5px 0 0;background:url(http://windowslive.com/Content/img/global/tooltip/tt-right.gif) 100% 0 no-repeat;}
.hoverCont .tt1 {float:left;padding:25px 20px 5px 20px;width:200px;overflow:hidden;background:url(http://windowslive.com/Content/img/global/tooltip/ttbkgd.png) 0 0 no-repeat #fff;}
    .hoverCont.bottom .tt1 {background-image:url(http://windowslive.com/Content/img/global/tooltip/ttbkgd-bottom.png);}
    #ie .hoverCont .tt1 {padding-bottom:15px;}
.hoverCont .tt1 ul li a {zoom:1;}
.hoverCont img.left,
.hoverCont img.right {display:none;}

.closed, .hidden, .prototype {
	display:none !important;
}

div.readMore 
{
	font-size:11px;
	border-top:1px solid #ddd;
	margin:0 auto;
	width:400px;
	text-align:center;
	padding-top:10px;
}

div.readMore a 
{
	color:#0079ab;	
	text-decoration:none;
}

