/* This File Contains All Responsive CSS - Sweet! */

/* Custom Drop-Down
================================================== */
#navigation select{ cursor: pointer; color: #555; }
#navigation .selector option{ background:#fff; color: #555; padding: 5px; border-bottom: 1px solid #eee; }
#navigation .selector, 
#navigation .selector span{ cursor: pointer !important; background:url("images/drop-arrows.png") 95% center no-repeat;  -webkit-font-smoothing:antialiased; }
#navigation .selector, 
#navigation .selector *{ margin:0; padding:0; }
#navigation .selector select{ top:0px; left:0px; }
#navigation .selector{ width:97%;  font-size:12px;  font-weight:bold; }
#navigation .selector span{ cursor:pointer; color: #555; }
#navigation .selector{ height: 30px; line-height: 30px; display:-moz-inline-box;  display:inline-block;  vertical-align:middle;  zoom:1;  *display:inline; }
#navigation .selector select:focus{outline:0; }
#navigation .selector{ position:relative;  padding-left:10px;  overflow:hidden; }
#navigation .selector span{ display:block;  overflow:hidden;  text-overflow:ellipsis;  white-space:nowrap; }
#navigation .selector select{ position:absolute;  height:35px;  background:none;  width:97%; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;  font-size:12px;  font-weight:500;  border:0 !important; }

/* General
================================================== */
img { max-width: 100% }
#single-portfolio-meta li { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; }
/*hide redundant menu*/
#navigation select,
#navigation .selector { display: none; }

/* Apply To All Responsive Layouts
================================================== */
@media only screen and (max-width: 959px) { 
	#navigation{ height: 32px; cursor: pointer;  display: inline-block; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));background: -moz-linear-gradient(top, #fff, #f5f5f5);background: -o-linear-gradient(top, #fff, #f5f5f5);background-color: #f5f5f5;font-family: 'Helvetica', Arial, sans-serif;font-size: 12px;font-weight: bold;line-height: 14px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px; border: 1px solid #ccc; width:250px; -webkit-box-shadow: 0 0 4px rgba(0,0,0,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.1); box-shadow: 0 0 4px rgba(0,0,0,.1);}
	#navigation:hover{ border-color: #999; -webkit-box-shadow: 0 0 4px rgba(0,0,0,.2); -moz-box-shadow: 0 0 4px rgba(0,0,0,.2); box-shadow: 0 0 4px rgba(0,0,0,.2);}
}

/* #Tablet (Portrait - Ipad)
================================================== */
/* Note: Design for a width of 770px */
@media only screen and (min-width: 768px) and (max-width: 959px) { 
    /*display dropdown nav*/
	#navigation .selector,
	#navigation select { display: inline-block; }
	#navigation{ position: absolute; right: 0; top: 50%; margin-top: -16px; }
	.sf-menu { display: none }
    /*main */
    #wrap { width: 770px }
    .post { width: 500px }
    #sidebar { width: 190px }
    img.alignleft, img.alignright { max-width: 50% !important }
    /*header*/
    #logo { float: none }
    /*home*/
    .hp-highlight { width: 165px }
    .home-entry { width: 165px }
    /*slider*/
    #full-slides .prev, #full-slides .next { height: 80px; line-height: 80px; margin-top: -40px; }
    /*services*/
    #service-content { width: 450px }
    #service-content img { max-width: 100% }
    /*portfolio + gallery*/
    .portfolio-item, .gallery-photo { width: 180px }
    #portfolio-by-category-wrap .portfolio-category { margin-right: -35px }
    #portfolio-by-category-wrap .portfolio-category .heading { margin-right: 35px }
    #portfolio-by-category-wrap .portfolio-category .portfolio-item:last-child { display: none }
    #single-portfolio-left { width: 350px }
    #single-portfolio-right { width: 340px }
    #full-portfolio-content { width: 430px }
    /*staff*/
    .staff-member { width: 165px }
    /*blog*/
    .loop-entry-left { width: 165px }
    .loop-entry-right { width: 310px }
    #post-format-gallery a { width: 125px }
    /*widgets*/
    .testimonial-content { width: 195px }
    .testimonial-by { width: 100% }
}

