﻿
/* Syles for Gallant Thame 
----------------------------------------------------------*/

body {margin:0; padding:0; color:#222; font-family: Garamond, Times New Roman; background-image: url(../images/menu-bg.png); background-repeat: repeat-x; background-attachment:fixed; background-position:top, center;}

#header {display:block; position:fixed; top:0; left:0; height:62px; width:100%;}
#header #menu {max-width:900px; height:50px; padding:6px 0; margin: 0 auto; color:#fff; background-image: url(../images/menu-bg.png); background-repeat: repeat-x; background-color:#fff;}
#header #menu a {text-decoration:none; display:inline-block; margin-right:30px; height:50px; line-height:30px; color:#fff; font-size:140%; font-weight:500;}
#header #menu a:hover {text-shadow: 0 0 10px #fff; background-image: url(../images/menu-pnt.png); background-repeat:no-repeat; background-position:bottom, center;}
#header .phoneNumber {color:#fff; font-size:140%; letter-spacing:1px; line-height:35px; vertical-align:top;}
#header #logo {background-color:#fff; display:block; top:0; left:0; height:100px; width:100%; text-align:center; position:relative; z-index:9999}

#container     {display:block; max-width:900px; margin: 160px auto 0 auto; background-color:#ffffff;}
.about         {float:left; width:47%; padding:1%}
.column1       {width:48%; float:left; padding:1%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

#footer {clear:both; display:block; height:62px; width:100%; background-image: url(../images/footer-bg.png); background-repeat: repeat-x; color:#fff;}
#footer #details {max-width:900px; margin: 0 auto; padding:10px 3px 0 3px;}

h1, h2, h3 {font-family: Garamond, Times New Roman; color:#333; padding: 0 0 10px 0; margin:0; font-style:normal; font-weight:100;}
h1 {font-size:32px;}
h2 {font-size:28px;}
h3 {font-size:22px; padding:0;}

P {font-size:16px; line-height:24px; letter-spacing:0.01pc; margin:0; padding:6px 0;}

.talkingTicker      {float:right; width:47%; padding:1%}
#vertical-ticker    {height:275px; width:100%; overflow:hidden; margin:0; padding:0;}
#vertical-ticker li {padding:6px 20px; margin-bottom:3px; display:block; height:78px; overflow:hidden; 
                     background-image: url(/images/news-bg.png); background-repeat: repeat; color:#fff;
                     text-align:left; font-size:16px; font-weight:100; font-family: Garamond, Helvetica Neue, times, serif; }  

#dl-menu {display:none;}                    
#brandsmenu {width:180px; display:inherit; float:left; background-color:#fff; padding:5px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
.brands {display:block;}
.brands h2 {font-size:20px; line-height:24px; width:100%; font-style:italic; border-bottom:solid 1px #e0e0e0; letter-spacing:0.5px; padding:2px; margin-top:15px; font-size:26px; color:#c0c0c0; border-top:solid 1px #fff; }
.brands a {display:block; text-indent:5px; width:90%; margin:0 auto; height:23px; line-height:23px; text-decoration:none; color:#666; font-size:13px; text-transform:uppercase;}
.brands a:hover {background-color:#e0e0e0;}
.brandsheading {font-size:20px; line-height:24px; width:100%; font-style:italic; letter-spacing:0.5px; padding:2px; margin-top:15px; font-size:23px; color:#c0c0c0; border-top:solid 1px #fff;}
#brandsmain    {float:right; width:70%;} 

#menswear-logo       {float:left; padding:0 5% 0 0; text-align:center; width:25%}
#menswear-logo img   {width:100%;}
#menswear-about      {float:left; width:68%;}
#menswear-images     {margin:0; padding:0; list-style-type:none; clear:both;} 
#menswear-images li  {display:inline-block; width:200px; text-align:center;}
#menswear-images li img {padding:5px; border:solid 1px #666;}

fieldset          {border:none;}
#contactform      {float:left; width:45%; padding:2%; margin:30px 1% 30px 0; background-color:#CECCBF}
#contactEmail     {float:left; width:45%; padding:2%; margin:30px 0 0 1%; background-color:#AEA8AA}
#contactConfirm   {float:left; width:45%; padding:2%; margin:30px 0 0 1%; background-color:#D6D5CD}
#contactSocial    {float:left; width:45%; padding:2%; margin:30px 0 0 1%; background-color:#D6D5CD}
#contactSocial a div       {text-decoration:none; color:#333;}
#contactSocial a div:hover {text-decoration:underline;}

.enquiryLabel  {margin-top:8px; display:block;}
.enquiryInput  {background-color:#E3DECB; padding: 5px; border:solid 1px #A7A598; width:80%; margin:0;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
                font-family: Garamond, Times New Roman; font-size:16px;}
.enquiryArea   {background-color:#E3DECB; padding: 3px; border:solid 1px #A7A598; width:80%; height:80px;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                border-radius: 6px;
                font-family: Garamond, Times New Roman; font-size:16px;}
.EnquiryButton {padding:10px 20px; width:83%; margin:20px 0 13px 0; background-color:#F0F0F0; font-size:25px; font-family: Garamond, Times New Roman;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                border-radius: 6px;}
                
.EnquiryButton:hover {background-color:#c0c0c0;}

/* Styles for Login Pages. 
------------------------------------------------------------------------------*/
.tsimage {width:100px}
.hotbutton {display:inline-block; padding:3px; font-variant:small-caps; border:solid 1px #a0a0a0; text-decoration:none;}
.hotbutton:hover {background-color:#e0e0f0;}


/* Responsive Styles */

@media screen and (max-width: 899px) 
{
    #header #menu a      {margin-right:6px; padding:0px 10px; font-size:120%; font-weight:500;}
    #header .phoneNumber {font-size:120%;}
}

@media screen and (max-width: 360px)
{
    #header #menu a      {margin-right:4px; padding:0px 5px; font-size:90%; font-weight:500;}  
    #header #logo img    {width:95%;}  
    .talkingTicker       {display:none;}
    .about               {width:90%}
    .column1             {width:90%; float:left;}
    #brandsmenu          {display:none;}
    #brandsmain          {float:none; width:96%; padding:2%}
    #dl-menu             {display:block;}
}