/*CSS FOR FlEXIBLE POSTS FILTER MENU PAGE*/

/*************************************************************************************************************************
Screen between 681px and 980px
*************************************************************************************************************************/
@media screen and (min-width: 681px) and (max-width: 980px) {

ul.toplist {padding: 0; margin: 0; clear: both; width: 100%; overflow: hidden; font-size: .9em;}
ul.toplist li {padding: 0; margin: 0;}
ul.toplist li a {color: #21759b; border-bottom: 1px solid #e1e1e1; text-decoration: none; display: block; padding: 8px 10px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
ul.toplist li a.current {background: #2ea2cc; color: #fff;}
ul.toplist li.span {border-top: 1px solid #fff; padding: 10px;}

#FPFslide {color: #666; padding: 2%; overflow: hidden; width: 96%; float: left;}
#FPFslide .wrap {overflow: hidden; padding: 15px; margin: 10px 20px 0 2px; border-bottom: 1px solid #ddd;}
#FPFslide .note {font: italic 11px Verdana, Tahoma, Arial, Sans-serif; line-height: 1.5em; padding: 5px 0;}
#FPFslide .note span {display: inline-block; padding: 2px 5px; background: #feffcd; border: 1px solid #e1e1e1;}
#FPFslide input[type='text'] {width: 20%; padding: 5px; margin-bottom: 5px;}
#FPFslide select {width: 25%%; text-transform: capitalize;}
#FPFslide h3 {font-weight: 600; font-size: 1.3em; color: #5f5d6f; margin: 10px 0 10px 0;}
#FPFslide h4 {font-weight: 600; font-size: 1.2em; color: #305d64; margin: 10px 0 10px 0; font-style: italic;}
#FPFslide h2 {font-weight: 600; font-size: 1.6em; color: #305d64; margin: 10px 0 10px 0;}
#FPFslide h5 {font-weight: 600; font-size: 1.4em; color: #6f5f5d; margin: 20px 0 10px 0; font-style: bold; text-decoration: underline;}
.multiselect {display: inline-block;}

}

/*************************************************************************************************************************
Screen larger than 981px
*************************************************************************************************************************/
@media screen and (min-width: 981px) {

ul.toplist {padding: 0; margin: 0; float: left; width: 20%; overflow: hidden;}
ul.toplist li {padding: 0; margin: 0;}
ul.toplist li a {color: #21759b; border-bottom: 1px solid #e1e1e1; text-decoration: none; display: block; padding: 10px 15px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
ul.toplist li a.current {background: #2ea2cc; color: #fff;}
ul.toplist li.span {border-top: 1px solid #fff; padding: 10px;}

#FPFslide {color: #666; padding: 1% 2%; overflow: hidden; width: 75%; float: left; border-left: 1px solid #e1e1e1;}
#FPFslide .wrap {overflow: hidden; padding: 15px; margin: 10px 20px 0 2px; border-bottom: 1px solid #ddd;}
#FPFslide .note {font: italic 11px Verdana, Tahoma, Arial, Sans-serif; line-height: 1.5em; padding: 5px 0;}
#FPFslide .note span {display: inline-block; padding: 2px 5px; background: #feffcd; border: 1px solid #e1e1e1;}
#FPFslide input[type='text'] {width: 30%; padding: 5px; margin-bottom: 5px;}
#FPFslide select {width: 20%; text-transform: capitalize;}
#FPFslide h3 {font-weight: 600; font-size: 1.3em; color: #5f5d6f; margin: 10px 0 10px 0;}
#FPFslide h4 {font-weight: 600; font-size: 1.2em; color: #305d64; margin: 10px 0 10px 0; font-style: italic;}
#FPFslide h2 {font-weight: 600; font-size: 1.6em; color: #305d64; margin: 10px 0 10px 0;}
#FPFslide h5 {font-weight: 600; font-size: 1.4em; color: #6f5f5d; margin: 20px 0 10px 0; font-style: bold; text-decoration: underline;}
.multiselect {display: inline-block;}


}

/*************************************************************************************************************************
Overall Options
*************************************************************************************************************************/

#options-form {width: 100%; margin: 15px 0; background: #fff; border: 1px solid #e5e5e5; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.05);}

#options-header {padding: 15px; border-bottom: 1px solid #dfdfdf; background: #f5f5f5;}
#options-header h1 {margin: 0 0 10px 0; color: #555; font-weight: 600;}
#options-header h1 span {font-weight: normal;}
#options-header .meta {text-transform: uppercase; color: #888;}
#options-header a {text-decoration: none;}
.options-buttons {clear: both; padding: 20px; overflow: hidden; background: #f5f5f5; border-top: 1px solid #e1e1e1;}

/* MISC */
#options-form img {max-width: 100%; height: auto;}
ul.themes-listing li {width: 300px; float: left; padding: 5px 0;}
li.error {font-weight: bold; color: #f00;}
label.image-label {float: left; margin: 0 10px 5px 0px; font-size: 0.8em;}
img.select-img {border: 1px solid #ccc;}
img.select-img:hover {border: 1px solid #000;}
img.alignleft {float: left; margin-right: 5px;}