@charset "UTF-8";

/************************************************************
/   STYLESHEET FOR floht.com
/   Designed 2010 Stephen Parker
/   Copyright (c)2010-2025 Stephen Parker.
/   All rights reserved.
************************************************************/

* {
   box-sizing: border-box !important;
   -moz-box-sizing: border-box !important;
   -ms-box-sizing: border-box !important;
   -webkit-box-sizing: border-box !important;
}
html {
   padding: 0px;
   margin: 0px;
   background-color: #e3e3e3;
}
body {
   padding: 0px;
   margin: 0px;
   font-family: tahoma,arial,sans-serif;
}

h1 {
   font-size: 2.25em;
   font-weight: normal;
   margin: 0em 0px .5em 0px;
   text-align: center;
   color: #444;
}
h3 {
   margin: 0em 0px .5em 0px;
}
   #content h3 {
      margin-top: 1em;
   }
a, a:link, a:visited {
   color: #00b9f2;
   text-decoration: none;
}
a:hover {
   color:  #999;
   text-decoration: underline;
}
a.image { border: none; }
a img { border: none; }
ol, ul {
   margin-left: 15px;
   padding-left: 5px;
}
label {
   display: block;
   color: #777;
}
hr {
   height: 1px;
   color: #ddd;
   border: none;
   border-bottom: #ccc 1px solid;
}

.clear { clear: both; }

.left { text-align: left !important; }
.centered { text-align: center !important; }
.right {
   margin: 0px;
   text-align: right !important;
}
div.centered {
   margin-left: auto;
   margin-right: auto;
}
.block {
   display: block;
}

