@import url("./whitespace-reset.css");

body { 
    font-family: Alegreya, serif;
    background: #0f2b2f url('../../images/bg_top.jpg') 50% 0 no-repeat;}

p, h1, h2, h3, h4, h5, li { padding: 15px 40px 0;}
p, h1, h2, h3, h4, h5
h1, h2, h3, h4, h5 { font-weight: normal; }
p { line-height: 135%;
font-size: 18px;
color: #5e544a;
 }

h1 { font-size: 32px; color: #5e544a;}
h2 { font-size: 26px; color: #5e544a;}
h3 {
    font-variant: small-caps; text-transform:lowercase;
    letter-spacing: 1px;
    font-size: 27px; color: #5e544a;}
h4 { font-size: 20px; color: #5e544a;}

li > p { padding: 28px 0 0; }
    li :first-child { padding: 0; }
a, a:visited { color: #864134; outline: none;}

#li_page {
font-size: 18px;
color: #5e544a;
margin-left:32px;
}

.p_alt { line-height: 130%;
font-size: 16px;
        color: #BBBBBB;
 }


/**
 * This cotrols the eidth of th entire site and aligns it to the middle of the window
 **/
#sitewrapper { 
    width: 960px;
    position: relative;
    margin: 0 auto; }

#nav { 
    position: absolute;
    width: 839px;
    height: 71px;
    left: 60px;
    top: 378px;
    background: transparent url('../../images/bg_menu.png') 0 0 no-repeat; }
    /**
     * This style controls the 'centering' of the navigation. After adding an addional top-level li,
     * you would need to decrease padding-left. And on the contrary, if a top-level li is removed, you would
     * need to add padding-left;
     **/
    #nav ul.nav { padding-left: 90px; }
    #nav ul.nav > li {
position: relative;
float: left;
padding: 0;
border-top-left-radius:12px 12px;
}

#nav ul.nav > li, #nav ul.nav li.nav_open { border-top-right-radius: 15px 15px }

#nav ul.nav li.nav_close {
border-bottom-left-radius:12px 12px;
border-bottom-right-radius:12px 12px;}


#nav ul.nav a, #nav ul.nav a:visited { 
        display: block;
        padding: 5px 20px;
        color: #000000;

        text-decoration: none;
        font-weight: normal; font-size: 20px; }
        #nav ul.nav > li > a, #nav ul.nav > li > a:visited { padding: 10px 16px;}
        #nav ul.nav a:hover { color: #864134; }

    #nav ul.nav > li > ul {  
        position: absolute;
        left: 0;
        top: 100%;
        display: none;
        width: 260px;
        z-index: 1; }
        #nav ul.nav > li:hover { 
            z-index: 1; 

            /* Fallback for web browsers that doesn't support RGBa */
            background: rgb(247,235,222);
            /* RGBa with 0.6 opacity */
            background: rgba(247,235,222, 0.6); }
        /**
         * This tells the background menu to show
         **/
        #nav .nav > li:hover > ul { display: block;}
            /**
             * This is the default background cover of the drop down
             **/
            #nav .nav > li:hover > ul li { 
                /* Fallback for web browsers that doesn't support RGBa */
                background: rgb(122, 100, 64);
                /* RGBa with 0.6 opacity */
                background: rgba(247,235,222, 0.7); }

                /**
                 * this is the hover backgrond of the drop down menu
                 **/
                #nav .nav > li:hover > ul li:hover { 
                    /* Fallback for web browsers that doesn't support RGBa */
                    background: rgb(152,122,92);
                    /* RGBa with 0.6 opacity */
                    background: rgba(227,215,202, 0.9); }

        #nav .nav > li > ul > li { padding: 10px 5px;}

#sitecontainer {
    position: absolute;
    width: 100%;
    left: 0;
    top: 513px;}

/**
 * These styles are used to control the main content area of the site.
 **/
#content_wrapper { 
    float: left;
    width: 100%;
    background: transparent url('../../images/bg_content_middle.png') 0 0 repeat-y; }
    #content_container { 
        float: left;
        width: 100%;
        margin-bottom: -129px;
        background: transparent url('../../images/maincontent_end0.jpg') 0 100% no-repeat; }
    #content { 
        float: left;
        width: 100%;
        min-height: 500px;
        margin-top: -100px;
        padding-top: 130px;
        padding-bottom: 130px;
        background: transparent url('../../images/bg_contenttop.png') 0 0 no-repeat; }
        #content .column_container div:first-child p { padding-right: 0; }

/**
 * THis is the style section for the footr. p, a, h2-h3 styles are defined here
 **/
