@define touchkeyclickedactivetime: 0.13;

TextInputDualTouch
{
	width: 100%;
	height: 100%;
	flow-children: none;

	background-color: #00000088;
}

.MinimalKeyboard TextInputDualTouch
{
	background-color: #00000000;
}

#Backdrop
{
	width: 100%;
	height: 532px;
	flow-children: none;
	margin-bottom: 210px;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 240px;
	horizontal-align: center;
	
	background-color: daisy_bg_color;
	background-position: left 167px top 167px;
	background-repeat: no-repeat;
	background-size: 55%;
	
	box-shadow: fill #00000022 -4px -4px 8px 12px;
	border-radius: 10px;
}
.SuggestionsCount4 #Backdrop
{
	height: 550px;
}

.MinimalKeyboard #Backdrop
{
	margin-top: 20px;
}

.DockBottom #Backdrop
{
	margin-bottom: 20px;
	margin-top: 520px;
}

.DockTop #Backdrop
{
	margin-bottom: 520px;
	margin-top: 20px;
}

.Desktop #BackDrop
{
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	margin-right: 10px;
	
	vertical-align: center;
}

#UrlBarTextEntry #Backdrop
{
	margin-bottom: 420px;
	margin-top: 70px;
}


#TextPreviewBackground
{
	y: 8%;
	background-color: #ffffff;
	horizontal-align: center;
	width: 100%;
	height: 88px;
	margin-left: 20px;
	margin-right: 20px;

	box-shadow: fill #00000022 -4px -4px 8px 12px;
	border-radius: 10px;

	animation-name: main-button-glow-movement;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

#TextPreview
{
	horizontal-align: center;
	width: 100%;
	margin-left: 10px;
	margin-right: 10px;
	height: 68px;
	background-color: gradient(linear, 0% 0%, 100% 0%, from(#cccccc), to(#bdbdbd) );
	overflow: clip;
	color: #222222ff;
	font-size: 38px;
	font-family: platformfont;
	animation-name: none;
	vertical-align: center;
	
	text-overflow: clip;
	white-space: nowrap;
	text-align: left;
}

.MinimalKeyboard #TextPreview,
.MinimalKeyboard #TextPreviewBackground
{
	visibility: collapse;
}

.TouchPad
{
	y: 6px;
	width: 492px;
	height: 510px;
	background-repeat: no-repeat;
	margin-left: -35px;
	margin-right: -35px;

}
.SuggestionsCount4 .TouchPad
{
	height: 532px;
}
.FriendsUI .TouchPad
{
	y: 2px;
}


#RowContainer
{
	margin-top: 10px;
	width: 100%;
	height: 100%;
	flow-children: down;
}

.FriendsUI #RowContainer
{
	margin-top: 0px;
}

#TouchPadLeft
{
	horizontal-align: left;
}

#TouchPadRight
{
	horizontal-align: right;
}

.Left .TouchRow
{
	transform: translateX( -2.25% );
	horizontal-align: right;
}

.Right .TouchRow
{
	transform: translateX( 2.25% );
	horizontal-align: left;
}

#TopRow
{
	height: 70px;
	width: 88%;

	background-color: daisy_bg_color;
	padding-left: 4px;
	padding-right: 4px;
}

#LastRow
{
	height: 70px;
	width: 89%;
}

.SuggestionsCount4 #TopRow
{
	height: 86px;
}
.NoSuggest #TopRow
{
	visibility: collapse;
}
.FriendsUI #TopRow
{
	height: 13%;
}
.FriendsUI #LastRow
{
	height: 13%;
}


#DefaultSuggestions4_WrapperLeft,
#DefaultSuggestions4_WrapperRight
{
	width: 100%;
	height: 100px;
	flow-children: right;
}

/* if we have custom suggestion panels, hide our default suggestion UI */
.SuggestionsCount3 #DefaultSuggestions4_WrapperLeft,
.SuggestionsCount3 #DefaultSuggestions4_WrapperRight,
.SuggestionsCount4 #DefaultSuggestions4_WrapperLeft,
.SuggestionsCount4 #DefaultSuggestions4_WrapperRight
{
	visibility: collapse;
}

#CustomSuggestions_4_WrapperLeft,
#CustomSuggestions_4_WrapperRight
{
	width: 440px;
	height: 100px;
	visibility: collapse;
	flow-children: right;
}

#CustomSuggestions_4_WrapperLeft
{
	margin-left: 6px;
}

#CustomSuggestions_4_WrapperRight
{
	margin-left: 2px;
}

.SuggestionsCount4 #CustomSuggestions_4_WrapperLeft,
.SuggestionsCount4 #CustomSuggestions_4_WrapperRight
{
	visibility: visible;
}

#Legends #HeaderText
{
	width: 100%;
	height: 100px;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 20px;

	color: #ffffff;
	font-size: 45px;
}

#Legends #SubHeaderDetailText
{
	width: 400px;
	height: 100px;
	margin-left: 20px;
	margin-top: 210px;

	color: #66c0f4;
	font-size: 22px;
	
	transition-property: opacity, saturation;
	transition-duration: 0.3s;

}

.SuggestionActive  #SubHeaderDetailText
{
	opacity: 0.2;
	saturation: 0.2;
}


.TouchRow
{
	flow-children: right;
	height: 18%;
	width: 86.1%;
}


#Row0,
#Row1,
#Row2,
#Row3
{
	width: 88%;
}

.EmoticonRow
{
	flow-children: right;
	height: 14.5%;
	width: 100%;
	visibility: collapse;
}

.EmoticonMode .EmoticonRow
{
	visibility: visible;
}

.Left .EmoticonRow
{
	horizontal-align: left;
	margin-left: 48px;
}

.Right .EmoticonRow
{
	horizontal-align: left;
	margin-left: 11px;
	width: 91.5%;
}

.EmoticonTouchKey.Hidden Image
{
	visibility: collapse;
}

.EmoticonTouchKey Image
{
	width: 36px;
	height: 36px;
	horizontal-align: center;
	vertical-align: center;
}

#TouchKey_Show_Emoticons Image
{
	horizontal-align: center;
	vertical-align: center;
}


.NoSuggest #Row0.TouchRow
{
	height: 28%;
}
#Row0.TouchRow
{
	height: 80px;
}


#Row1.TouchRow
{
	height: 99px;
}
#Row1 .TouchKey
{
	width: 15.5%;
}


#Row2.TouchRow
{
	height: 84px;
}
#Row2 .TouchKey
{
	width: 16.05%;
}


#Row3.TouchRow
{
	height: 99px;
}

.FriendsUI #Row0
{
	height: 17%;
}

.FriendsUI #Row1,
.FriendsUI #Row2,
.FriendsUI #Row3
{
	height: 19%;
}


.NoSuggest .TouchRow,
.NoSuggest #LastRow
{
	height: 80px;
}

.Left #LastRow
{
	/* x: 0%; */
	horizontal-align: right;
	width: 90.8%;
	margin-right: -14px;
}

.Right #LastRow
{
	x: 0%;
	horizontal-align: left;
	margin-left: -5px;
}

.TouchKey
{
	width: 16%;
	height: 100%;
	background-color: daisy_petal_color;
	border-style: solid;
	border-width: 4px;
	border-color: daisy_bg_color;
}

.EmoticonTouchKey
{
	width: 16.25%;
}

/* 6, 7, B, N */
#TouchKey_5_0.TouchKey,
#TouchKey_6_0.TouchKey,
#TouchKey_4_3.TouchKey,
#TouchKey_5_3.TouchKey
{
	width: 19.9%;
}

/* Q, R, U, P */
#TouchKey_0_1.TouchKey,
#TouchKey_3_1.TouchKey,
#TouchKey_6_1.TouchKey,
#TouchKey_9_1.TouchKey
{
	width: 22.05%;
}

/* T, Y */
#TouchKey_4_1.TouchKey,
#TouchKey_5_1.TouchKey
{
	width: 25.05%;
}

/* H, G */
#TouchKey_5_2.TouchKey,
#TouchKey_4_2.TouchKey
{
	width: 23.02%;
}

.Left #TouchKey_Space
{
	border-right-width: 0px;
	border-left-width: 4px;
	width: 100%;
}

.Right #TouchKey_Space
{
	border-left-width: 0px;
	border-right-width: 4px;
	width: 50%;
}

#TouchKey_Close
{
	background-color: #3f643a;
	width: 50%;
}

#TouchKey_Close.TouchKeyHover
{
	background-color: #88b51c;
}

#TouchKey_Suggest_0.TouchKey.PasteSuggestionPanel Label
{
	color: #888888;
}

#TouchKey_Suggest_0.TouchKey,
#TouchKey_Suggest_1.TouchKey,
#TouchKey_Suggest_2.TouchKey,
#TouchKey_Suggest_3.TouchKey
{
	width: 50%;	
}

#TouchKey_Suggest_0.TouchKey
{
	border-left-width: 0px;	
}

#TouchKey_Suggest_3.TouchKey
{
	border-right-width: 0px;
}

#TouchKey_LeftArrow.TouchKey,
#TouchKey_RightArrow.TouchKey
{
	width: 12.9%;
}

#TouchKey_LeftArrow.LeftArrowFill
{
	margin-top: 10px;
	x: 9%;
	y: 14.8%;
	width: 1.8%;
	height: 69%;
	border-style: none;
}

#TouchKey_RightArrow.RightArrowFill
{
	margin-top: 10px;
	x: 89.2%;
	y: 14.8%;
	width: 1.64%;
	height: 68.5%;
	border-style: none;
}

.NoSuggest #TouchKey_LeftArrow.LeftArrowFill,
.NoSuggest #TouchKey_RightArrow.RightArrowFill
{
	y: 0.75%;
	height: 80%;
}

#TouchKey_Alt.TouchKey
{
	width: 12.79%;
}

#TouchKey_Enter.TouchKey
{
	width: 29.07%;
}

#TouchKey_EnterNoClose.TouchKey,
#TouchKey_SubmitNoClose.TouchKey,
#TouchKey_Return.TouchKey
{
	width: 29.07%;
}

.TouchKeyHover
{
	background-color: daisy_petal_selection_color;
}

.TouchKeyClicked
{
	background-color: #ffffffff;
}


/*
 most of the time we're using "hardware" pointers that render through the D3D/OpenGL layers, so we don't show
 our native Panorama elements unless we're specifically asked to (during transitions in/out) and we are actively
 manipulating that pad
*/
#LeftPointer,
#RightPointer
{
	visibility: collapse;
	vertical-align: center;
	horizontal-align: center;
}

.ShowPanoramaPointers #LeftPointer.LeftTouchPadActive,
.ShowPanoramaPointers #RightPointer.RightTouchPadActive
{
	visibility: visible;
}

#TouchKeyLabel,
.TouchKeyLabel
{
	vertical-align: center;
	horizontal-align: center;
	font-size: 30px;
	color: #ccccccff;
	wash-color: #ccccccff;
}

.FriendsUI .TouchKeyLabel
{
	font-size: 22px;
}

.TouchKeyHover #TouchKeyLabel,
.TouchKeyHover .TouchKeyLabel,
{
	color: #ffffffff;
	wash-color: #ffffffff;
}
.TouchKeyClicked #TouchKeyLabel
{
	color: #072744ff;
}

/*#TextPreview
{
	horizontal-align: right;
	text-overflow: clip;
	white-space: nowrap;
}*/


#LoadingThrobber
{
	margin-left: 830px;
	visibility: collapse;
}

.ShowLoadingThrobber #LoadingThrobber
{
	visibility: visible;
}

.SearchResultEmbedded
{
	width: 210px;
	height: 82px;

	margin-right: 2px;
	margin-left: 2px;

	border-width: 5px;
	border-style: solid;
	border-color: #193e57;
}

.SearchResultEmbedded.TouchKeyHover
{
	border-width: 5px;
	border-style: solid;
	border-color: #256180;
	background-color: none;
}

.SearchResultEmbedded#EmbeddedResultEmpty0,
.SearchResultEmbedded#EmbeddedResultEmpty1,
.SearchResultEmbedded#EmbeddedResultEmpty2,
.SearchResultEmbedded#EmbeddedResultEmpty3
{
	border-width: 0px;
}

.SearchResultEmbedded Image
{
	width: 100%;
	height: 100%;
}

#SuggestionLabels
{
	width: 100%;
	height: 60px;
	margin-top: 180px;
}

.SuggestionTitleLabel
{
	font-size: 40px;
	height: 60px;
	margin-top: 10px;
	opacity: 0.0;
	color: #66c0f4;

	transition-property: opacity;
	transition-duration: 0.3s;
}

.SuggestionTitleLabel.SuggestionActive
{
	opacity: 1.0;
}

#Suggest_0_text
{
	horizontal-align: left;
	margin-left: 40px;
}

#Suggest_1_text
{
	horizontal-align: left;
	margin-left: 250px;
}

#Suggest_2_text
{
	horizontal-align: right;
	text-align: left;
	min-width: 460px;
}

#Suggest_3_text
{
	horizontal-align: right;
	text-align: left;
	min-width: 100px;
}

.FriendsUI #HeaderText, .FriendsUI #Legends, .FriendsUI #TextPreviewBackground,
.SubmitButton #HeaderText, .SubmitButton #Legends, .SubmitButton #TextPreviewBackground
{
	visibility: collapse;
}

.FriendsUI #BackDrop,
.SubmitButton #BackDrop,
{
	background-color: white;
	box-shadow: none;
	border-radius: 0px;
	background-color: none;

	margin-bottom: 0px;
}

TextInputDualTouch.FriendsUI
{
	background-color: #00000000;
	vertical-align: bottom;
	height: 25%;
}

.FriendsUI #BodyContainer,
.SubmitButton #BodyContainer
{
	color: #00000000;
	background-color: #00000000;
	box-shadow: none;
	horizontal-align: center;
}

.FriendsUI #BackDrop,
.SubmitButton #BackDrop
{
	margin-top: 0px;
}

#TouchKey_Submit
{
	background-color: #3f643a;
	width: 50%;
	visibility: collapse;
}

#TouchKey_Enter,
#TouchKey_EnterNoClose,
#TouchKey_SubmitNoClose,
#TouchKey_Return
{
	background-color: #3f643a;
}

#TouchKey_Enter.TouchKeyHover,
#TouchKey_EnterNoClose.TouchKeyHover,
#TouchKey_SubmitNoClose.TouchKeyHover,
#TouchKey_Return.TouchKeyHover,
#TouchKey_Submit.TouchKeyHover
{
	background-color: #88b51c;
}

.SubmitButton #TouchKey_Submit
{
	visibility: visible;
}

.SubmitButton #TouchKey_Close
{
	visibility: collapse;
}

.FriendsUI #TouchKey_Enter,
.SubmitButton #TouchKey_Enter
{
	visibility: collapse;
}

#TouchKey_EnterNoClose,
#TouchKey_SubmitNoClose,
#TouchKey_Return
{
	visibility: collapse;
}

.FriendsUI #TouchKey_SubmitNoClose,
.SubmitButton #TouchKey_EnterNoClose
{
	visibility: visible;
}

.FriendsUI.Shifted #TouchKey_SubmitNoClose
{
	visibility: collapse;
}

.FriendsUI.Shifted #TouchKey_Return
{
	visibility: visible;
}

#TouchKey_Submit
{
	visibility: collapse;
}

.ShowSubmit #TouchKey_Submit
{
	visibility: visible;
}

.ShowSubmit #TouchKey_Close
{
	visibility: collapse;
}

.EmoticonMode .AlphaNumKeyRow
{
	visibility: collapse;
}

/* only show TouchKey_Show_Emoticons and TouchKey_Hide_Emoticons in .AllowEmoticons mode */
#TouchKey_Show_Emoticons
{
	visibility: collapse;
	width: 24%;
}

.AllowEmoticons #TouchKey_Show_Emoticons
{
	visibility: visible;
}

.EmoticonMode #TouchKey_Show_Emoticons
{
	visibility: collapse;
}

#TouchKey_Hide_Emoticons
{
	visibility: collapse;
	width: 24%;
}

.EmoticonMode #TouchKey_Hide_Emoticons
{
	visibility: visible;
}