.bold { font-weight: bold; }
.clear { clear: both; }
.indented { margin-left: 25px; }
.withborder { border: #ccc solid 3px; }
.last { border: none !important; }
.shaderow {
   color: #000;
   background-color: #eee;
}
.highlight_bad { background-color: #ffe9e9; }
.highlight_good { background-color: #e7ffe7; }
.highlight { background-color: #ffd; }
.light {   color: #777; }
.blue { color: #00b9f2; }
.green { color: #0acd0a; }
.red { color: #cd0a0a; }
.unread { background-color: #f2f2f2; }

.drop_shadow {
   -moz-box-shadow: 0px 3px 5px #777;
   -webkit-box-shadow: 0px 3px 5px #777;
   box-shadow: 0px 3px 5px #777;
}
.drop_shadow_light {
/*
   -moz-box-shadow: 0px 2px 5px #111;
   -webkit-box-shadow: 0px 2px 5px #111;
   box-shadow: 0px 2px 5px #111;
*/
}

.rounded {
   border: #ccc solid 1px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   border-radius: 15px;
}

.tag {
   display: block;
   padding: 2px 5px;
   text-align: center;
}



/**
 * Interface classes
 * Classes which define feedback messages to user
 **/
.ui-icon {
   background-image: url('/assets/css/ui-icons_888888_256x240.png') !important;
}



.warning, .alert, .confirm, .message {
   width: 775px;
   margin-bottom: .5em;
   padding: 0px 10px;
   border: #ccc solid 1px;
}
.warning div, .alert div, .confirm div, .message div {
   width: 100% !important;
}
.warning p, .alert p, .confirm p, .message p {
   margin-top: 12px !important;
   margin-bottom: 12px !important;
}

.warning {
   background-color: #ffe9e9;
   border: #f44 solid 1px;
}
   .warning strong { color: #cd0a0a; }
   .warning .ui-icon { background-image: url('/assets/css/ui-icons_cd0a0a_256x240.png') !important; }

.alert {
   background-color: #ffd;
   border: #fea solid 1px;
}

.confirm {
   background-color: #e7ffe7 !important;
   border: #282 solid 1px;
}
   .confirm .ui-icon { background-image: url('/assets/css/ui-icons_228822_256x240.png') !important; }

.message {
   background-color: #f0f0f0 !important;
}


.valid { border-color: #0acd0a !important; }
.invalid { border-color: #cd0a0a !important; }


.edit_links {
   text-align: right;
   margin-bottom: 0px;
}
.popup_detail {
   position: absolute;
   display: none;
   bottom: 50px;
   width: 500px;
   padding: 1em;
   background-color: #fff;
   z-index: 2;
}
   #imageBrowser.popup_detail, .imageBrowser.popup_detail {
      max-height: 400px;
      overflow-y: scroll;
   }
   .popup_detail h3 {
      margin-top: 0px !important;
   }


/** Overwrite styling of error and alert boxes using jQuery UI **/
.ui-state-highlight, .ui-state-error {
   font-size: .85em;
   padding: 0pt 0.7em;
}
.ui-icon-info, .ui-icon-alert {
   float: left;
   margin-right: 0.3em;
}

/** Correct font-size issues with datepicker **/
.ui-datepicker {
   font-size: .8em !important;
}
   .ui-datepicker .ui-state-highlight {
      font-size: 1em !important;
   }
/*** End Interface classes ***/



/*** Graphs ***/
.barGraph {
   border: #ccc solid 1px;
   width: 240px;
   overflow: hidden;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}
.barGraphFill {
   height: 1em;
   background-image: url('/assets/images/button.png');
   background-position: center;
   border-right: #ccc solid 1px;
}
/*** End Graphs ***/





/************* Forms and Tables *************/
form table td.right {
   padding-right: 20px;
}

table {
   width: 100%;
   margin: 1em 0px;
   border-collapse: collapse;
}
table thead, table tr.heading {
   background-color: #eee;
   border: #ccc solid 1px;
   color: #777;
}
table th, td.heading {
   padding: 5px 10px;
   font-weight: normal;
   text-align: left;
   border-right: #ccc solid 1px;
}
table td {
   vertical-align: top;
   color: #555;
}

table.data tbody tr {
   border-bottom: #ddd solid 1px;
}
table.data td { padding: 10px; }

/** Here to override styling of tr and td elements above **/
td.heading { padding: 5px 10px !important; }



input[type='text'], input[type='password'], input[type='file'], select, textarea {
   margin: 3px 0px 5px 0px;
   padding: 6px;
   background-color: #fff;
   font-size: 1.5em;
   font-family: tahoma, arial, sans-serif;
   color: #777;
}
#content input, #content select, #content textarea {
   border: #ddd solid 1px;
   border: e3e3e3 solid 1px;
   background-color: #f2f2f2;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}
#content input:focus, #content select:focus, #content textarea:focus {
   border-color: #ccc;
   background-color: #f8f8f8;
}
input[type='text'], input[type='password'] {
   width: 250px;
}

input[type='button']::-moz-focus-inner, input[type='submit']::-moz-focus-inner {
   border: none;
}
input[type='checkbox'] {
   margin: 0px;
   border: inherit !important;
   background-color: inherit !important;
}
input.money {
   width: 100px;
}
select {
   padding: 5px;
   font-size: 1.5em;
}
select.short {
   width: 50px;
}
textarea {
   width: 100%;
}
p.buttons {
   text-align: right;
}
button {
   padding: 6px 10px 5px 10px;
   font-size: 20px;
   font-family: tahoma, arial, sans-serif;
   color: #777;
//   background-image: url('/assets/images/button.png');
   background-position: center;
   background-color: #ddd;
   border: #ccc solid 2px;
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   border-radius: 20px;
}
   button::-moz-focus-inner {
      border: none;
   }
   button:active {
//      background-image: url('/assets/images/buttongradient.png');
	background-color: #d8d8d8;
   }
   button img {
      margin: -3px 2px -8px 0px;
   }

.upload {  }
   .upload_container {
      position: relative;
      float: left;
      width: 215px;
      overflow: hidden;
   }
   .upload_container .file {
      position: absolute;
      left: -100px;
      width: 700px !important;
      opacity: 0;
      -moz-opacity: 0;
      filter: alpha(opacity: 0);
      z-index: 1;
   }
   .upload_container .fake_upload_file {
      position: relative;
   }
      .upload_container #fake_upload_file_text {
         width: 200px;
      }
   #upload_progress {
      display: none;
      margin: 0px 25px 0px 0px;
   }
   .upload_progress {
      height: 16px;
      margin-top: 12px;
   }
/************* End Forms and Tables *************/





/*****************************************************************************
/
/   MAIN PAGE LAYOUT ELEMENTS
/
*****************************************************************************/
#all {
   width: 1015px;
   margin: 0px auto;
   padding: 0px;
   color: #444;
   font-family: tahoma, arial, sans-serif;
   font-size: .85em;
}



.right_col {
   float: right;
   width: 225px;
   margin: 0px;
   padding: 0px;
}
.left_col {
   float: left;
   width: 775px;
   margin: 0px;
   padding: 0px;
}



#header {
   width: 100%;
   margin: 0px auto;
   padding: 0px;
}
#logo {
   float: left;
   height: 50px;
   width: 600px;
   margin-top: 10px;
   overflow: hidden;
}
   #logo img {
      float: left;
      max-height: 100%;
      margin-right: 15px;
   }
   #company_name {
      display: block;
      float: left;
      padding: 10px 0px;
      font-size: 22px;
   }



/**
 * Define panel styles here
 */
.panel {
   margin: 0px 0px 2em 0px;
   padding: 0px;
   color: #444;
}
.panel_white {
   border: #ccc solid 1px;
   background-color: #fff;
}
.panel h3 {
   height: 1.5em;
   margin: 0px;
   padding: .25em 0px;
   font-size: 1.5em;
   font-weight: normal;
   overflow: hidden;
   color: #999;
   border-bottom: #ccc solid 1px;
}
/*
.panel h3.messages {
   background-image: url("/assets/images/panel_messages.png");
   background-repeat: no-repeat;
   background-position: left;
}
.panel h3.balance {
   background-image: url("/assets/images/panel_balance.png");
   background-repeat: no-repeat;
   background-position: left;
}
.panel h3.points {
   background-image: url("/assets/images/panel_points.png");
   background-repeat: no-repeat;
   background-position: left;
}
.panel h3.dates {
   background-image: url("/assets/images/panel_dates.png");
   background-repeat: no-repeat;
   background-position: left;
}
*/
.panel p {
   margin: 1em 0px;
   padding: 0px;
}
.panel a {
   text-decoration: none;
}
   .panel a:hover {
      text-decoration: underline;
   }



/**
 * Search styles
 */
#search {
   float: right;
   height: 34px;
   margin: 0px;
   border: #ddd solid 5px;
      border-bottom-width: 3px;
   background-color: #fff;
   overflow: hidden;
}
#search div.search_container {
   margin: 0px;
   padding: 2px 1px 0px 1px;
   border: #ccc solid 1px;
   clear: both;
}
#search .gradient {
   background-color: #fbfbfb;
}
#search input, #search select, #search a {
   float: right;
   margin: 0px;
   padding: 2px;
   border: none;
   font-size: 1em;
   color: #999;
}
#search select {
   width: auto;
}
#search input[type=text] {
   width: 175px;
   margin-top: 1px;
}
#search a#input_search-submit {
   display: block;
   padding-top: 0px;
   background-color: #f2f2f2;
   border-left: #e9e9e9 solid 1px;
}
   #search a#input_search-submit img {   }
   #search a#input_search-submit:active {
      padding: 1px 1px 1px 3px;
      background-color: #ebebeb;
   }
   /**
    *   Autocomplete styling
    */
   .ac_results li { padding: 5px; }
   .ac_over {
      background-color: #00b9f2 !important;
   }