#footer {
clear: both;
float: left;
width: 990px;
margin: 130px 0 0 -100px;
min-height: 820px;
padding: 0 110px 0 100px;
color: #dbaf6a;
background: transparent url('../../images/bg_bottom.jpg') 0 100% no-repeat;
margin-top:-2px;
}
    #footer a, #footer a:visited { 
        color: #7b9394;
        font-style: italic;
        text-decoration: none; }
        #footer a:hover { text-decoration: underline; }
    #footer .column {width: 250px;}
    #footer li { padding: 10px 20px; }
    #footer p { padding-top: 12px; font-size: 15px; color: #b29c7e;}
    #footer h2 { 
        font-size: 20px; color: #e6c79c; padding-left: 20px;}
    #footer h3 { 
        letter-spacing: 1px;
        font-size: 17px; color: #d0b590;}
    #footer .column.first { padding-left: 100px; }


/**
 * This is the base style of the alternate backgrounds. Only width, margin and padding are defined here.
 * Bacground colors and images are going to be defined for each specific region under their own classes.
 *
 * The convention held for the alternate background (sliding door implementation) is as follows:
 *      wrapper > container > content
 *
 *      wrapper: contains the background for the area
 *      container: contains the footer background
 *      content: contains the header background
 **/
.alt_wrapper, .alt_container, .alt_content{ 
    float: left;
    width: 100%; }
    .alt_wrapper { margin: 70px 0 30px; }
    .alt_container{ margin-bottom: -56px; }
    .alt_content{
color: #FFFFFF;
margin-top: -38px;
padding: 80px 0 90px;
}





/**
 * These are the background styles for the alternate red background
 **/
