
@include "constants.css";
@scan "application/modules" "externals/styles/mobile.css" "Mobi";
@include "~/application/modules/Mobi/externals/styles/mobile.css";

/*
GLOBAL STYLES, FONTS & RESETS
*/
*
{
  padding: 0;
  margin: 0;
  border: none;
  border-style: solid;
  border-width: 0px;
  border-color: $theme_border_color;
  -webkit-text-size-adjust: none;
}
body
{
  background-color: $theme_topbar_menu_background_color;
}
table
{
  border-collapse: collapse;
}
br
{
  clear: both;
}
ul
{
  list-style-type: none;
}
a:link,
a:visited
{
  color: $theme_link_color;
  text-decoration: $theme_link_decoration;
}
a:hover
{
  color: $theme_link_color_hover;
  text-decoration: $theme_link_decoration_hover;
}
*
{
  font-family: $theme_font_family;
}
div,
td
{
  font-size: $theme_font_size;
  color: $theme_font_color;
  text-align: $theme_text_align;
}
h2,
h3,
h4
{
  color: $theme_headline_color;
}
h2
{
  font-size: $theme_headline_size_large;
  letter-spacing: -1px;
  margin-bottom: 10px;
}
h3
{
  font-size: $theme_headline_size_medium;
  letter-spacing: -1px;
}
h4
{
  font-weight: bold;
  border-bottom: 1px solid $theme_border_color;
  padding: .5em 0px .5em 0px;
  margin-bottom: 10px;
}
h4 > span
{
  display: inline-block;
  position: absolute;
  background-color: $theme_body_background_color;
  padding-right: 6px;
  margin-top: -1px;
}
h3.sep
{
  display: block;
  border-bottom: 1px solid $theme_border_color;
  overflow: hidden;
  margin-bottom: 1em;
  height: 1em;
}
h3.sep > span
{
  display: block;
  overflow: hidden;
  position: absolute;
  background: $theme_body_background_color;
  padding: 5px 10px 5px 0px;
  font-weight: bold;
}
.layout_right
{
  float: none;
  margin: 0px;
  padding: 0px;
  width: auto;
}


/*
GLOBAL NOTICES (OUTSIDE FORMS)
Used to show a message or notice with an icon on a page,
usually above content, not within a form.
*/
.tip
{
  overflow: hidden;
  clear: both;
}
.tip > span
{
  +rounded;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 6px 6px;
  padding: 6px 6px 6px 27px;
  background-color: #faf6e4;
  float: left;
  margin-bottom: 15px;
  background-image: url(~/application/modules/Core/externals/images/tip.png);
}



/*
GLOBAL FORM RESPONSES
Used to show feedback from form submissions, i.e.
error/result messages.
*/
ul.form-errors,
ul.form-notices
{
  margin: 0px 0px 20px 0px;
  overflow: hidden;
}
* + ul.form-errors,
* + ul.form-notices
{
  margin-top: 20px;
}
ul.form-errors > li,
ul.form-notices > li
{
  +rounded;
  margin: 7px 5px 7px 5px;
  padding: 5px 15px 5px 32px;
  background-repeat: no-repeat;
  background-position: 8px 5px;
  float: left;
  clear: left;
  overflow: hidden;
}
ul.form-errors > li > b,
ul.form-notices > li > b
{
  text-transform: uppercase;
  font-size: .8em;
}
ul.form-errors > li > ul > li,
ul.form-notices > li > ul > li
{
  font-size: .9em;
}
ul.form-errors > li {
  background-image: url(~/application/modules/Core/externals/images/error.png);
  background-color: #faf7e9;
}
ul.form-notices > li {
  background-image: url(~/application/modules/Core/externals/images/notice.png);
  background-color: #e9faeb;
}


