/*	

	Café au Lait
	Web Development: The Web Company
	Design: SASI Marketing
	
	CSS Version 1.0
	
	*/


/*	CSS Reset ----------------------------------------------------------------*/

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
		margin:0;
		padding:0;
		border:0;
		font-size:100%;
		font-weight:normal;
		background:transparent;
		}
	
	ol, ul {list-style:none;}
	blockquote, q {quotes:none;}
	ins {text-decoration:none;}
	del {text-decoration:line-through;}

	table {
		border-collapse:collapse;
		border-spacing:0;
		}

	hr {display:none;}
	
	.wrapper {
		margin:0 auto;
		position:relative;
		width:960px;
		}
		
	.hide {display:none;}


/*	Café au Lait Styles ------------------------------------------------------*/
	
	body {
		background:rgb(255,255,255);
		color:rgb(0,0,0);
		font-family:georgia, "times new roman", times, "liberation serif", "bitstream vera serif", serif;
		font-size:62.5%;	
		line-height:1;
		min-width:960px;
		}

	a:link, a:visited {
		color:#ff6600;
		text-decoration:underline;
		}
		
	a:focus, a:hover, a:active {
		color:#af212d;
		}

		
/* Header --------------------------------------------------------------------*/

	#header {
		background:#d21034 url(../../images/bg-header.gif) 0 -20px repeat-x;
		height:100px;
		}


/* Navigation ----------------------------------------------------------------*/

	#navigation {
		background:#99042e url(../../images/bg-navigation.gif) 0 0 repeat-x;
		height:30px;
		}
		
	#navigation li {display:inline;}
		
	#navigation a {
		display:block;
		float:left;
		font-size:1px;
		height:30px;
		margin:0 10px 0 0;
		overflow:hidden;
		text-decoration:none;
		text-indent:-9999px;
		width:0;
		}
	
	#navigation .nav-home a {background-image:url(../../images/n-home.gif);width:56px;margin-left:20px}
	#navigation .nav-caf a {background-image:url(../../images/n-cafe.gif);width:50px;}
	#navigation .nav-catering a {background-image:url(../../images/n-catering.gif);width:79px;}
	#navigation .nav-privateevents a {background-image:url(../../images/n-private.gif);width:116px;}
	#navigation .nav-corporatefunctions a {background-image:url(../../images/n-corporate.gif);width:165px;}
	#navigation .nav-weddings a {background-image:url(../../images/n-weddings.gif);width:86px;}
	#navigation .nav-beautytherapist a {background-image:url(../../images/n-beauty.gif);width:133px;}
	#navigation .nav-gallery a {background-image:url(../../images/n-gallery.gif);width:73px;}
	#navigation .nav-contact a {background-image:url(../../images/n-contact.gif);width:77px;}

	
	/* Navigation: Hover, Active & Focus states */
	#navigation a:hover,
	#navigation a:active,
	#navigation a:focus {background-position:0 -30px;}

	/* Navigation: Selected */		
	#navigation .AspNet-Menu-Selected a { background-position: 0 -30px; }

/*	Content - Header ---------------------------------------------------------*/

	#content-header {
		background:#f6edd9 url(../../images/bg-content-header.gif) left top repeat-x;
		}
		
	body#cal-home #content-header .wrapper {background:transparent url(../../images/n-selected.gif) 43px 0 no-repeat;}
	body#cal-caf #section-a .wrapper {background:transparent url(../../images/n-selected.gif) 106px 0 no-repeat;}
	body#cal-catering #section-a .wrapper {background:transparent url(../../images/n-selected.gif) 180px 0 no-repeat;}
	body#cal-privateevents #section-a .wrapper {background:transparent url(../../images/n-selected.gif) 288px 0 no-repeat;}
	body#cal-corporatefunctions #section-a .wrapper {background:transparent url(../../images/n-selected.gif) 435px 0 no-repeat;}
	body#cal-beautytherapist #section-a .wrapper {background:transparent url(../../images/n-selected.gif) 690px 0 no-repeat;}
	body#cal-gallery #section-a .wrapper {background:transparent url(../../images/n-selected.gif) 660px 0 no-repeat;}
	
	#introduction {
		float:left;
		margin-left:30px;
		padding:60px 0 0 0;
		width:345px;
		}
			
	img#hero {
		float:left;
		margin-bottom:20px;
		}			
		
	body#cal-home #overlay {
		background:transparent url(../../images/img-overlay-home.jpg) top left no-repeat;
		height:177px;
		position:absolute;
		right:20px;
		top:222px;
		width:215px;
		}		
		
	#welcome {margin-bottom:20px;}

	#introduction h2 {
		margin-bottom:5px;
		}
		
	#introduction h3 {
		color:#af212d;
		font-size:1.8em;
		line-height:1.4;
		margin-bottom:5px;
		}
		
	#introduction p {
		color:#663333;
		font-family:arial, "helvetica neue", helvetica, "liberation sans", tahoma, verdana, "bitstream vera sans", san-serif;
		font-size:1.2em;
		line-height:1.5;
		}		
		
		
