/*

Theme Name: Urban Forum
Theme URI: http://urbanforum.ca
Description: Web site for Urban Forum.
Author: Chris Warden
Author URI: http://cjwprogression.ca/
Version: 2.2

*/

/* ============================================================
    Text
============================================================ */

/*orange: #E16438; 

*/ 


body {
    color:#000;
    font:1em 'museo_sans_500regular', Arial, helvetica, sans-serif; /* 16px */
    line-height: 1.1em
   -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    margin:0 auto;
}

a, a:visited {color:#E16438; text-decoration:none; border-bottom: 0.0625em #E16438 dotted;}

a:hover {color:#757575; text-decoration:none; border-bottom: 0.0625em #414141 dotted;}


h2, h3, h4, .sponsors, .home-info-title, .urban, .urban-date {font-family:'museo_sans_500regular','bebas_neueregular', sans-serif; font-weight:normal; line-height: 1.1em;}
h2, h3, h4, .sponsors, .urban-date {font-family:'bebas_neueregular', sans-serif;}
.urban {font-family:'boston_trafficregular', sans-serif; background-color: white; padding:  10px;}
h3, h4 {color:#414141;padding:0; margin: 0;}

h2 {color:#000; font-size:2.5em;/* 40px */ padding: 0; margin:0;}

h3 {font-size: 1.875em; /* 30px */}

h4 {font-size: 1.25em; /*20px */}

.widgettitle {font-size: 1.25em; /* 30px */ color:#414141; font-weight:normal;}
.widget ul {list-style:none; text-decoration:none;}
.widget ul li {list-style:none; text-decoration:none;}

/*Styles for Urban Forum Header text*/
.urban {color:#E16438; font-size: 3.75em; float:left;}
.urban-date {color:#757575; font-size: 2.5em;float:left; padding-top: .5em; padding-left: .125em}


.sponsors {font-size: 1.3em; /*21px */ color: #FFF; padding-bottom:0.75em; padding-top:0.1em;}
.sponsors a {display: inline-block;}
.home-info-title {float: left; font-size: 1.875em; /* 30px */ padding: 0 0.3175em 0.3175em 0; color:#757575}



nav ul {
    list-style:none; 
}


.flickr-pics ul {
    list-style:none; 
}

/* ============================================================
    Layout
============================================================ */

body {
    position:relative;
    background-color: #FFF;
}


/* --------- 1. General Structure --------- */
#container {width: 96%;padding: 0;margin:2%;}
#announce-container {padding: 1em 2% 3.75em 95px; background-color: #E16438;
        width: -moz-calc(98% - 95px);
        width: -webkit-calc(98% - 95px);
        width: calc(98% - 95px);                              
}

#announce-container a {color: white;}
.announce-text {width: 1105px;}

#title-container {margin: -3.75em 0 1em 95px; padding:10px 10px 10px 0; width: 1085px; position: relative;}

#width-surround {width: 1200px;}

#left-container {
	width:61%;
	padding: 0 2.5% 1em 2.5%;
	float: left;
}



#home-right {width:32.5%; padding: 0 .5% 0 0;float: left;}



#tops {width:98%; padding: 0 2% 0 0;float: left;}

#past-title {padding: 0.3125em; margin: 0 0.5% 0.3125em 0; float:left; width:96%}

#columns-surr-home {border: 0.125em #414141 dotted; padding: 0.3125em 5%; margin: 0 0 0.3125em 0; float:left; width: 90%}

#columns-surr-about {border: 0.125em #414141 dotted; padding: 0.3125em; margin: 0 0.5% 0.3125em 0.5%; float:left; width: 47%}

#columns-surr-archive {border: 0.125em #414141 dotted; padding: 0.25em .5%; margin: 0 0.25% 0.3125em 0.25%; float:left; width: 29.5%}

#columns-surr-footer {border: none; padding: 0.45em; margin: 0 0.5% 0.3125em 0.5%; float:left; width: 47%}

#footer-base {width: 100%; padding-top: 0.3125em;}

.spacer-75 {margin-top: .3125em; width:100%;}

#sponsor-surround{padding-bottom: .5em;}

.sponsor-image-frame {float:left; width: 20%; padding: 0.3125em; margin: 0.3125em; border: none}

.sponsor-image-empty {float:left; width: 20%; padding: 0.3125em; margin: 0.4625em;}

.sponsor-image {width: 98%; padding: 0.3125em 1%; background-color:white;}

.mason {}

#top-surround {background-color: #E16438; width: 100%;}
#top-full { min-height: 2.5em; height: auto; padding: 0 2% 0.25em 2%; margin-bottom:1em; background-color:#414141; float: left; position: relative;
width: -moz-calc(96% - 95px);
width: -webkit-calc(96% - 95px);
width: calc(96% - 95px);
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.5);
box-shadow: 0 5px 5px rgba(0,0,0,0.5);}

#logo-image {width:75px; float: left; background-color: #E16438; padding: 0.25em 10px; }
.image-urban {width:100%;}
#logo-image a:hover {border-bottom: none;}

#top-social {float:right; padding-top: 0.5em;}
.top-left {float:left; padding-top:.75em; width:45%; position: relative;}
.top-hash {float:left;}
.top-right {float:right; width: 54%; position: relative;}
#top-search {float:right; padding-right:1%;}
	

.social-button {width:1.5em; height:1.5em;}

.social-button a, .social-button a:visited {text-decoration:none; border-bottom:0; opacity: 0.6;}
.social-button a:hover  {text-decoration:none; border-bottom:0; opacity: 1;}

.social-image {width:100%; text-decoration:none; border:none;}

#top-social ul {
	text-decoration:none;
	margin:0px; padding:.3125em 0 0 .3125em;
}
#top-social ul li {
	text-decoration:none;
	display:inline;
	margin-left:.25em;
	margin-top: .25em;
	float:right;
}

.top-menu {float:left;}
.top-menu ul {text-decoration:none;
	margin:0; padding:.3125em 0 0 .3125em; right:0px;
}

.top-menu li {
	text-decoration:none;
	display:inline;
	margin-left:.75em;
	margin-top: .25em;
	}


.top-menu li a, .top-menu li a:visited {color:#fff; border:none; }

.top-menu li a:hover {color:#757575; text-decoration:none; border:none; }

.arrow {width: 1.875em; float:left; padding-top:0.125em}
.arrow-img {width:100%;}


#about-surround {width: 96%; padding: 0 2%;}


.past-list ul {
	text-decoration:none;
	margin:0px; padding:.3125em 0 0 .3125em;
	right:0px;
}
.past-list ul li {
	text-decoration:none;
	display:inline;
	margin-left:.25em;
	margin-top: .25em;
}

/*Styling for links_uf*/
#links_uf {margin-top: 1em;}
#links_uf .linkcat, #links_uf .blogroll {text-decoration: none; list-style-type: none;}
#links_uf ul {padding-bottom: 10px;}
#links_uf .blogroll li {text-decoration: none; padding-top: 5px;}

/*Styling for input boxes*/
#mc_signup_submit {background-color: #949494;}
#mc_signup_submit:hover {background-color: #7a7a7a;}
input[type="text"] {background-color: #eeeeee; border: none; padding: 0.5em;}
input[type="submit"] { color: white; border: none; padding: 0.5em; width:  50%; cursor: pointer;}
/*Search form styling*/
#searchform #s {background-color:#515151; color:#FFF; border: 1px solid #515151; outline:0; font-size:1em; font-weight:normal;width: 250px;}

/*Images */
img {
	max-width: 100%;
}

img a, img a:hover, img a:visited {
	text-decoration:none;
	border-bottom: 0;
}

/*Hidden Text */
.hidden {display: none;}

/*Lightbox plug-in */
#hoverNav a{border-bottom: 0;}
#prevLink:hover, #prevLink:visited:hover { border-bottom: 0; }
#nextLink:hover, #nextLink:visited:hover {border-bottom: 0;}


.slickr-flickr-gallery img {  border: none;  }
.slickr-flickr-gallery img.hover { background-color:#E16438; border-bottom: 0;}
.slickr-flickr-gallery a, .slickr-flickr-gallery a:visited {border-bottom: 0;}
.slickr-flickr-gallery {padding: 0 .5em;}


.widget  {list-style-type: none; list-style: none;}


@media screen and (max-width: 1200px){
    #tops {width:100%; padding:0;}
    #width-surround {width: 100%;}  
    .announce-text {width: 100%;}
    #title-container {margin: -3.75em 0 1em 10px; padding:10px 10px 10px 0; position: relative;
        width: -moz-calc(100% - 20px);
        width: -webkit-calc(100% - 20px);
        width: calc(100% - 20px);                                     
    }
    #announce-container {padding: 1em 2% 3.75em 10px;
        width: -moz-calc(98% - 10px);
        width: -webkit-calc(98% - 10px);
        width: calc(98% - 10px);                              
}   
}



@media screen and (max-width: 1024px){
    #left-container {width:95%}
    #home-right {width:97.5%;padding-right: 2%}
    #columns-surr-about {width: 98%;}
    #columns-surr-archive {width: 46%;}
    #columns-surr-footer {width: 98%;}
    #columns-surr-home {margin: 0 0.5% 0.3125em 0.5%; width: 90%}
}


@media screen and (max-width: 768px){
#columns-surr-archive {width: 94%;}
#title-container {margin: -3.75em 0 1em 2%; padding:.75em 2% .75em 2%; width: 94%; position: relative;}
#top-social {float:none; text-align: center; width: 100%; position: relative;}
.top-left {float:left; padding-top:.1em; width:100%; position: relative;}
.top-right {float:left; width: 100%; position: relative;}
#top-search {float:left; padding: .1em 1% .5em 1%; width: 96%}                  
.top-menu {width:100%;text-align:center;} 
#top-social ul li {float: left;}                 
}

@media screen and (max-width: 500px) {
	h2 {color:#000; font-size:1.8em;}
	h3 {font-size: 1.25em;}
	h4, .sponsors {font-size: 1.1em;}
	.urban {font-size:2.5em;}

}