.alt_bg_red{ background: #A60216 url('../../images/alternatecontent1_bg.jpg') 0 0 no-repeat; }
    .alt_bg_red .alt_container{background: transparent url('../../images/alternatecontent1_footer.png') 0 100% no-repeat;}
    .alt_bg_red .alt_content{color: #00FF00; background: transparent url('../../images/alternatecontent3_header.png') 0 0 no-repeat;}
    .alt_bg_red a, .alt_bg_red a:visited {color: #ECB955;}
	.alt_bg_red p { color: #d9cdbc; }
	.alt_bg_red h1 { color: #d9cdbc; }
	.alt_bg_red h2 { color: #d9cdbc; }
	.alt_bg_red h3 { color: #d9cdbc; }
	.alt_bg_red h4 { color: #d9cdbc; }


/**
 * These are the background styles for the alternate black background
 **/
.alt_bg_black{
background: #0B1D22 url('../../images/alternatecontent2_bg.jpg') 0 0 no-repeat;
background-repeat:repeat-y;
}
    .alt_bg_black .alt_container{ background: transparent url('../../images/alternatecontent1_footer.png') 0 100% no-repeat;}
    .alt_bg_black .alt_content{ background: transparent url('../../images/alternatecontent3_header.png') 0 0 no-repeat; }
    .alt_bg_black a:visited { color: #C36E3A; }
	.alt_bg_black p { color: #9b9081; }
	.alt_bg_black h1 { color: #9b9081; }
	.alt_bg_black h2 { color: #9b9081; }
	.alt_bg_black h3 { color: #9b9081; }
	.alt_bg_black h4 { color: #9b9081; }


/**
 * These are the background styles for the alternate darker paper background
 **/
.alt_bg_altpaper{ background: #0B1D22 url('../../images/alternatecontent3_bg.jpg') 0 0 no-repeat; }
    .alt_bg_altpaper .alt_container{ background: transparent url('../../images/alternatecontent1_footer.png') 0 100% no-repeat;}
    .alt_bg_altpaper .alt_content{ background: transparent url('../../images/alternatecontent3_header.png') 0 0 no-repeat; }
    .alt_bg_altpaper a:visited { color: #C36E3A; }
	.alt_bg_altpaper p { color: #5e544a;}
	.alt_bg_altpaper h1 { color: #5e544a;}
	.alt_bg_altpaper h2 { color: #5e544a;}
	.alt_bg_altpaper h3 { color: #5e544a;}
	.alt_bg_altpaper h4 { color: #5e544a;}
	
	
	
/**
 * These are the background styles for the alternate darker paper background
 **/
.alt_bg_altpaper2{ background: #0B1D22 url('../../images/alternatecontent4_bg.jpg') 0 0 no-repeat; }
    .alt_bg_altpaper2 .alt_container{ background: transparent url('../../images/alternatecontent1_footer.png') 0 100% no-repeat;}
    .alt_bg_altpaper2 .alt_content{ background: transparent url('../../images/alternatecontent3_header.png') 0 0 no-repeat; }
    .alt_bg_altpaper2 a:visited { color: #C36E3A; }
	.alt_bg_altpaper2 p { color: #513f2a;}
	.alt_bg_altpaper2 h1 { color: #513f2a;}
	.alt_bg_altpaper2 h2 { color: #513f2a;}
	.alt_bg_altpaper2 h3 { color: #513f2a;}
	.alt_bg_altpaper2 h4 { color: #513f2a;}	


/**
 * This is the container for columns that are in the Content area of the page, #content.
 **/
.column_container { 
    float: left;
    clear: both;
    width: 100%;}
/**
 * A column is simply flloated left so thy stack side-by-side.
 **/
.column { float: left; }
    .col_wide { width: 60%; }
    .col_narrow { width: 40%; }

.column_equal { float: left; }
    .col_equal { width: 50%; }

/** newsletter form
 **/



.frm_newsletter p {
	margin-bottom:0;
}

.frm_newsletter input[name=submit]{
    border: none;
    background: transparent; }

.frm_newsletter .forminputtext {
width: 112px;
height: 37px;
background: url(../../images/inputbox.png) no-repeat;
border: none;
padding: 0px 20px 0px 9px;

outline: none;


}

#hdr_newsletter_signup { 
    position: absolute;
    width: 295px;
    height: 55px;
    left: 337px;
    top: 328px;}
    #hdr_newsletter_signup.frm_newsletter input[name="submit"] { margin-left: 82px; }

.footer_image{ margin-left: -100px; }

/**
 * Contact form fields
 **/

#c_form .form-button {
	color:#645033;
	font-family:Alegreya, serif;
	font-size:14px;
	height:14px;
	width:148px;
	background-image:initial;
	background-attachment:initial;
	background-origin:initial;
	background-clip:initial;
	background-color:#DCC1A3;
	background-repeat-x:no-repeat;
	background-repeat-y:no-repeat;
	background-repeat:no-repeat;
	border:3px solid #A86B4D;
	padding:13px;
}

#c_form #form-button1, #c_form .form_button {
	color:#645033;
	font-family:Alegreya, serif;
	font-size:12px;
	background-image:initial;
	background-attachment:initial;
	background-origin:initial;
	background-clip:initial;
	background-color:#ECD8C4;
	background-repeat-x:no-repeat;
	background-repeat-y:no-repeat;
	background-repeat:no-repeat;
	border:1px solid #A86B4D;
    margin-top: 10px;
    padding: 4px 10px;
}

#c_form #form-button2 {
	display:block;
	font-family:Alegreya, serif;
	color:#645033;
	font-size:12px;
	height:21px;
	width:90px;
	background-image:initial;
	background-attachment:initial;
	background-origin:initial;
	background-clip:initial;
	background-color:#DCC1A3;
	background-repeat-x:no-repeat;
	background-repeat-y:no-repeat;
	background-repeat:no-repeat;
	border:1px solid #A86B4D;
	padding:1px;
}

input, select, textarea {
	padding: 3px 5px;
	font-family:Alegreya, serif;
	font-size: 100%;
    	background: #DCC1A3;
	border: 1px solid #ECDAC5;
	color: #645033; 
    }


/*

.frm_newsletter input, .frm_newsletter  select, .frm_newsletter textarea, .frm_newsletter .inputbox {
	padding: 3px 5px;
	font-family:Alegreya, serif;
	font-size: 100%;
    	background: #DCC1A3;
	border: 1px solid #ECDAC5;
	color: #645033;
}

*/


/**
 * This is a class used to generically clear anything that is floated.
 * This will help items wrap to a new line when needed.
 **/

.clearer {
	clear:both;
}

/*
 * ADD THIS OVERRIDES
 * */

.addthis_button_tweet { margin-left: -10px; }
.addthis_button_pinterest_pinit { margin-left: -25px; }


/*
 * Class Helpers
 * */
p.normal_first { margin-top: -25px; }


/*
 * Studio and wedding images styling
 * */

img[src^="images_studio"] {
  border: 1px solid #000000;
margin-bottom:20px;
}

img[src^="images_about"] {
  border: 1px solid #000000;
margin-bottom:20px;
}


/*
 * Blog feed styles
 * */

#creditfooter { padding-left: 40px; }

.blog a, .blog a:visited, .blog_comments a, .blog_comments a:visited { 
    text-decoration: none; }
.blog .feedTitle { 
    padding-left: 40px;
    font-size: 30px; }

.blog .headline { font-size: 28px }
.blog p { padding-left: 0 }
.blog li > p.date { 
    padding: 0 0 10px; }
.blog img { marign-top: 10px; }

.blog a[rel='nofollow'] img { display: none; } 

/*
 * Blog comment styles
 * */
.blog_comments .feedTitle { font-size: 24px; }
.blog_comments .headline { font-size: 18px; }
.blog_comments .feedItemAuthor { 
    font-size: 14px;
    padding: 0; }
.blog_comments .date { 
    padding: 0 0 5px;
    font-size: 12px; }
.blog_comments li { padding-bottom: 20px; }