/*	Content - Mailing List ---------------------------------------------------*/

	#mailinglist {
	    margin-top: 10px;
	    width: 345px;
	    height: 100px;
		padding-top:25px;
	    padding-left: 62px;
	    background: transparent url(../../images/bg-home-mailinglist.gif) no-repeat top left;
	}
	
	#mailinglist h4 {margin-bottom:5px;}

	.column-a {
		float:left;
		width:200px;
		padding-right: 10px;
		}

	.column-b {	
		float:left;
		padding-left:5px;
		padding-top: 5px;
		width:73px;
		}

	#mailinglist p {
		color:#996666;
		font-size:1.1em;
		line-height:1.5;
		}
		

/*	Featured -----------------------------------------------------------------*/

	#featured {
		background:#f9f3e5 url(../../images/bg-featured.gif) top left repeat-x;
		border-bottom:1px solid #f3e7ce;
		padding-bottom:30px;
		}

	.feature {
		background:transparent url(../../images/bg-feature.gif) 0 60px no-repeat;
		float:left;
		margin-right:10px;
		width:225px;
		}

	.cafe {margin-left:15px;}
		
	.feature img {
		margin:0 5px 24px 5px;
		}

	#featured h3 {margin:32px 15px 10px 15px;}

	#featured h3 img {margin:0;}

	#featured h4 {
		color:#b10034;
		font-family:georgia, "times new roman", times, "liberation serif", "bitstream vera serif", serif;
		font-size:1.3em;
		font-style:italic;
		line-height:1;
		margin:0 15px 5px 15px;
		}
		
	#featured p {
		color:#663333;
		font-family:arial, "helvetica neue", helvetica, "liberation sans", tahoma, verdana, "bitstream vera sans", san-serif;
		font-size:1.1em;
		line-height:1.5;
		margin:0 15px 5px 15px;
		}