/*
GLOBAL FORM ELEMENTS
Used for most forms throughout the site.
*/
button
{
  +rounded;
  padding: 5px;
  font-weight: bold;
  border: none;
  background-color: $theme_button_background_color;
  border: 1px solid $theme_button_border_color;
  color: $theme_button_font_color;
  background-image: url(/application/modules/Mobi/externals/images/mobile_buttonbg.png);
  background-repeat: repeat-x;
  background-position: top left;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
button:hover
{
  background-color: $theme_button_background_color_hover;
  cursor: pointer;
}
input[type=text],
input[type=password],
input.text,
textarea
{
  +rounded(3px);
  background-color: $theme_input_background_color;
  color: $theme_input_font_color;
  border-width: 1px;
  border-color: $theme_input_border_colors;
  padding: 2px;
  font-size: 10pt;
  resize: none;
}
input[type=checkbox],
input[type=radio]
{
  border: none;
  padding: 0px;
  margin: 2px 5px 0px 0px;
  width: auto;
  display: block;
  float: left;
  width: 20px;
  height: 20px;
}
input[type=checkbox] + label,
input[type=radio] + label
{
  display: block;
  cursor: pointer;
}
textarea
{
  width: 300px;
  resize: none;
}
textarea.codebox
{
  width: 95%;
  min-height: 200px;
  font-family: courier new, courier, serif;
}
select
{
  +rounded(3px);
  background-color: $theme_input_background_color;
  color: $theme_input_font_color;
  border-width: 1px;
  border-color: $theme_input_border_colors;
  padding: 1px 0px 1px 1px;
  font-size: 10pt;
  max-width: 250px;
}
select option
{
  padding: 0px 10px 0px 3px;
}
a.buttonlink
{
  background-repeat: no-repeat;
  background-position: 0px 0px;
  padding-left: 21px;
  font-weight: bold;
  display: inline-block;
}
a.buttonlink_right
{
  background-repeat: no-repeat;
  background-position: top right;
  padding-right: 19px;
  font-weight: bold;
  display: inline-block;
}
br.multi-text-separator
{
  margin-bottom: 8px;
}


/*
LARGE BOX FORM
These styles are for large forms that are given an exclusive page.
They are not intended for smaller forms that are embedded elsewhere.
Examples: Signup form, member settings form, etc.
*/
/* form container */
.global_form
{
  clear: both;
  overflow: hidden;
}
/* external form border */
.global_form > div
{
  width: 100%;
  float: left;
  overflow: hidden;
  margin: 0px auto 0px auto;
}
/* internal form border */
.global_form > div > div
{
  +foreground;
  padding: 10px;
  +rounded(4px);
}
/* form headline */
.global_form div.form-wrapper-heading
{
  font-weight: bold;
  margin-bottom: 10px;
}
.global_form div.form-wrapper-heading > span
{
  display: block;
  position: absolute;
  overflow: hidden;
  padding: 4px 6px 4px 0px;
  background: $theme_form_background_color;
}
.global_form div.form-wrapper + div.form-wrapper-heading
{
  margin-top: 10px;
}
/* form instructions (after title) */
.global_form > div > div > h3 + p
{
  padding: 2px;
  margin-top: 2px;
  max-width: 550px;
}
/* add some space above form elements if title/instructions precede */
.global_form > div > div > h3 + div,
.global_form > div > div > h3 + p + div
{
  margin-top: 20px;
}
/* container for form label/element rows */
.global_form > div > div
{
  overflow: hidden;
}
/* container row for a label (left) and element (right) */
.global_form div.form-wrapper
{
  clear: both;
  overflow: hidden;
}
/* left-side element label container */
.global_form div.form-label
{
  padding: 4px 15px 0px 2px;
  margin-bottom: 10px;
  overflow: hidden;
  font-weight: bold;
  color: $theme_form_label_font_color;
  margin-bottom: 5px;
  width: 100%;
  max-width: 100%;
  font-size: 10pt;
}
/* right-side form element container */
.global_form div.form-element
{
  min-width: 150px;
  overflow: hidden;
  width: 100%;
  margin-bottom: 15px;
}
/* all paragraphs of text in the form */
.global_form div > p
{
  max-width: 450px;
  padding-bottom: 10px;
}
/* paragraphs of text that come after an input element */
.global_form div > input + p
{
  margin-top: 3px;
  font-size: 7pt;
}
/* all text inputs in form */
.global_form input[type=text],
.global_form input[type=password]
{
  padding: 2px;
  font-size: 10pt;
  width: 200px;
}
/* only for text inputs that come after other text inputs */
/* i.e. for when there is a vertical list of text inputs */
.global_form input[type=text] + input[type=text]
{
  display: block;
  margin-top: 5px;
}
/* all checkboxes and radios in form */
.global_form input[type=checkbox],
.global_form input[type=radio]
{
  clear: left;
}
/* for clickable labels that appear to the right of elements */
/* such as checkboxes or radios */
.global_form input + label
{
  float: left;
  display: block;
  margin-top: 0px;
  margin-left: 2px;
}
/* all select boxes in form */
.global_form select
{
  padding: 1px 0px 1px 1px;
  font-size: 10pt;
  max-width: 250px;
}
/* all textareas in form */
.global_form textarea
{
  padding: 4px;
  font-size: 10pt;
  max-width: 300px;
  min-height: 100px;
}
.global_form p.description {
  margin: 3px 0px 10px 0px;
  padding: 0px;
}
.global_form #submit-element
{
  margin-bottom: 0px;
}
.global_form button[type=submit]
{
  margin-right: 3px;
}
.global_form .form-elements
{
  margin-top: 0px;
}
.global_form div > input + p
{
  font-size: 10pt;
}
.global_form p.description
{
  margin-bottom: 0px;
}
input[type="text"], input[type="password"], input.text,
.global_form input[type="text"], .global_form input[type="password"]
{
  font-size: 18px;
  margin-bottom: 5px;
  padding: 8px 5px;
  width: 95%;
}
.global_form select
{
  font-size: 18px;
}
.global_form textarea
{
  max-width: 100%;
  width: 95%;
}
.global_form button[type="submit"]
{
  font-size: 14px;
}
.global_form div.form-wrapper-heading > span
{
  display: none;
  position: static;
  font-size: 13pt;
  text-align: center;
  letter-spacing: -1px;
  background: none;
  padding: 0px;
} 





/*
SMALL BOX FORM
These styles are for small box forms, such
as the login box found by default on the main
index page. Form names and inputs are stacked
vertically (not floated) to fit into small-width
content areas.
*/
.global_form_box
{
  +rounded(4px);
  +foreground;
  padding: 10px;
  width: auto;
}
.global_form_box .form-wrapper + .form-wrapper
{
  margin-top: 5px;
}
.global_form_box .form-label
{
  padding: 0px;
  width: auto;
  float: none;
  clear: both;
  margin: 0px;
}
.global_form_box label
{
  text-align: left;
  display: block;
  font-size: .8em;
  margin-bottom: 2px;
}
.global_form_box li > span.description
{
  font-size: 11pt;
  margin-bottom: 2px;
}
.global_form_box .form-element
{
  overflow: hidden;
}


/*
POPUP FORM
These are used to style popup (i.e. smoothbox) forms.
Also used to style popup response messages, etc.
*/
.global_form_popup
{
  padding: 10px 10px 10px 13px;
  overflow: hidden;
}
.global_form_popup #submit-wrapper,
.global_form_popup #cancel-wrapper
{
  float: left;
  overflow: hidden;
}
.global_form_popup #buttons-wrapper
{
  margin-top: 10px;
}
.global_form_popup #buttons-wrapper button
{
  margin-right: 4px;
}
.global_form_popup_message
{
  display: block;
  padding: 1em;
  text-align: center;
  font-weight: bold;
}








/*
COMMENTS
These styles are used everywhere comments appear.
*/
.feed_item_date + .comments
{
  margin-top: 5px;
}
.comments
{
  width: 450px;
}
.comments > ul
{
  overflow: hidden;
}
.comments > ul > li
{
  +foreground;
  background-image: none;
  border: none;
  padding: 5px;
  border-top: 1px solid $theme_foreground_border_color;
  overflow: hidden;
  margin-bottom: 1px;
}
.comments .comments_author a
{
  font-weight: bold;
  margin-right: 2px;
}
.comments .comments_author_photo
{
  float: left;
  overflow: hidden;
  line-height: 0px;
  font-size: 0px;
}
.comments .comments_author_photo img
{
  display: block;
}
.comments .comments_options
{
  font-weight: bold;
  font-size: 1em;
  color: $theme_font_color_light;
  margin-bottom: 6px;
}
.comments .comments_comment_options > a
{
  font-size: .8em;
  font-weight: bold;
  margin-top: 5px;
  overflow: hidden;
}
.comments .comments_info
{
  font-size: .8em;
  padding-top: 2px;
  padding-left: 5px;
  overflow: hidden;
}
.comments .comments_date
{
  font-size: .9em;
  margin-top: 4px;
  color: $theme_font_color_light;
  overflow: hidden;
}
.comments .comments_likes,
.comments .comments_viewall
{
  font-size: .8em;
}
.comments .comments_likes a,
.comments .comments_viewall a
{
  font-weight: bold;
}
.comments > form
{
  +foreground;
  background-image: none;
  border: none;
  padding: 5px 10px 5px 5px;
  border-top: 1px solid $theme_foreground_border_color;
}
.comments > form > textarea
{
  width: 100%;
}
.comments > form > button
{
  display: block;
  margin-top: 7px;
}
div.comments_comment_likes_tips
{
  border: 1px solid $theme_foreground_border_color;
  padding: 4px 7px;
  background-color: $theme_foreground_background_color;
  color: $theme_font_color_light;
  font-size: 0.9em;
}





/*
HEADLINE
Used at the top of most browse pages. Often contains button-style tabs.
*/
.headline
{
  +rounded;
  +foreground;
  padding: 7px;
  overflow: hidden;
  margin-bottom: 15px;
}
.headline h2
{
  float: left;
  overflow: hidden;
  margin-right: 25px;
  margin-bottom: 0px;
  margin-left: 3px;
}



/* TABS (BUTTON STYLE, DEFAULT) */
.tabs
{
  text-align: center;
}
.tabs > ul li
{
  display: inline-block;
  margin: 3px;
}
.tabs > ul li > a
{
  +rounded;
  display: block;
  padding: .4em .6em;
  font-weight: bold;
  text-decoration: none;
  color: $theme_buttontabs_font_color;
  background-color: $theme_buttontabs_background_color;
  font-size: .9em;
}
.tabs > ul li > a:hover
{
  background-color: $theme_buttontabs_background_color_hover;
  text-decoration: none;
  color: $theme_buttontabs_font_color_hover;
}
.tabs > ul li.active > a
{
  background-color: $theme_buttontabs_background_color_active;
  color: $theme_buttontabs_font_color_active;
}
.tabs > ul li.active > a:hover
{
  text-decoration: none;
}

/* tabbed sub-menus (below main menu) */
.headline
{
  background: none;
  border: none;
  padding: 0px;
  margin: 0px 0px 10px 0px;
}
.headline > h2
{
  display: none;
}


/*
TABS (TAB STYLE, NON-DEFAULT)
*/
.tabs_alt
{
  padding-top: 2px;
  margin: 10px 0px 15px 0px;
  border-top-width: 1px;
  padding-top: 20px;
  +noselect;
}
.tabs_alt > ul
{
  text-align: left;
  font-weight: bold;
  padding: 0px;
  display: block;
  margin: 0px auto 10px auto;
  text-align: center;
}
.tabs_alt > ul > li
{
  display: inline-block;
  padding: 0px;
  margin: 3px;
}
.tabs_alt > ul > li.tab_active > a,
.tabs_alt > ul > li.active > a
{
  background-color: $theme_buttontabs_background_color_active;
  color: $theme_buttontabs_font_color_active;
}
.tabs_alt > ul > li > a
{
  +rounded;
  display: block;
  padding: .4em .6em;
  font-weight: bold;
  text-decoration: none;
  color: $theme_buttontabs_font_color;
  background-color: $theme_buttontabs_background_color;
  font-size: .9em;
}
.tabs_alt a span
{
  margin-left: 4px;
  font-weight: normal;
}







/*
TAGS
Styles lists of tags that are used for message recipients, lists of friend
lists, etc. Each tag has its own remove link.
*/
.tag
{
  +rounded(3px);
  display: inline-block;
  background-color: $theme_tag_background_color;
  font-weight: bold;
  display: inline-block;
  float: left;
  padding: .4em .6em;
  margin: 0px 10px 5px 0px;
  font-size: .8em;
}
.tag > a
{
  text-decoration: none;
  padding-left: 6px;
  text-transform: uppercase;
}







/* login page */
.layout_user_login_or_signup h3
{
  margin-bottom: 10px;
}


/* header bar (logo and main menu) */
.layout_page_header_mobi
{
  background-color: $theme_topbar_menu_background_color;
}
.layout_core_menu_logo
{
  width: 100%;
  text-align: center;
  padding: 8px 0px 2px 0px;
  margin: 0px auto;
  font-size: 18pt;
  letter-spacing: -0.05em;
  font-weight: bold;
}
.layout_core_menu_logo > a
{
  color: $theme_topbar_menu_link_color;
  text-shadow: 1px 1px 1px rgba(0,0,0,.2);
}

/* content area */
#global_wrapper
{
  background-color: $theme_body_background_color;
  padding: 10px 3px 30px 3px;
  overflow: hidden;
}
#global_content
{
  min-height: 200px;
  width: auto;
  padding: 0px 5px;
}

/* footer */
#global_footer
{
  padding: 0px;
  min-height: 50px;
  padding-bottom: 10px;
  background-color: $theme_topbar_menu_background_color;
  border-top: 1px solid rgba(0,0,0,.2);
}
.layout_mobi_mobi_footer
{
  padding-top: 8px;
  text-align: center;
  color: $theme_topbar_menu_link_color;
  font-size: 1em;
  text-shadow: 1px 1px 0px rgba(0,0,0,.1);
}
.layout_mobi_mobi_footer select
{
  display: block;
  margin: 5px auto 0px auto;
}
.layout_mobi_mobi_footer > a
{
  color: $theme_topbar_menu_link_color;
  text-decoration: underline;
  font-weight: bold;
}

/* main menu */
.layout_mobi_mobi_menu_main
{
  width: 100%;
  margin: 0px auto;
  text-align: center;
  overflow: hidden;
  border-left: 0px;
  border-right: 0px;
  padding-top: 4px;
}
.layout_mobi_mobi_menu_main ul
{
  margin: 0px auto;
  padding: 0px;
  white-space: nowrap;
}
.layout_mobi_mobi_menu_main li
{
  float: left;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}
.layout_mobi_mobi_menu_main ul a
{
  +noselect;
  outline: none;
  display: block;
  padding: .5em 0em;
  background-color: $theme_topbar_menu_background_color;
  border-bottom: 1px solid rgba(0,0,0,.2);
  text-shadow: 1px 1px 0px rgba(0,0,0,.2);
}
.layout_mobi_mobi_menu_main ul a:link,
.layout_mobi_mobi_menu_main ul a:visited
{
  color: $theme_topbar_menu_link_color;
  text-decoration: none;
}
.layout_mobi_mobi_menu_main ul a:hover
{
  text-decoration: underline;
}
.layout_mobi_mobi_menu_main li.active a
{
  +rounded(3px, false, false, true, true);
  background-color: $theme_body_background_color;
  color: $theme_font_color;
  border: 1px solid transparent;
  border-bottom: none;
  text-shadow: none;
  +shadow(0px, 0px, 4px, 0px, rgba(0,0,0,.4));
}
.layout_mobi_mobi_menu_main li.active:first-child a
{
  border-left: none;
}
.layout_mobi_mobi_menu_main li.active:last-child a
{
  border-right: none;
}
.layout_mobi_mobi_menu_main li.active a.inactive
{
  display: block;
  background-color: rgba(150,150,150,.1);
  color: $theme_font_color;
}


/* browse pages */
#filter_form
{
  margin-bottom: 15px;
}
#filter_form label
{
  font-size: 11pt;
}
#filter_form select
{
  font-size: 11pt;
}
#filter_form #search-element > input
{
  margin-bottom: 0px;
}
#filter_form .form-wrapper + .form-wrapper
{
  margin-top: 10px;
}
#filter_form button
{
  font-size: 12pt;
}
.quicklinks
{
  display: none;
}
form.filters
{
  +rounded(4px);
  +foreground;
  padding: 10px;
}
form.filters dt
{
  margin-bottom: 3px;
}
form.filters dd + dt
{
  margin-top: 10px;
}


/* hide tips on browse pages */
.layout_middle > div.tip
{
  display: none;
}

/* some different colors for mobile */
.activity-post-container
{
  background-color: #f2f2f2;
  border: 1px solid #ccc;
}