/*
Theme Name: Social Medium
Theme URI: http://www.socialmedium.nl/ 
Description: Wordpress template for Social Medium Website
Version: 1.0
Author: Joms Calma
Author URI: http://www.filipino-web.com/ 
*/

/*
blue        ::  25a8e0
grey        ::  ccc
dark grey   ::  999
black       ::  333333

*/

body {
    font: 62.5%/2em Verdana, Arial, Helvetica, sans-serif; 
    text-align:center;
    color:#666666;          
    background:url(images/wrap_bg.jpg);   
}
a {
    color:#333333;
    text-decoration:none;
}
a:hover {
    color:#000;
}
h1,h2,h3,h4,h5,h6 {
    color:#006995; 
    font-family:"Century Gothic", Arial, Helvetica, sans-serif;               
    font-weight:normal;
}
h1 {
 
}
h2 {
     
}
strong {
    font-weight:bold;
}
i,em {
    font-style:italic;
}


#wrap {
    
    border-top:5px solid #25a8e0; 
}
#container {
    width:960px;
    margin: 0 auto;
    text-align:left;
}


/****************************************************/
/******************* TOP BAR ************************/
/****************************************************/

#top {
    background:url(images/border.gif) repeat-x bottom left;
    padding-bottom:10px;
    position:relative;
    z-index:2;
}
#logo {
    float:left;    
    margin-top:16px;
}
#searchform {
    float:right;
    background:url(images/search_box.jpg) no-repeat;
    height:40px;
    width:280px; 
    margin-top:30px;
}
#searchform div {
   padding:4px 6px ; 
}
#searchform #s {
    width:185px;
    padding-left:10px;
    vertical-align:center;
    height:30px;
    border:0;
    background:url(images/search_input.jpg) no-repeat top left; 
    float:left;
    line-height:30px;
}
#searchform #search-btn {
    width:65px;
    height:30px;
    background:url(images/search_btn.jpg) no-repeat;
    border:0;
    margin-left:5px;
}





/****************************************************/
/***************** NAVIGATION ***********************/
/****************************************************/   


#nav {
    float:right;
    margin-top:25px;
    width:605px;
}

#nav li{
    display:inline;
    /*background: url('images/separator.gif') no-repeat top right;*/
    font-size:1.2em;   
}


/*** DEMO SKIN ***/
.sf-menu a {
    border-left:    1px solid #fff; 
    padding:         .75em 1em;
    text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    
}

.sf-menu ul ul {
    margin-left:-20px;
}
.sf-menu ul li a {
    font-size:0.75em; 
    border-bottom:1px solid #fff;
    color:#fff;
    
    border-right:    1px solid #fff;
}
.sf-menu li {
    /*background:        #BDD2FF; */
}
.sf-menu li li {
    background:        #24A8E6;
}
.sf-menu li li li {
    /*background:        #9AAEDB;     */
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu li.sfHover a, .sf-menu li.current_page_item a, .sf-menu li.current_page_ancestor a,  .sf-menu li.current_page_parent a, 
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background:        #24A8E6;
    outline:        0;
    color:#fff;
}

.sf-menu li li:hover, .sf-menu li li.sfHover, .sf-menu li li.sfHover a,
.sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
    color:#9aff00;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
    padding-right:     2.25em;
    min-width:        1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
    position:        absolute;
    display:        block;
    right:            .75em;
    top:            1.05em; /* IE6 only */
    width:            10px;
    height:            10px;
    text-indent:     -999em;
    overflow:        hidden;
    background:        url('images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top:            .8em;
    background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
a:hover > .sf-sub-indicator, .sf-menu li.current_page_item a > .sf-sub-indicator, .sf-menu li.current_page_parent a > .sf-sub-indicator{  /* give all except IE6 the correct values */
    top:            .8em;
    background-position: -10px -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
    background:    url('images/shadow.png') no-repeat bottom right;
    padding: 0 8px 9px 0;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
    background: transparent;
}


/****************************************************/
/********************* BANNER ***********************/
/****************************************************/

#banner {
    clear:both;
    position: relative;
}