#status {
   float: right;
   margin: 0px 0px 2em 0px;
   height: 50px;
   font-size: .95em;
}
   #status.panel {
      padding-bottom: 0px;
   }
#status ul {
   margin: 10px 0px;
   padding: 0px;
}
#status li {
   display: inline;
   float: left;
   margin: 0px;
   padding: 0px;
   list-style: none;
}
#status a, #status a:link, #status a:visited, #status span {
   display: block;
   margin: 0px 0px 0px 8px;
   padding: 0px 0px 5px 0px;
}
#status a, #status a:link, #status a:visited {
   text-decoration: none;
}
#status a:hover {
   border-bottom: #00b9f2 solid 4px;
   margin-bottom: 0px;
   padding-bottom: 7px;
}





/**
 * Drop navigation styling
 */
#nav {
   display: block;
   height: 35px;
   margin-bottom: 1em;
   padding: 0px;
   border-bottom: #ccc solid 1px;
}
#nav ul {
   float: left;
   margin: 0px;
   padding: 0px;
}
#nav li {
   position: relative;
   display: inline;
   float: left;
   margin: 0px 3px 0px 0px;
   padding: 0px;
   list-style: none;
   border: #ccc solid 1px;
      border-bottom: none;
}
#nav a, #nav a:link, #nav a:visited {
   display: block;
   height: auto;
   padding: 8px 10px;
   text-align: center;
   text-decoration: none;
   color: #999;
   background-color: #fff;
}
#nav li a:hover {
   color: #00b9f2;
}
#nav a:hover,
#nav a:active,
#nav a:focus {
   outline-style: none !important;
   -moz-outline-style: none !important;
}
#nav a.drop_menu:hover {
   color: #00b9f2;
}
#nav li li a {
   padding: 10px !important;
   color: #00b9f2 !important;
}
#nav li li a:hover {
   background-color: #eee !important;
}
#nav a.drop_menu, #nav a.drop_menu:link, #nav a.drop_menu:visited, #nav a.drop_menu:hover {
   padding-right: 30px;
}  
.drop_menu {
   border: none;
   top: 10px;
   background-image: url("/assets/images/drop_arrow.gif");
   background-position: right;
   background-repeat: no-repeat;
}
   .open_drop_menu {
      color: #00b9f2 !important;
      background-color: #fff !important;
   }
   .open_drop_menu.drop_shadow {
      border-bottom: #fff solid 1px;
   }
