/* ------------------------------------------------------------------------------------------------------------------------ media queries ------------------------------------------------------------------------------------------------------------------------ */ @global-width: 100%; @outer-width: 98%; @inner-width: 94%; @def-width: auto; /* --------------------------------------------------------------------------------------------------------------------- */ /* iPads (landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { body {min-width: @outer-width;} .center{width: @outer-width;} /* header */ #featured, div.orbit-wrapper { width: @global-width !important; } #main{width: @inner-width;} /* main content */ #primary-content{width: 60%;} /* file sharing */ .filesharing-item { width: @outer-width;float: none;} /* sidebar */ #secondary-content{width: 30%;} /* footer */ #footer{width: @outer-width;} } /* iPads (portrait) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { body {min-width: @outer-width;} .center{width: @outer-width;} /* header */ #logo,#header h1{font-size: 38px;text-align: center;float: none;} #featured, div.orbit-wrapper { width: @global-width !important;} #main{width: @def-width;padding: 10px 0;margin: 0 10px;} /* navigation */ #navigation{width: @def-width;float: none;display: block;border-top: 1px solid rgba(0,0,0,0.1);margin: 20px 0 0 0;} #navigation ul {margin: 10px 0 0 0;} /* main content */ #primary-content{width: @def-width;float: none;overflow: hidden;} /* file sharing */ .filesharing-item { width: @inner-width;float: none;} /* sidebar */ #secondary-content{ margin: 25px 0 0 0;width: @global-width;float: none; #secondary-content .copy{border: none;padding-left: 15px;} } /* footer */ #footer{width: @inner-width;} } /* iPhone (portrait and landscape) */ @media screen and (max-device-width: 480px){ body {-webkit-text-size-adjust:none;min-width: @outer-width;} .center{width: @outer-width;} div, .stacks_div, .stacks_left, .stacks_right, .stacks_middle, .stacks_float_left, .stacks_float_right{width: @def-width !important;float: none !important;} #main{width: @def-width;padding: 10px 0;margin: 0 10px;} /* header */ #logo,#header h1{font-size: 38px;text-align: center;float: none;} #banner{margin: 0 5px;} #featured, div.orbit-wrapper { width: @global-width !important; } #main{width: @def-width;} /* navigation */ #navigation{ width: @def-width;float: none;display: block;border-top: 1px solid rgba(0,0,0,0.1);margin: 20px 0 0 0;z-index: 1500; #navigation ul { margin: 10px 0 0 0;position: relative; } } #navigation ul li {position: static;} #navigation ul ul {width: @def-width;} /* main content */ #content {padding: 0 15px;} #content img, #content object{max-width: @global-width;display: block;margin: 0 auto;} #primary-content{width: @def-width;float: none;overflow: hidden;padding: 20px 0;padding-bottom: 0;} /* photo album */ .thumbnail-wrap{float:left !important;} /* sidebar */ #secondary-content{width: @global-width;float: none;padding: 0;} #secondary-content .copy{border: none;padding-left: 0;} /* bottom */ #bottom{ padding: 0 15px; #myExtraContent2{ padding: 30px 0 10px 0;overflow: hidden; .column { float:none;margin-bottom: 20px;} .one { width:@def-width; }.two { width:@def-width; } .three { width:@def-width; } .four { width:@def-width; } .five { width:@def-width; } .two3rds { width:@def-width; } .three4ths { width:@def-width; } .four5ths { width:@def-width; } .column .content { width:@def-width !important; } } } /* footer */ #footer{width: @outer-width;} } /* iPhone 4 */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* styles */ }