﻿body {background:#FFFFFF url(/images/background.jpg) top center repeat-x; text-align:center;}
body {font-family:Arial, Verdana, Sans-Serif; margin:0;}
html {margin:0px; padding:0px;}

#container {margin:0 auto; text-align:left; width:960px;}
    #header {height:154px; width:960px; position:relative; margin:0 0 26px 0; padding:0px;}
        #Logo {position:absolute; top:26px; left:18px;}
        #Login {}
        #MainMenu {position:absolute; top:106px; left:13px; width:943px; list-style: none;padding: 0;margin: 0}
            #MainMenu li {float: left;margin: 0 9px 0px 0;}
                #MainMenu a, #MainMenu a span {display: block; float:left;}
                #MainMenu a {font-size:1.5em; padding: 0 0 0 12px; text-decoration:none; height:37px; line-height:37px; color:White; background: url(/images/GreyLeft.png);}
                #MainMenu span {background: url(/images/GreyRight.png) top right; padding-right:12px;}
                
                #MainMenu li.selected a {background: url(/images/BlueLeft.png);}
                #MainMenu li.selected span {background: url(/images/BlueRight.png) top right; padding-right:12px;}
                
                #MainMenu li.SubmitTab {float:right;}
                #MainMenu li.SubmitTab a {background: url(/images/OrangeLeft.png);}
                #MainMenu li.SubmitTab span {background: url(/images/OrangeRight.png) top right; padding-right:12px;}


.footer {background: url(/images/footer.png) top left no-repeat; width:920px; padding:20px; height:208px; margin:12px 0 20px 0;}
    .footer .FooterLinks {width:210px; margin-right:20px; float:left;}
    .footer h2 {border-bottom:1px solid #666; padding-bottom:10px; margin-bottom:10px;}
    .footer h3 {font-weight:bold; color:#333; font-size:1.1em;}
    .footer a {font-size:0.8em; color:#0066FF; display:block; padding-bottom:5px;}

/* --- Home page searches --- */
#FindByName, #FindByIngredients, #FindByColour {float:left; margin-right:14px; height:200px; padding:10px; position:relative;}
#FindByName {width:234px; background: url(/images/FindByName.png);}
#FindByIngredients {width:283px; background: url(/images/FindByIngredient.png);}
#FindByColour {width:234px; background: url(/images/FindByName.png);}

.ac_input {}
.ac_results {background:white; border-left:2px solid #666; border-right:2px solid #666; border-bottom:2px solid #666; text-align:left; padding:5px;}
.ac_over {cursor:pointer;}

/* results -*/
#SearchResults {float:left; width:960px;}
#Results {float:left; width:600px; background:white; margin-top:10px;}
    #Results a {display:block; text-decoration:underline; color:#0066FF; padding-bottom:5px;}
.padding {padding:0 15px; background: url(/images/ResultsContent.png) top left repeat-y;}
#RefineResults {float:right; width:300px; padding:15px; background:white; border:2px solid #BDBDBD; margin-top:10px;}

/* -- cocktail details --- */
#CocktailDetails {float:left; width:960px;}
    #Details {border:2px solid #ddd; float:left; width:570px; padding:15px; background:white; margin-top:10px;}
        #Image {float:left; width:250px;}
        #Instructions {float:right; width:320px;}
        #Reviews {clear:both; padding-top:10px;}
        #Details ul, #AlsoLike ul {list-style-type:disc; margin:0px 0 0px 15px;}
    #AlsoLike {float:right; width:300px; padding:15px; background:white; border:2px solid #BDBDBD; margin-top:10px;}


/* --- Reviews --- */
.Stars{border:0px solid red; background-color:Yellow; background-image:url(/images/Star.jpg); background-repeat:no-repeat; width:20px; height:20px;}
.FilledStar{border:0px solid red; background-color:Yellow; background-image:url(/images/filledstar.jpg); background-repeat:no-repeat; width:20px; height:20px;}
.EmptyStar{border:0px solid red; background-color:White; background-image:url(/images/EmptyStar.jpg); background-repeat:no-repeat; width:20px; height:20px;}
.WaitingStar{border:0px solid red; background-color:Gray; background-image:url(/images/waitingstar.jpg); background-repeat:no-repeat; width:20px; height:20px;}

/* --- Browse recipes --- */
#BrowseContent {width:910px; clear:both; float:left; background: url(/images/BrowseRecipes.png) bottom left; border-top:4px solid #DC7610; padding:25px; margin-top:10px;}
#MostPopular,
#EasyToMake,
#LatestRecipes {width:208px; margin-right:25px; float:left;}
#NonAlcoholic {width:208px; float:left;}

#BrowseContent #Feature {position:relative; background: url(/images/BrowseRecipesRectangle.png); width:190px; height:71px; padding:9px; overflow:hidden; margin-bottom:20px;}
#BrowseContent #Feature a {width:122px; float:left; color:#333; font-size:14px; line-height:17px;}
#BrowseContent #Feature img {width:60px;}
#BrowseContent #Feature a.button img {position:absolute; bottom:10px; left:10px; width:94px;}
#BrowseContent .StandardLinks a {font-size:0.8em; color:#0066FF; display:block; padding-bottom:5px;}

#atoz {float:left; clear:both; margin-top:15px;}
.atozmain {float:left; clear:both; background:url(/images/a-z-middle.png) top left repeat-y; padding:0 25px;}

#LoginPage {float:left; margin-top:10px;width:730px; border:2px solid #ddd; background:white; padding:15px;}
    #LoginPage h2 {padding-bottom:10px;}
#Register {float:left; width:350px; margin-right:30px;}
#Login { float:left; width:270px;}

#AddNewCocktail {border:2px solid #ddd; float:left; padding:15px; background:white; margin-top:10px;}