#nav li ul {
   position: absolute;
   display: none;
   top: 33px;
   left: -1px;
   width: 200px;
   background-color: #fff;
   color: #444;
   border: #ccc solid 1px;
      border-top: none;
   z-index: 100;
}
#nav li ul li {
   width: 100%;
   border: none;
}
#nav li ul li a, #nav li ul li a:link, #nav li ul li a:visited, #nav li ul li a:hover {
   text-align: left;
   border-top: #fff solid 1px;
   border-bottom: #fff solid 1px;
}
#nav li ul li a:hover {
   background-color: #f5f5f5;
   border-top: #e4e4e4 solid 1px;
   border-bottom: #e4e4e4 solid 1px;
}



#content {
   margin-top: 0px;
   padding: 20px;
}





#footer {
   margin: 0px auto 4em auto;
   padding: 0px 20px;
   color: #999;
}
   #footer p {
      margin: 10px 0px;
   }
/*****************************************************************************
/   END --- MAIN PAGE LAYOUT ELEMENTS
*****************************************************************************/





/************* CONTENT STYLES ****************/
h3.heading {
   margin-bottom: .5em;
   padding-bottom: .5em;
   border-bottom: #ccc solid 1px;
   color: #555;
}



/*** Edit Account ***/
.info_block {
   margin-bottom: 3em;
}
.info_block h3 {
   clear: both;
}
.info_block .row {
   clear: both;
   margin: 1em 0px 1em 20px;
}
   .info_block .data p {
      margin-left: 0px;
   }
