﻿body
{
    font-size: 85%;
    margin: 0;
}

#page 
{
	position: relative;	
	width: 100%;
}

#header 
{
	padding: 10px 0;
}

#footer {
    clear: both;
    padding: 20px 0 40px 0;
}

#content-section, #header-content, #page-footer-section, #menu-content, #footer-content, #feature-section
{
	width: 1000px;
    max-width: 100%;
    min-width: 300px;
	margin: 0 auto;            
}

.widescreen #content-section, .widescreen #header-content, .widescreen #page-footer-section, .widescreen #menu-content, .widescreen #footer-content, .widescreen #feature-section
{
	width: 1240px;
}

#content-section 
{
    margin-top: 20px;    
}

#content-section 
{
    margin-top: 20px;    
}

#header-content 
{
    position: relative;
}

#content-frame {
    padding: 20px;
}

#page-footer-section {
    clear: both;
}

#page-footer-frame {
    padding: 20px 0;
}

.responsive-frame {
    padding: 0 20px;
}

.layout-content-sidebar #main-content
{
    float: left;
	width: 66.66%;
}

.layout-content-sidebar #sidebar-content 
{
	width: 280px;
	float: right;
}

.layout-nav-content #content-frame,
.layout-blog #content-frame {
    margin-left: 220px;
}

#side-menu {
    float: left;
    width: 200px;
    margin-bottom: 20px;
}

.gallery-group-back-link {
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.9em;
    display:block;
    margin-bottom: 1em;
}

#menu {
    padding: 12px 0;
    font-size: 1.2em;
}

#menu ul 
{
	list-style-type: none;
	margin: 0 auto;
	padding: 0;        
}

#menu li
{
	margin: 0;
	padding: 0;
	display: inline-block;
    position: relative;
    outline: none;

    *display: inline;
    *zoom: 1;
}

#menu li a 
{
	text-decoration: none;
	display: inline-block;
    padding: 2px;
	margin: 0 20px 0 0;
    outline: none;
}

#menu li.current a
{	
}

#menu li:hover a
{	
}

/* sub menu */

#menu ul li ul
{
	display: none;
}

#side-menu {
}

#side-menu ul 
{
	list-style-type: none;
	margin: 0 auto;
	padding: 0;        
}

#side-menu li
{
	margin: 0 0 1px 0;	
	display: block;
    position: relative;
}

#side-menu li a 
{
    padding: 10px;
	text-decoration: none;
	display: block;
}

/* Footer Menu Links */
#footer-menu {
    font-size: 1.1em;
}

#footer-menu ul 
{
	list-style-type: none;
	margin: 0 auto;
	padding: 0;        
}

#footer-menu li
{
	margin: 0;
	padding: 0;
	display: inline-block;
    position: relative;
    outline: none;

    *display: inline;
    *zoom: 1;
}

#footer-menu li a 
{
	text-decoration: none;
	display: inline-block;
    padding: 2px;
	margin: 0 15px 10px 0;
    outline: none;
}

#footer-menu li a:hover {
    text-decoration: underline;
}

.social-media-icons {
    position: absolute;
    right: 20px;
    top: 20px;
    background-color: #f2f2f3;
    padding: 12px;
}

.social-media-icons a {
    display: block;
    float: left;
    width: 25px;
    height: 25px;
    font-size: 15px;
    line-height: 22px;
    background: #8d8a89;
    margin-right: 3px;
    text-align: center;
    overflow: hidden;
    border-radius: 3px;
    color: #fff !important;
    text-decoration: none;
    text-indent: -500px;
    background-position: center center;
    background-repeat: no-repeat;
}

    .social-media-icons a:hover
    {
        background-color: #666;
    }

    .social-media-icons .facebookIcon {
        background-image: url(images/social/facebook.png);
    }

    .social-media-icons .twitterIcon {
        background-image: url(images/social/twitter.png);
    }

    .social-media-icons .youtubeIcon {
        background-image: url(images/social/youtube.png);
    }

    .social-media-icons .pinterestIcon {
        background-image: url(images/social/pinterest.png);
    }


@media only screen and (max-width: 980px) { .responsive-main-content { width: 65% !important; } }
@media only screen and (max-width: 940px) { .responsive-main-content { width: 63% !important; } }
@media only screen and (max-width: 900px) { .responsive-main-content { width: 60% !important; } }
@media only screen and (max-width: 850px) { .responsive-main-content { width: 58% !important; } }
@media only screen and (max-width: 800px) { .responsive-main-content { width: 56% !important; } }
@media only screen and (max-width: 760px) { .responsive-main-content { width: 53% !important; } }

@media only screen and (max-width: 1225px) { .widescreen .responsive-main-content { width: 67% !important; } }
@media only screen and (max-width: 1100px) { .widescreen .responsive-main-content { width: 62% !important; } }
@media only screen and (max-width: 980px) { .widescreen .responsive-main-content { width: 60% !important; } }
@media only screen and (max-width: 940px) { .widescreen .responsive-main-content { width: 58% !important; } }
@media only screen and (max-width: 900px) { .widescreen .responsive-main-content { width: 55% !important; } }
@media only screen and (max-width: 850px) { .widescreen .responsive-main-content { width: 52% !important; } }
@media only screen and (max-width: 800px) { .widescreen .responsive-main-content { width: 50% !important; } }
@media only screen and (max-width: 760px) { .widescreen .responsive-main-content { width: 47% !important; } }


@media only screen and (max-width: 720px) {

    #side-menu {
        float: none;
        width: 100%;
    }

    .layout-nav-content #content-frame,
    .layout-blog #content-frame {
        margin-left: 0;
    }

    .layout-homepage #homepageMainContent,
    .layout-content-sidebar #main-content {
        width: 100% !important;
        float: none;
    }
    .layout-homepage #homepageSidebarContent,
    .layout-content-sidebar #sidebar-content {
        width: 100% !important;
        float: none;
        margin-top: 20px;
    }
    
}

