/* Main Style Sheet for Make-A-Wish Mexico  */

/* Standard HTML Elements */

body {background-color:#ABC5FE; margin:0px; text-align:center;}

a {color:blue; text-decoration:underline;}
a:hover { text-decoration: underline;}

h1 { color: #000066; font-size: 14pt; font-family: Arial, Helvetica, sans-serif; margin: 0px 10px 2px 10px; padding-top:10px; }
h2 { color: #000066; font-size: 11pt; font-family: Arial, Helvetica, sans-serif; margin: 8px 10px 2px 10px; }
h3 { color: #000066; font-size: 10pt; font-family: Arial, Helvetica, sans-serif; margin: 6px 10px 2px 10px; }

b, strong {font-weight: bold; }
div {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: black;}
i, em {font-style: italic; }
img {border-style: none;}
li {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: black; margin-right: 10px; margin-left: 20px; line-height: 130%;}
ol {padding: 0px; margin-left: 10px; list-style-type: decimal;}
p {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: black; margin-left: 10px; margin-right: 10px; line-height: 140%;}
td {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: black;}
ul {padding: 0px; margin-left: 10px; list-style-type: square;}


/* IDs */

#MainContainer {width:1024px; background:white; margin-left:auto; margin-right:auto; margin-top:0px; display:block; text-align:left;}
#mainSection {}
#LeftSection {width:250px; float:left;}
#RightSection {width:764px; float:right;}

/* Classes applicable to any element */

.divClear {clear:both;}
.FormCategoryName {font-size: 11pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color:#CC0033; margin: 12px 0px 4px 10px;}
.FormVariableName {font-size: 9pt; font-family: Arial, Helvetica, sans-serif; text-align: right; width:40%; height:26px; float:left;} 
.FormVariableValue {font-size: 9pt; font-family: Arial, Helvetica, sans-serif; width:58%; height:26px; float:right;}
.Footer {font-size: 8pt; font-family: Arial, Helvetica, sans-serif; color: #999999;}
.White {color:white;}


/* Classes applicable to only specified elements */

div.WishStory {margin:8px 10px 12px 10px; border:solid 1px #CCCCCC;}
img.SponsorLogo {display:block; margin:4px 4px 4px 4px;}
img.WishStory {display:block; margin:0px 0px 4px 4px; float:right;}
p.FirstParagraph {margin-top:0px; padding-top:12px;}

/* ================================================================ 
The original version is available at http://www.cssplay.co.uk/menus/iPad-Anywidth2.html
Copyright (c) 2011 Stu Nicholls. All rights reserved.
=================================================================== */

/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}

#MainMenu {height:36px; background:#355BA2; margin:0px 0px 0px 0px; position:absolute; z-index:999;}

#MainMenu ul {margin:0px; padding:0px; list-style:none; white-space:nowrap; position:relative;}
#MainMenu li {margin:0px; line-height:100%} /* Neutralize the standard settings */
#MainMenu > ul {float:left;}

#MainMenu ul ul {position:absolute; left:-9999px;}
#MainMenu > ul > li {float:left; display:block; position:relative;}

#MainMenu ul ul {background:#222222; padding:5px 0px 5px 0px; width:255px;}
#MainMenu > ul > li > ul {border-top:0px;}

#MainMenu a {display:block; font:bold 10pt arial, helvetica, sans-serif; color:white; line-height:36px; text-decoration:none; padding:0px 10px 0px 12px;}
#MainMenu > ul > li > a {float:left; color:white;}
#MainMenu ul ul li a {line-height:36px; color:white; padding:0px; text-indent:10px;}

#MainMenu ul li:hover > ul {left:0px; top:36px;}
#MainMenu ul ul li:hover > ul {background:#555555; left:100%; top:auto; margin:-36px 0px 0px 0px; padding:0px; width:220px;}

#MainMenu li a.fly {background:transparent url('/English/Images/Buttons/CSSMenu_right-arrow.gif') no-repeat right center;}

#MainMenu > ul li:hover > a {background-color:#FFD600; color:black;}
#MainMenu ul ul li:hover > a,
#MainMenu ul ul li:hover > a.fly {background-color:#FFDD00; color:black;}

#MainMenu > ul > li.close {display:none; position:absolute; left:0; top:-36px; width:100%; height:25px; background:none;}
#MainMenu > ul > li.close a {width:100%; padding:0; text-indent:15px; background:#5C6969; color:white;}

@media only screen and (max-device-width:768px)
/* for iPhone, iPod Touch and iPad */
{#MainMenu ul ul {display:none;}
#MainMenu ul li:hover > ul {display:block;}
#MainMenu ul li:hover ~ li.close {display:block;}
}