#banner img {
    display:block;
}

#social-links {
    position:absolute;
    right:0;
    bottom:-35px;
}
#social-links img {
    margin-left:3px;
    display:inline;
}


/****************************************************/
/******************** MAINCONTENT *******************/
/****************************************************/
                
#main {
    background:url(images/top_rounded.jpg) no-repeat #fff;
}
#main a {
    color:#8EC742;
    font-weight:bold;
}

#maincontent {
    width:680px;
    float:left;
}
#maincontent .gutter {
    padding:35px 20px;
}
#maincontent h1 {
    font-size:2.4em;
    color:#006699;
    padding-bottom:20px;
    background:url(images/dot.gif) repeat-x bottom left;
    margin-bottom:25px;
}

#maincontent h2 {
    font-size: 2em;
     margin-bottom:10px;
}

#maincontent h3 {
    font-size: 1.7em;
     margin-bottom:10px;
}

#maincontent p, #maincontent ul, #maincontent ol,#maincontent table {
    margin-bottom:10px;
    font-size:1.2em;
}

#maincontent p *, #maincontent ul * {
	font-size:100%;
}

#maincontent table {
    width:100%;
    background:none repeat scroll 0 0 #F5F5F5;  
    border-left:1px solid #D3D3D3; 
    border-bottom:1px solid #D3D3D3; 
}

#maincontent table td,#maincontent table th {
    border-style:solid;
    border-color:#D3D3D3 #D3D3D3 #fff #fff;
    border-width:1px;
    padding:5px;
}

#maincontent table th {
    border-width:1px 0;
}

#maincontent ul li {
    padding-left:10px;
    background:url(images/list_circle.gif) no-repeat 0 8px;
}

#maincontent ol {
    list-style-type: decimal;
    margin:-5px 0 20px 10px;  
}

#maincontent img {
    border:1px solid #d3d3d3;
    padding:5px;
}

#maincontent ul {
    background:none repeat scroll 0 0 #F5F5F5;
    border:1px solid #D3D3D3;
    list-style:none outside none;
    margin:0px 10px 15px 30px;
    padding:15px 15px 15px 20px;
    clear:both;
}

#maincontent li p{
    font-size:100%;
}



/****************************************************/
/*********************** BLOG ***********************/
/****************************************************/

.post {
    background:url(images/dot.gif) repeat-x bottom left;           
    padding-bottom:20px;
    margin-bottom:20px;
}

#main .blog h2 a {
   color:#25a8e0; 
   font-weight:bold;
}

img.alignright {
    float:right;
    margin:2px 0 2px 5px;
}
img.alignleft {
    float:left;
    margin:2px 7px 2px 0;
}

#maincontent img.wp-smiley {
    padding:0;
    border:0;
}

#maincontent .post h1 {
   margin-bottom:8px;
   padding-bottom:0;
   background:none;
}

#maincontent small.post-info {
    display:block;
    padding:0 5px 10px;
    background:url(images/dot.gif) repeat-x bottom left;
    font-size:1.1em;
    margin-bottom:20px;
    font-weight:bold;  
}

#respond {
    padding-top:20px;
}

ol#commentlist {
    list-style-type:none;
    clear:both;
}

ol#commentlist li {
    margin-bottom:20px;
    border:1px solid #D3D3D3;
}

#commentlist li.even {
    background-color:#F5F5F5;
}

#commentlist li.pingback {
    padding:20px;
}

#commentlist li.comment {
    padding:5px 10px 30px 125px;
    clear:both;
}

#commentlist li.comment img.avatar {
    float:left;
    margin-left:-110px;
}   

#commentform {
    width:490px;
}

.navigation {
    text-align:right;
}




/******************* FRONTPAGE *********************/