/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) { 
    /*display dropdown nav*/
    .sf-menu { display: none }
	#navigation .selector,
	#navigation select { display: inline-block; }
    #navigation { width: 100% }
	/*hide back up button*/
	#toplink{ display: none !important; }
    /*header*/
    #logo { display: block; float: none; margin-bottom: 25px; text-align: center; }
    #logo img { display: inherit }
    /*main*/
	#header-top{ padding-top: 0; }
    #header-callout-text, #topnav { float: none; text-align: center; }
    #topnav { border-top: none; margin-top: 10px; }
    #topnav li, #topnav a { display: inline-block; float: none; }
    #wrap { width: 320px }
    .post { width: 100% }
    #sidebar { width: 100%; margin-top: 25px; padding-top: 25px; background: url("../images/dotted-border.png") top center repeat-x; }
    .single-post #sidebar { margin-top: 0 }
    #page-heading { text-align: center }
    #callout-button { position: inherit; display: inline-block; margin-top: 20px; }
    #single-nav { position: inherit; margin-top: 25px; text-align: center; }
    #single-nav-left, #single-nav-right { float: none; display: inline-block; }
    img.alignleft, img.alignright { max-width: 45% !important }
    .overlay h2, .overlay h3 { font-size: 12px }
    /*footer*/
    #copyright { width: 100%; text-align: center; float: none; }
    #footer-menu { width: 100%; text-align: center; float: none; }
    /*slider*/
    #full-slides .prev, #full-slides .next { height: 43px; line-height: 46px; margin-top: -30px; }
    #full-slides .caption { display: none }
    /*home*/
    #home-tagline { font-size: 16px !important }
    .hp-highlight { width: 100%; margin-right: 0; }
    #home-blog { text-align: center }
    #home-blog .heading { margin-right: 0 }
    .home-entry { display: inline-block; margin-right: 0; float: none; }
    /*services*/
    #service-left { width: 100%; margin-bottom: 25px; }
    #service-content { width: 100% }
    #service-tabs li.active a { border-bottom: 2px solid #000; border-right: 0px; }
    #service-tabs li.active a:after { content: ""; position: absolute; top: inherit; bottom: -12px; left: 50%; margin: 0 0 0 -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #000; }
    /*portfolio & gallery*/
    .portfolio-item, .gallery-photo { width: 135px }
    #single-portfolio-left { width: 100% }
    #single-portfolio-right, #single-portfolio-right, .full-portfolio #single-portfolio-left, .full-portfolio #single-portfolio-left { width: 100%; margin-bottom: 25px; }
	 #single-portfolio-right{ padding-bottom: 25px; border-bottom: 1px solid #eee; }
    .portfolio-slides .pagination { left: 0px; width: 300px; }
    .portfolio-slides .pagination li { float: left }
    #full-portfolio-content { width: 100% }
    /*testimonials*/
    .testimonial-item { margin-bottom: 25px !important }
    /*staff*/
    .staff-member { width: 125px }
    .staff-position { font-size: 14px }
    /*blog*/
    .blog-archive { text-align: center }
    .loop-entry { width: 215px !important; display: inline-block; }
    .loop-entry-left { width: 100% }
    .loop-entry-right { width: 100%; text-align: left; margin-top: 25px;  }
    #post-format-gallery a { width: 135px }
    .loop-entry .post-meta { margin-top: 10px }
    .post-meta li { display: block; float: none; margin-bottom: 2px; }
    /*shortcodes*/
    .tab-shortcode ul.ui-tabs-nav { border: none; margin: 0; }
    .tab-shortcode ul.ui-tabs-nav li, .tab-shortcode ul.ui-tabs-nav li a { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; border: none; position: inherit; }
    .tab-shortcode ul.ui-tabs-nav li a { border: 1px solid #ddd !important; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
    .tab-shortcode ul.ui-tabs-nav li { margin-bottom: 5px }
    .tab-shortcode    ul.ui-tabs-nav .ui-state-active a { height: 29px; top: inherit; padding-top: 0; }
    .tab-shortcode .tab_content { border-top: 1px solid #ddd }
    .one-half, .one-third, .one-fourth, .one-fifth, .one-sixth, .one-two-third, .one-three-fourths { width: 100%; margin: 0 0 25px; }
    .alert-red.alignright, .alert-yellow.alignright, .alert-green.alignright, .alert-blue.alignright, .alert-red.alignleft, .alert-yellow.alignleft, .alert-green.alignleft, .alert-blue.alignleft { width: 100%; margin: 25px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    /*widgets*/
    #footer .sencillo-flickr-widget a, #footer .widget-recent-portfolio a { }
    #footer .sencillo-flickr-widget img, #footer .widget-recent-portfolio img { }
    /*other*/
    #error-page-title { font-size: 80px; line-height: 80px; margin-bottom: 25px; }
    #error-page-text { margin-top: 0 }
    /*comments*/
    .children { margin: 30px 0 0 }
    .children li.depth-2, .children li.depth-3, .children li.depth-4, .children li.depth-5, .children li.depth-6, .children li.depth-7, .children li.depth-8, .children li.depth-9, .children li.depth-10 { margin: 0 }
}

/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) { 
    /*main*/
    #wrap { width: 480px }
    .overlay h2, .overlay h3 { font-size: 13px }
    /*home*/
    #home-tagline { font-size: 18px !important }
    #home-blog .heading { margin-right: 0 }
    .home-entry { width: 205px; display: block; margin-right: 20px; float: left; }
    /*portfolio & gallery*/
    .portfolio-item, .gallery-photo { width: 215px }
    /*staff*/
    .staff-member { width: 205px }
    .staff-position { font-size: 18px }
    /*blog*/
    .loop-entry { width: 100% !important }
    .loop-entry-left { display: block; float: left; width: 165px; }
    .loop-entry-right { display: block; float: right; width: 240px; margin-top: 0; }
    .loop-entry .post-meta { margin-top: 5px }
    .post-meta li { display: block; float: none; margin-bottom: 2px; }
    #post-format-gallery a { width: 33.33% }
}