/*	Content - Section A ------------------------------------------------------*/

	#section-a {
		background:#f9f3e5 url(../../images/bg-section-a.gif) left top repeat-x;
		padding-bottom:10px;
		position:relative;
		}

	#section-b {
		background:#f9f3e5;
		border-bottom:1px solid #f3e7ce;
		padding-bottom:20px;
		}
		
	body#cal-corporatefunctions img#hero {margin-bottom:40px;}		

	body#cal-catering #overlay {
		background:transparent url(../../images/img-overlay-corporate.jpg) top left no-repeat;
		height:165px;
		position:absolute;
		right:20px;
		top:276px;
		width:245px;
		}		

	body#cal-corporatefunctions #overlay {
		background:transparent url(../../images/img-overlay-corporate.jpg) top left no-repeat;
		height:165px;
		position:absolute;
		right:20px;
		top:280px;
		width:245px;
		}		

	body#cal-caf #overlay {
		background:transparent url(../../images/img-overlay-cafe.jpg) top left no-repeat;
		height:165px;
		position:absolute;
		right:20px;
		top:280px;
		width:245px;
		}	

    body#cal-caf .wrapper 
    {
        padding-bottom: 20px;
    }
    
	body#cal-catering #overlay {
		background:transparent url(../../images/img-overlay-catering.jpg) top left no-repeat;
		height:165px;
		position:absolute;
		right:20px;
		top:280px;
		width:245px;
		}	

	body#cal-weddings #overlay {
		background:transparent url(../../images/img-overlay-weddings.jpg) top left no-repeat;
		height:165px;
		position:absolute;
		right:22px;
		top:280px;
		width:245px;
		}	

	body#cal-contact #overlay,
	body#cal-mailinglist #overlay {
		background:transparent url(../../images/img-overlay-contact.jpg) top left no-repeat;
		height:195px;
		position:absolute;
		right:20px;
		top:243px;
		width:195px;
		}	

	body#cal-privateevents #overlay {
		background:transparent url(../../images/img-overlay-private.jpg) top left no-repeat;
		height:165px;
		position:absolute;
		right:20px;
		top:277px;
		width:245px;
		}

	.column {
		float:left;
		margin-right:10px;
		width:343px;
		}
		
	.wide {
	    width: 940px;
	    padding-right: 20px;
	}

	.first {margin-left:15px;clear:left;}

	.narrow {
		width:112px;
		margin-right:0;
		margin-top:130px;
		}

	.divider {
		background:transparent url(../../images/img-divider.gif) 0 10px no-repeat;
		clear:both;
		height:2px;
		margin:0 15px 0 20px;
		height:32px;
		width:685px;
		}

	.pdf {
		background:transparent url(../../images/icon-pdf-large.gif) 15px 0 no-repeat;
		padding-left:56px;
		width:287px;
		}
		
	.polaroid {background:transparent url(../../images/bg-polaroid.gif) left top no-repeat;}	
	.polaroid img {margin:5px 5px 15px 5px;}

	.column h2 {margin:40px 0 45px 15px;}
	
	.column h3 {
		color:#af212d;
		font-size:1.8em;
		line-height:1.4;
		margin:0 15px 10px 15px;
		}		

	.column h4 {
		color:#b10034;
		font-family:arial, "helvetica neue", helvetica, "liberation sans", tahoma, verdana, "bitstream vera sans", san-serif;
		font-size:1.4em;
		line-height:1.5;
		margin:10px 15px 0 15px;
		}			

	.column h4 img {margin:0 0 6px 0;}

	.column p {
		color:#663333;
		font-family:arial, "helvetica neue", helvetica, "liberation sans", tahoma, verdana, "bitstream vera sans", san-serif;
		font-size:1.1em;
		line-height:1.5;
		margin:0 15px 10px 15px;
		}				
	
	.column h5 {
		color:#b10034;
		font-size:1.3em;
		font-style:italic;
		margin-bottom:5px;
		}

	.column ol li {
		color:#996666;
		font-family:arial, "helvetica neue", helvetica, "liberation sans", tahoma, verdana, "bitstream vera sans", san-serif;
		font-size:1em;
		line-height:1.5;
		}				

	.narrow p {
		color:#996666;
		margin:0 0 5px 0;
		line-height:1.5;
		}
		
	.compact {
		background-position:15px 20px;
		padding-top:20px;
		}

	.add-divider {
		background:transparent url(../../images/img-divider.gif) 10px 0 no-repeat;
		padding-top:0px;
		}

	#ssp {
		background: transparent url(../../images/bg-gallery.gif) no-repeat top left;
		height:549px;
		width:689px;
		position:absolute;
		top:20px;
		right:20px;
		padding-top: 6px;
		padding-left: 6px;
		}
		
	body#cal-gallery #section-a .wrapper {height:570px;}