.info_block label {
   display: block;
   float: left;
   width: 170px;
   margin-right: 10px;
}
.info_block span.data {
   display: block;
   float: left;
   width: 250px !important;
   margin-right: 10px;
   word-wrap: break-word; 
}
   .info_block div.barGraph {
      float: left;
      margin-right: 10px;
   }
.info_block .edit { }
.info_block .edit input { }
.info_block .input {
   display: none;
   clear: both;
   margin-top: .5em;
   margin-left: 20px;
   padding: 10px;
   background-color: #eee;
   border: #ccc solid 1px;
   border-top: none;
   border-bottom-right-radius: 15px;
      -moz-border-radius-bottomright: 15px;
      -webkit-border-bottom-right-radius: 15px;
   border-bottom-left-radius: 15px;
       -moz-border-radius-bottomleft: 15px;
       -webkit-border-bottom-left-radius: 15px;
}



#image_browser, .imageBrowser {  }
#images_container span, .images_container span {
   display: block;
   float: left;
   margin: 5px 5px 1em 5px;
   padding-bottom: 1em;
   width: 100px;
   cursor: pointer;
}


#publicTemplateBrowser #images_container span {
   width: 48%;
   height: 170px;
   overflow: hidden;
}
#publicTemplateBrowser #images_container span {
   border: #eee solid 6px;
}
#publicTemplateBrowser #images_container span.current {
   border: #00b9f2 solid 6px;
}
/*** End Edit Account ***/



/*** Login and Signup Style ***/
#login_container {
   width: 500px;
   margin: 50px auto;
}
   #login_container #logo {
      width: 400px;
      margin: 0px auto;
      margin-bottom: 20px; /* Same as form.login->margin top */
      float: none;
      overflow: visible;
   }
   #login_container img {
      float: left;
   }
   #login_container #company_name {
      float: none;
      overflow: visible;
   }
   #login_container #feedback div  {
      width: 100%;
   }
   #login_container #footer  {
      width: 400px;
      margin-top: 25px;
   }
form.login {
   width: 400px;
   margin: 25px auto 0px auto;
   padding: 20px 20px 10px 20px;
   text-align: left;
   color: #777;
   background-color: #fff;
   border: #ddd solid 5px;
   border-radius: 15px;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
   box-shadow: 0px 3px 25px #aaa;
      -moz-box-shadow: 0px 3px 25px #aaa;
      -webkit-box-shadow: 0px 3px 25px #aaa;
}
   form.login .header {
      border-bottom: #ccc solid 1px;
   }
   form.login h1 {
      text-align: right;
      margin: 0px;
   }
   form.login input[type='text'], form.login input[type='password'], form.login select, form.login textarea {
      font-size: 1.75em;
      border: #ccc solid 3px;
   }
   form.login input[type=text],
   form.login input[type=password],
   form.login select {
      background-color: #f0f0f0;
      width: 350px;
   }
   form.login .half_text {
      width: 172px !important;
   }
   .login input:focus, .login select:focus, .login textarea:focus {
      background-color: #fff !important;
      border: #adf solid 3px !important;
   }
   form.login .additional_options {
      padding-top: 1em;
      border-top: #ccc solid 1px;
   }
/*** End Login and Signup Style ***/



/*** Blank Style ***/
#blank_container {
   width: 800px;
   margin: 3em auto;
}
/*** End Blank Style ***/
/*********** END CONTENT STYLES **************/



/************* FORMS AND TABLES *************/

/************* END FORMS AND TABLES *************/



/************ MESSAGE and MEMBER SELECTOR STYLE *************/
table.message_folder td { padding: 6px; vertical-align: middle; }

.thread td {
   padding: 10px;
   vertical-align: top;
}
.thread td.label {
   width: 250px;
}
.thread td.body {
   padding: 0px 10px 1em 10px;
   border-top: #ccc solid 1px;
}



div.controls {
   margin: 0px;
   padding-bottom: 1em;
   border-top: #ccc solid 1px;
}

