root {
    display: block;
}

body{

    font-size: 14px;
    font-family: arial;
    line-height: 18px;
    text-align: center;
    background-color: #fff;
     background-image: url('../../image-files/body-bg.png');
background-attachment: fixed;
background-repeat: repeat-x;
    margin: 0px;
    padding: 0px;
    color: #444;

}

a, a:visited {
    color: #509ddc;
}

a:hover {
    color: #f210c4;
}


h1 {
    line-height: 32px;
    letter-spacing: -2px;
    font-size: 38px;
    color: #444;
    margin: 10px 0px 20px 0px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
}



h2 {
    margin: 10px 0px 0px 0px;
    line-height: 26px;
    letter-spacing: -1px;
    font-size: 26px;
    color: #666;

   text-align:center;
}

h3 {
    margin: 10px 0px 20px 0px;
    line-height: 24px;
    letter-spacing: -1px;
    font-size: 24px;
    color: #509ddc;

    }


.content p {
    text-align: justify;
}

#PageWrapper {
 margin: 100px auto 20px auto;
    display: block;
       width: 960px;
    text-align: left;
    min-height: 100px;
    background-color: #fff;
        padding: 20px 0px 20px 0px;


}

/* style header section */


#Header .ExtraNav {
margin: -120px 0px 0px 0px;
    height: 70px;
    background-color: #358ed7;
    width: 960px;
    text-align: center;
    border-bottom: 1px solid #0a7bd7;
    border-top: 1px solid #000;
    position: fixed;
    text-shadow: #0a7bd7 1px 1px 1px;


}

#Header .ExtraNav ul {
padding: 0px 0 0 5px;


}
#Header .ExtraNav ul li {

color: #FFFFFF;
    float: left;
    font-size: 12px;
    list-style: none outside none;
    margin: 16px 10px 0 0;

}

/*** new css added for dropdown ***/

#Header .ExtraNav ul ul a {
    text-decoration: none;
}

#Header .ExtraNav ul ul a:hover {
    text-decoration: none;
    color: #FEE96B;
}

#Header .ExtraNav ul ul li {
    margin: 0px;
}

#Header .ExtraNav ul ul li:first-child {
    margin-top: 10px;
    border: none;
}

/*** end of new css added for dropdown ***/

#Header .ExtraNav a:link {
color: #fff;
text-decoration: none;

padding: 0 ;
font-size: 12px;
}

#Header .ExtraNav a:visited {
color: #fff;
text-decoration: none;
}

#Header .ExtraNav a:hover {
color: #4D4E63;
background-color: transparent;
text-decoration: underline;
}

.menu-options {

    margin: auto;
}

.menu-options ul {
    margin: 0px;
    float: none;
}

.menu-options li {
    float: left;
    color: #aaa;
    list-style: none;
    margin: 16px 10px 0px 0px;
    font-size: 12px;
    text-align: left;
    border-left: 1px solid #5ba3de;
    padding: 0px 0px 0px 10px;
}

.menu-options a span {
    font-size: 18px;
    font-weight: bold;
}

.menu-options a {
    color: #999;
    text-decoration: none;
}

.menu-options a:hover {
    color: #f210c4;
}

/*** new css added for dropdown menu ***/

.menu-options ul {
    display:block;
    padding:0;
    margin:0;
}

.menu-options ul:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.menu-options li {
    height:44px;
    position:relative;
    float:left;
    list-style-type:none;
}

.menu-options li.last a {
    border-right:none;
}

.menu-options li:hover {
    text-decoration: none;
}

.menu-options li:first-child { }

.menu-options li:first-child a { }

.menu-options li:first-child:hover { }

.menu-options li a {
    display:block;
    padding:10px 20px;
    text-decoration:none;
}

.menu-options li li {
    width:auto;
    clear:left;
}

.menu-options li li:first-child { }

.menu-options li li:hover { }
.menu-options ul li li a:hover {
    text-decoration: none;
}

.menu-options ul ul {
    display:none;
    padding-left:2px;
    position:absolute;
    top: 45px;
    left:0px;
    background-color: #358ED7;
    width: 160px;
}

.menu-options ul li:hover ul {
    display:block;
}

.menu-options li li {
    width:90%;
    border: none;
    border-top: 1px solid #5BA3DE;
    padding: 6px;
    height: 20px;
    margin: 0px;
}