/*	Mailing List Form --------------------------------------------------------*/		

	.mailinglistform {
		background:#fcf9f2 url(../../images/bg-mailinglist.gif) left bottom no-repeat;
		border-top:1px solid #f3e8ce;
		float:left;
		margin-left:5px;
		padding:20px 20px 10px 20px;
		width:175px;
		}

	.mailinglistform h2 {margin-bottom:5px;}

	.mailinglistform p {
		color:#996666;
		font-family:arial, "helvetica neue", helvetica, "liberation sans", tahoma, verdana, "bitstream vera sans", san-serif;
		font-size:1.1em;
		line-height:1.5;
		margin:0 0 10px 0;
		}			
		
	.mailinglistform em {color:#cc9999;}

	.mailinglistform label {
		color:#996666;
		display:block;
		font-family:arial, "helvetica neue", helvetica, "liberation sans", tahoma, verdana, "bitstream vera sans", san-serif;
		font-size:1.1em;
		line-height:1.5;
		margin:10px 0 0px 0;
		}
		
	.cm-name, .cm-email {
		display:block;
		margin:0;
		margin-bottom:5px;
		padding:2px;
		width:170px;
		}
		
	.cm-email {margin-bottom:10px;}
	
	.btn-join {
		float:left;
		margin-right:10px;
		}
		
	.mailinglistform .details {padding:3px 0;}


/*	Footer -------------------------------------------------------------------*/

	#footer {
		background:transparent url(../../images/bg-footer.jpg) center 35px no-repeat;
		padding:25px 0 30px 0;
		}
		
	#footer h5 {margin:0 0 5px 30px;}
		
	#footer p {
		color:#666666;
		font-family:arial, "helvetica neue", helvetica, "liberation sans", tahoma, verdana, "bitstream vera sans", san-serif;
		font-size:1.1em;
		line-height:1.5;
		}
		
	#footer strong {color:#333333;}
		
	#details {
		float:left;
		margin-right:85px;
		width:440px;
		}

	#details p {margin-left:30px;}
		
	#fineprint {
		float:left;
		padding-top:17px;
		width:430px;
		}	
		
	#fineprint p {color:#999999;}
	
	#fineprint img {margin-right:3px;}
	
	.credit:link,
	.credit:visited {
		color:#999999;
		text-decoration:none;
		}
		
	.invisiblelink:focus, .invisiblelink:hover, .invisiblelink:active {color:#af212d;}
	
/*	Contact form -------------------------------------------------------------*/
    #contact-form .c-imagever,
    #mailing-form .c-imagever {
        height: 20px;
        font-weight: bold;
        padding: 2px 5px;
        font-size: 18px;
    }
    
    #contact-form .c-img,
    #mailing-form .c-img {
        vertical-align: middle;
    }
    
    #contact-form .tblimgver,
    #mailing-form .tblimgver {
        margin-top: -10px;
        margin-bottom: 20px;
    }
    
    #contact-form .valerror,
    #mailing-form .valerror {
        border: 1px solid #99042e;
        padding: 10px 10px 0px 10px;
        margin: 5px 15px 10px;
    }

    #contact-form .valerror ul,
    #mailing-form .valerror ul {
        margin-bottom: 10px;
        margin-left: 20px;
        list-style-type: square;
		font-family:arial, "helvetica neue", helvetica, "liberation sans", tahoma, verdana, "bitstream vera sans", san-serif;
		font-size: 1.1em;
		line-height: 1.5;
    }
    
    #contact-form table,
    #mailing-form table {
        margin-left: 15px;
		font-family:arial, "helvetica neue", helvetica, "liberation sans", tahoma, verdana, "bitstream vera sans", san-serif;
		font-size: 1.1em;
		line-height: 1.5;
        color:#663333;
    }
    
    .shroud {
        background-color: #000;
        opacity: .75;
        -moz-opacity: .75;
        filter: alpha(opacity=75);
    }
    
    .popup {
        position: relative;
    }
    
    .btn-close {
        position: absolute;
        bottom: 10px;
        right: 15px;
    }
    
    #cal-home .mailinglistform {
        min-height: 180px;
    }
    
    #smallthings {
        width: 300px;
        position: absolute;
        top: 390px;
        left: 520px;
    }
    
    #map {
        float: right;
        margin-top: 50px;
        width: 480px;
        height: 315px;
        background: transparent url(../../images/bg-map.gif) no-repeat top left;
        padding: 6px 5px 25px 6px;
    }
    
    
    #cal-weddings #section-a .column
    {
        margin-right: 0;
    }
    
    #cal-weddings img#hero {
		margin-bottom:8px;
		}
		
#testimonials 
{
    padding-top: 20px;
}

#testimonials.column
{
    width: 100%;
}

#testimonials h4 
{
    margin-bottom: 10px;
}

#testimonials p 
{
    padding-bottom: 10px;
    border-bottom: solid 1px #e1e1e1;
}

#header .loyaltycard 
{
    position: absolute;
    top: 0;
    right: 0;
}