ul.message_folders {
   margin: 0px;
   padding: 0px;
}
   ul.message_folders li {
      display: inline;
      float: left;
      margin: 0px;
      padding: 0px;
      list-style: none;
      border: #ccc solid 1px;
      border-top: none;
      border-right: none;
   }
   ul.message_folders li.last {
      border: #ccc solid 1px !important;
      border-top: none !important;
   }
   ul.message_folders a, ul.message_folders a:link, ul.message_folders a:visited {
      display: block;
      height: auto;
      padding: 6px 10px;
      color: #999;
      text-align: center;
      text-decoration: none;
      border: none;
   }
   ul.message_folders li a:hover { background-color: #eee; }
   ul.message_folders li a.current{ background-color: #eee; }

ul.message_controls {
   float: right;
   margin: 0px;
   padding: 0px;
   list-style: none;
}
   ul.message_controls li {
      float: left;
      display: block;
      padding: 6px 6px;
   }
   ul.message_controls a { }



#user_dummy_field {
   width: 275px;
   vertical-align: middle;
   background-image: url("/assets/images/drop_arrow.gif");
   background-position: left;
   background-repeat: no-repeat;

   margin-top: -.75em;
   padding: 10px;
   padding-left: 25px;

   border: #ddd solid 1px;
   border: e3e3e3 solid 1px;
   background-color: #f2f2f2;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}
#members_box {
   position: absolute;
   display: none;
   min-width: 500px;
   margin-top: -1px;
   margin-left: 25px;
   padding-top: 0px;
   text-align: left;
   background-color: #fff;
   border: #ccc solid 1px;
   border-top: #ddd solid 1px;
}
   #members_box .user_list {
      height: 300px;
      overflow-y: scroll;
   }
   #members_box p {
      padding: 5px 10px;
      margin: 0px;
   }
   .to_member_row {
      border-top: #eee solid 1px;
   }
   .selected_row {
      background-color: #ddd;
      border-top: #ccc solid 1px;
   }

   #members_box input[type=checkbox] {
      margin-right: 10px;
   }
   #members_box p span {}
/************ END MESSAGE and MEMBER SELECTOR STYLE *************/



/************ Calendar Style *************/
table.calendar {
   width: 100%;
   margin-bottom: 0px;
}
td.cal_box {
   min-width: 50px;
   max-width: 100px;
   height: 80px;
   padding: 5px;
   vertical-align: top;
   border: #ccc solid 1px;
}
   td.cal_box_current {
      background-color: #ffd;
   }
table.calendar span.date {
   font-size: 24px;
   color: #ccc;
}
table.calendar a.event_item {
   display: block;
   padding: 2px 5px;
   margin-top: 5px;
   background-color: #eee;
   border: #ccc solid 1px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   word-wrap: break-word;
}
form.cal_select_month {
   text-align: center;
}
/************ End Calendar Style *************/



/************ ADMIN FUNCTIONS STYLE *************/
h3.admin_pane {
   clear: both;
}
.option {
   width: 170px;
   float: left;
   margin-bottom: 3em;
   text-align: center;
}
   .icon {
      height: 48px;
      margin: 0px auto;
      display: block;
      text-align: center;
   }



/*** Navigation Editor Page ***/
ul.sort_nav { padding-left: 0px; }
   ul.sort_nav li {
      width: 200px;
      height: 2.4em;
      font-size: 1em;
      line-height: 2.25em;
      margin: 5px 0px;
      list-style: none;
      background-color: #eee;
      border: #ccc solid 1px;
      cursor: move;
   }
   ul.sort_nav li span {
      float: left;
      font-size: 1em;
      line-height: 2.25em;
      margin: 7px 5px 0px 5px;
   }



/*** Plans/Pricing Page Styling ***/
.number {
   font-family: georgia, inherit;
   font-size: 1.75em;
}