.menu-options ul a span {
    height:7px;
    width:12px;
    margin-top:8px;
    text-indent:-5000px;
    overflow:hidden;
}

.menu-options ul ul li { }

.menu-options ul ul li.last {
}

.menu-options ul ul li a {
    border: none;
    border-left:0;
    whitewhite-space:pre;
}

/*** end of new css added for dropdown ***/

.menu-nav a {
    color: #000;
    font-weight: bold;
}



.logo-wrapper {
    margin: 30px 0px 0px 10px;
    float: left;
}

.logo-wrapper h1 {
    margin: 10px 0px 0px 20px;
    font-size: 32px;
    line-height: 20px;
    letter-spacing: -1px;
}

.logo-tagline {
    color: #333;
    font-size: 12px;
    margin: 10px 0px 0px 20px;
}

.search-wrapper {
    width: 220px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
    padding:10px;
    margin: 0px 0px 20px 0px;
    background-color: #fff;
    border: 2px solid #358ED7;
}

.search-wrapper p {
    margin: 0px;
    font-size: 11px;
    color: #f210c4;
    margin: 0px 0px 4px 0px;
}

.search-wrapper input {
    font-size: 16px;
        padding: 4px;
    font-family: arial;
    color: #f210c4;
    margin: 0px;
  width: 100px;
}

.sign-up input {
    font-size: 18px;
    width: 130px;
    padding: 4px;
    font-family: arial;
    color: #f210c4;
    margin: 0px;
}


.search-button {
    text-decoration: none;
    margin: 6px 0px 0px 0px;
    float: right;

}

.search-button span {
    background-color: #f210c4;
    padding: 11px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

/* style side column */

#NavColumn{
float: right;
    width: 240px;
    min-height: 300px;
margin-right:20px;
margin-top:20px;
margin-bottom: 10px;
}



.action-main {
 width: 240px;
    height: 260px;
    background-color: #efefef;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;

    }

.action-sub {
    width: 240px;

    background-color: #efefef;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    margin: 20px 0px 0px 0px;
}

.action-main p, .action-sub p {
    text-align: center;
    padding: 20px;
    margin: 0px;
}

.action-main img, .action-sub img {
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2) inset;
    margin: 10px 0 0 20px;
    width: 200px;
}


/* wraps up the main column */

#ContentWrapper{

width: 960px;
min-height:1000px;
float: left;
margin-bottom: 20px;

margin-right: -300px;
background-color: #f8f8f8;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.1);

}



/* style main column */

#ContentColumn{

background-color: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    margin: 20px 0px 20px 20px;
    padding: 20px;
    width: 620px;

}

.content-action {
background-color: #FFFFFF;
    font-size: 12px;
    height: 480px;
    margin: 20px 0 0;
    width: 960px;

    }

/* style footer section */

#Footer{

clear: both;
 background-color: #ccc;
    width: 960px;
    display: block;
    height: 300px;

}

.content-footer-wrapper {
    width: 960px;
    margin: auto;
    text-align: justify;
}


.content-action-left {
    float: left;
    width: 479px;
    height: 480px;
    border-right: 1px solid #ededed;
    background-image: url(../../image-files/actionbackground.jpg);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.1);
}

.content-action-left h3 {
    margin: 20px 20px 20px 20px;
}

.content-action-left p {
    margin: 0px 20px 10px 20px;
}

.content-action-right {
    float: right;
    width: 480px;
    height: 480px;
    margin: 0px;
}

.content-action-right-section {
    float: right;
    margin: 0px 0px 15px 0px;
    height: 150px;
    width: 460px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.1);
}

.content-action-right-section p {
    margin: -10px 20px 10px 20px;
}

.content-action-right-section h3 {
    margin: 20px;
    color: #EDBC1A;
}

.copyright {
    margin: 20px 0px 100px 25px;
    font-size: 12px;
}

.footer-wrapper {
    margin: 20px 0px 0px 0px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    display: block;
    height: 340px;
    clear: both;
    border: 1px solid #dcebf7;
    background-color: #358ed7;
    border: 1px solid #0a7bd7;
    text-shadow: #0a7bd7 1px 1px 1px;
}

.footer-section {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    float: left;
    width: 210px;
    padding: 10px 0px 0px 25px;
    height: 330px;
}

.footer-section h3 {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #5ba3de;
    padding: 0px 0px 5px 0px;
    color: #fee96b;
}