#maincontent-full {
    background:url(images/border.gif) repeat-x; 
    padding-top:25px;
}

#maincontent-full div.intro{
    font-size:1.5em;
    font-family:"Century Gothic",Verdana, Arial, Helvetica, sans-serif; 
    padding:0 13px;
}


/****************************************************/
/********************** BOXES ***********************/
/****************************************************/

#boxes {
    margin-top:33px;
    
}
#boxes .box {
    width:310px;
    background:url(images/box_bg.jpg) no-repeat top center;
    padding:14px 0;
    float:left;
    margin:0 5px;
    font-size:1.2em; 
    color:#666666;
}
#boxes .box img, #boxes .box p{
    padding:0 14px;
}



/****************************************************/
/******************** SIDEBAR ***********************/
/****************************************************/

#sidebar {
    float:right;
    width:270px;
    margin:5px 5px 0 0;
}

#sidebar h3 {
    background:url(images/sidebar_header_bg.jpg) no-repeat;
    font-size:2em;
    color:#ccff00;
    padding:6px 5px 9px;
    margin:0 -10px 20px;  
}

#sidebar a {
    font-weight: bold;
}

#sidebar .side-box {
    margin-bottom:15px;
    padding:0 10px;
    font-size:1.2em;
}

#sidebar #social {
    text-align:center;
}

#sidebar ul li{
    display: block;
    padding-bottom:10px;
    margin-bottom:8px;
    background:url(images/dot.gif) repeat-x bottom left; 
}

#sidebar ul li.last {
    background:none;
}

#sidebar input.text {
    background:url(images/sidebar_input_bg.jpg) no-repeat;
    width:250px;
    height:30px;
    border:0;
    line-height:25px;
}
#sidebar textarea {
    background:url(images/sidebar_textarea_bg.jpg ) no-repeat;                  
    width:250px;
    border:0; 
    height:80px;
    padding-top:5px; 
}

#sidebar input.text, #sidebar textarea {
    font-family:Verdana, Helvetica, sans-serif;
    font-size:12px;
    color:#999999; 
    margin-bottom:5px;
    padding-left:5px;
}
#sidebar .img-btn {
    font-size:0;
    line-height:50px;
    text-indent:-9999px;
    border:0;
    background-repeat: no-repeat;
    
}
#sidebar #send {
    width:110px;
    height:30px;
    background-image:url(images/vestuur.jpg);
}

/****************************************************/
/********************* FOOTER ***********************/
/****************************************************/

#footer {
    width:960px;
    margin:auto;
    text-align: left; 
    padding:10px 0;
    clear:both;
}

#footer h3{
    color:#d34ba6;
    font-size:2.4em;
    margin:10px;
}

#footer h3 a {
    color:#d34ba6;
}
#testimonial, #contact {
    padding-bottom:20px;
}

#testimonial {
    width:645px;
    float:left;
    background-color: #edecec;  
}
#contact {
    background-color: #edecec;
    width:310px;
    float:right;
}
#contact p,#testimonial p  {
    padding-left:10px;
    font-size:1.2em;
     height:80px;
     overflow:auto;
}

#testimonial p {
    margin-left:26px;
    border-left:5px solid #c3c2c2;
}

#testimonial strong.client{
    background:url(images/arrow.gif) no-repeat 0 5px; 
    padding-left:15px;
}

#copyright {
    font-size:1.1em;
    text-align:right;
    color:#333;
    clear:both;
    padding-top:20px;
}

/****************************************************/
/******************** WP STYLES *********************/
/****************************************************/


img.centered, .aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
}

img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}

.alignright {
    float: right;
}

.alignleft {
    float: left;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}




/****************************************************/
/******************** UTILITIES *********************/
/****************************************************/ 

.clear {
    clear:both;
}

.gutter {      
    padding:0 10px;
}

div.aligncenter, p.aligncenter {
    text-align:center;
}

div.alignright, p.alignright {
    text-align:center;
}

 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}