ul.plan, ul.features {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
   text-align: center;
   border: #bbb solid 1px;
      border-bottom: none;
   font-size: 0.9em;
}
ul.plan {
   float: left;
   width: 183px;
   margin-bottom: 1em;
   font-family: verdana, arial, sans-serif;
}
   ul.plan li, ul.features li {
      padding: 10px 5px;
      border-bottom: #bbb solid 1px;
   }
   ul.plan li.heading, ul.features li.heading {
      font-size: 2em;
      margin: 0px;
      background-color: #eee;
   }
   ul.plan.featured {
      width: 184px;
      margin-top: -9px;
      -moz-box-shadow: 0px 3px 30px #777;
      -webkit-box-shadow: 0px 3px 30px #777;
      box-shadow: 0px 3px 30px #777;
      border: #00b9f2 solid 4px;
   }
      ul.plan.featured li.heading {
         font-size: 2em;
      }
      ul.plan.featured .number {
         font-size: 2.5em;
      }
/************ END ADMIN FUNCTIONS STYLE *************/



/********** PROFILE STYLE **************/
div.profile { }
h3.profile_heading {
   width: auto;
   margin-top: 10px !important;
   padding: 5px;
   background-color: #eee;
   border: #ccc solid 1px;
   color: #777;
   font-size: 1em;
   font-weight: normal;
}



div.profile_photo {
   float: left;
   width: 215px;
}
   div.profile_photo_spacer {
      text-align: center;
      vertical-align: middle;
      margin-bottom: 5px;
      max-height: 250px;      /* Keep skinny pictures from making really long page */
      overflow: hidden;
   }
   div.profile_photo_spacer a { border: none; }
   div.profile_photo img {
      max-width: 100%; 
      max-height: 250px;
   }
   a.profile_button, a.profile_button:link, a.profile_button:visited {
      display: block;
      margin: 0px;
      padding: 4px 5px 4px 5px;
      border-bottom: #ccc solid 1px;
      font-size: .9em;
      text-decoration: none;
      color: #777;
   }
   a.profile_button:hover {
      background-color: #eee;
   }

   .profile_info { padding: 0px 5px; }
   .infobox {
      display: block;
      margin-bottom: 10px;
   }
   .profile_photo .label { color: #999; }


   
.profile_right_col { float: right; width: 500px; }
   .profile_name .profile_name { margin: 0px 5px 5px 5px; }
   div.profile_text {
      margin: 0px 0px 25px 0px;
   }
   div.profile_text .profile_text { padding: 0px 5px; }
   .pictures a img { border: none; }
   div.pictures {
      margin-left: auto;
      margin-right: auto;
   }
   .pictures span {
      width: 18%;
      margin-left: 0px;
      margin-right: 10px;
      text-align: center;
      float: left;
   }
   img.profile_thumbnail {
      max-width: 100%;
      max-height: 75px;
      vertical-align: top;
   }



#picture_display {
   display: none;
   text-align: center;
}
   #picture_shader {
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: .85;
      -moz-opacity: 0.85;
      filter: alpha(opacity: 85);
      text-align: center;
      color: #fff;
   }
   #picture_canvas_container {
      position: absolute;
      top: 50px;
      left: 0px;
      width: 100%;
      color: #fff;
   }
   #picture_display a {
      color: #fff;
      font-weight: bold;
      text-decoration: none;
   }
   #picture_canvas_container p {
      margin-bottom: 3em;
   }
   #picture_canvas_container a, #picture_canvas_container a:link, #picture_canvas_container a:active {
      padding: 3px 10px 4px 10px;
      background-color: #000;
      color: #fff;
      font-weight: normal;
   }
   #picture_canvas_container a:hover {
      color: inherit !important;
      background-color: #222;
      border-top: #00b9f2 solid 1px;
   }
   #picture_canvas {
      position: relative;
      width: 100%;
      height: 450px;
   }
   #picture_canvas img {
      max-height: 450px !important;
      border: #fff solid 10px;
      background-color: #fff;
   }
   #current_pic_field {
      margin-left: -10000px;
   }
/********** END PROFILE STYLE **************/