.footer-section a {
    color: #fee96b;
    font-weight: bold;
    text-decoration: none;
}

.footer-section ul {
    float: left;
    margin: 0px;
    padding: 0px;
}

.footer-section li {
    margin: 0px 0px 0px 1px;
    padding: 0px;
    list-style: none;
    font-size: 12px;
    color: #666;
}

.action-marbella-question {
    margin: 190px 20px 0px 20px;
    height: 150px;
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.action-marbella h3 {
    color: #edbc1a;
}
.action-marbella-question p {
    padding: 10px 0px 10px 0px;
    color: #111;
}
.button span {
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    background-color: #f210c4;
    color: #fff;
    padding: 14px 20px 14px 20px;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: -1px;
}

.button a {
    text-decoration: none;
}

.button a:hover span {
    background-color: #000;
}

/* Twitter */

#jstwitter {
    width: 940px;
    height: auto;
    overflow: auto;
    display: block;
}

#jstwitter .tweet {
    text-align: left;
    display: block;
    width: 200px;
    margin: 0px 10px 10px 0px;
    float: left;
    height: auto;
    color: #666;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
}

#jstwitter .tweet a {
    text-decoration: none;
}

#jstwitter .tweet a:hover {
    text-decoration: underline;
}

#jstwitter .tweet .time {
    font-size: 10px;
    color: #bbb;
}

.sign-up {
    margin: 0px 0px 0px 20px;
    width: 420px;
}

.weekly-change {
    height: 220px;
}

.weekly-photo {
    width: 195px;
    height: 195px;
    background-color: #358ed7;
    margin: 0px 20px 0px 0px;
    float: left;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}


.home-columns {
    height: 420px;
    margin: 10px 0px 0px 0px;
}

.home-column {
    background-color: #358ed7;
    width: 195px;
    height: 195px;
    float: left;
    margin: 0px 10px 10px 0px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.home-column p {
    float: right;
    color: #fff;
    margin: 10px;
}

.sign-up p {
    margin: -10px 0px 0px 20px;
}


.sign-up input {
    width: 160px;
}


.twitter {
    background-image: url(../../image-files/twitter_newbird_blue.png);
    background-repeat:no-repeat;
    background-position: 95% 100%;
    height: 110px;
}

.facebook {
    background-image: url(../../image-files/f_logo.png);
    background-repeat:no-repeat;
    background-position: 95% 100%;
    height: 110px;
}


.share h3 {
    color: #999;
}

.Liner {
padding: 0px;
}

.ReturnToNavBox {
background-color: #fff;

border-top: 1px solid #828282;

margin: 5px auto 12px auto;
padding: 2px;
text-align: left;
}

/* ------ Section 6 - Boxes ------ */

.CalloutBox {
background-color: #F9E998;
width: 85%;
border: 1px dotted #8f8fb3;
margin: 18px auto 24px auto;
padding: 4px;
color: black;
}

div.CalloutBox p {
margin: 13px;
}

p.CalloutBox {
padding: 13px;
}

div.CalloutBox h1,
div.CalloutBox h2,
div.CalloutBox h3,
div.CalloutBox h4,
div.CalloutBox h5,
div.CalloutBox h6 {
margin: 13px 0 0 13px;
}

.ReminderBox {
background-color: #fff;
width: 24%;
border: 1px solid #8f8fb3;
margin: 0 5px 12px 18px;
float: right;             /* adding float enables text to flow around it */
color: #666;
}

.ReminderBox h4 {
margin: 0;
padding: 2px;
text-align: center;
background-color: #D2A69D;
color: #fff;
}

.ReminderBox p {
font-size: 80%;
padding: 0 4px;
line-height: 120%;
}

#content-share {
    background-color: #F8F8F8;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1) inset;
    font-size: 11px;
    height: auto;
    margin: 20px 800px 0px 0px;
    padding: 10px;
    width: 230px;
}

/* -- floats -- */

.ItemRight {
float: right;
margin: 2px 0 12px 18px;
text-align: center;
}

.ItemCenter {
margin: 2px auto 12px auto;
text-align: center;
clear: both;
}

.ItemLeft {
float: left;
margin: 2px 18px 12px 0;
text-align: center;
}


@media only screen and (max-width: 959px) {
    #content-share: {
        display:none;
    }
}