@import url('reset.css');
@import url('elements.css');
@import url('fletcherallen/jquery-ui-1.7.2.custom.css');
@import url('custom.css');
/*****************************************************************************
*****
***** NOTICE: DO NOT CHANGE THE CONTENTS OF THIS FILE.
***** ANY CHANGES WILL NEED TO BE MADE IN custom.css in the CSS folder.
***** Please contact Jay Kolesnik concerning any major style bugs.
*****
******************************************************************************
******************************************************************************
**
** Title:
** Fletcher Allen CSS Framework
**
** Author:
** Jay Kolesnik
**
** Description:
** This is a simple CSS Framework for our web applications.
** It should provide some basic Fletcher Allen themed stylings for a web page.
**
** Instructions:
** Link this file into the tag of your html or aspx page.
** You can also link jquery-1.3.2.min.js and
** jquery-ui-1.7.2.custom.min.js
**
** The link text should look like this:
**
**
** My Title
**
**
**
**
**
**
** This css file imports a reset.css, a jquery css and a custom css.
** This means that you do not have to take any steps to link those additional css files.
**
** custom.css is your blank CSS style sheet to add your own styles to.
**
*******************************************************************************/
/******************************** Common *****************************/
.hidden{display: none !important;}
.floatLeft{display: inline; float: left;}
.floatRight{float: right;}
.clear{clear: both;}
.clearLeft{clear: left;}
.clearRight{clear: right}
.block{display: block;}
.inline{display: inline;}
.baseline{vertical-align: baseline;}
/******************************** HTML *****************************/
html { height: 100%; }
body { min-height: 100%; height: 100%; }
body
{
margin: 0 auto;
position: relative;
font-family: trebuchet MS, Arial, Helvetica, sans-serif;
background-color: #002f5f;
}
p{font-family: trebuchet MS, Arial, Helvetica, sans-serif;}
ul{margin-left: 35px;}
ul li{margin-bottom: 10px;}
h1{
font-size: 24px;
}
h2{
font-size: 20px;
}
h2, h3, h4
{
margin-bottom: 10px;
line-height: 1.5;
}
/******************************** SECTIONS *****************************/
#top-nav ul, .command-bar, #header, #content, #footer, #top-nav{width: 900px;}
#header, #content, #footer, #top-nav{
/*position: relative;*/
display: block;
padding: 0px 30px;
margin: 0 auto;
overflow: hidden;
position: relative;
/*z-index: 1; */
}
#header, #content{background-color: White;}
#leftNav{}
#rightNav{}
#header h1
{
padding-top: 25px;
}
#header #logo{
right: 10px;
top: 10px;
height: 100px;
width: 165px;
background: url('fletcherallen/images/logo.gif') no-repeat 0 0;
overflow: hidden;
position: absolute;
}
#header #custom-logo{
height: 100px;
width: 165px;
float: left;
top: 10px;
}
#header .ie6custom-logo{
position: relative !important;
float: left;
margin-top: -15px;
margin-right: 10px;
}
#header p{
font-size: 16px;
}
#custom-logo~h1, #custom-logo~p, #custom-logo~h2, #custom-logo~#title{
margin-left: 200px;
}
.title
{
margin-left: 200px;
padding-top: 35px;
}
#header{
padding-bottom: 0;
min-height: 110px;
overflow: visible;
z-index: 3;
}
#content{
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
padding-bottom: 40px;
}
* html #content{
height: 100%;
}
#footer
{
color: #FFFFFF;
font-size: 12px;
padding: 35px 0 75px;
text-align: center;
margin: 0 auto;
}
#footer p{
color: White;
}
#footer a, #footer a:visited
{
color: #E0FFC1;
}
#framework_info
{
color: #C0C0C0;
font-size: 10px;
margin-top: 10px;
}
#framework_info a
{
color: #CCFF99;
text-decoration: none;
}
#top-nav{
background-color: White;
padding: 5px 30px 20px ;
}
#top-nav ul, .command-bar{
float: left;
height: 20px;
top: 10px;
background: #58A618 url('fletcherallen/images/ui-bg_gloss-wave_75_58a618_500x100.png') repeat-x 50% 50%;
padding: 5px 0px 10px 0px;
border: solid 1px #002f5f;
margin-left: 0;
}
#top-nav li{
display: inline;
float: left;
}
#top-nav a, #top-nav a:visited
{
display: inline;
float: left;
padding: 6px 30px 2px;
color: white;
text-decoration: none; /*font-weight: bold;*/
border-right: dashed 1px White;
font-family: Tahoma;
text-transform: capitalize;
font-weight: bold;
font-size: 15px;
letter-spacing: 0.025em;
height: 20px;
}
#top-nav a:hover
{
color: #344869;
}
#top-nav li:last-of-type a{
border-right: none;
}
#top-nav ul, .highlights, .example, .command-bar{
-moz-border-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
}
.highlights
{
border: 1px solid #002f5f;
height: 100%;
min-height: 200px;
float: left;
}
.side-nav{
height: 600px;
}
.template .section
{
background-color: #E8E8E8;
border: dotted 1px Gray;
}
.template .section .section
{
background-color: #CFCFCF;
border: dotted 1px Gray;
}
/* INPUT *********************************************************************************************/
input[type="text"], textarea, select
{
-moz-border-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
border: 1px solid #3366FF;
height: auto;
padding: 2px;
}
.textbox, textarea, select{border: 1px solid #3366FF;}
input[type="text"], input.textbox, select, textarea
{
background-color: #F4FFF5;
}
input.required, textarea.required, select.required
{
background-color: #FFFFCC;
}
.required-label, .reqnote
{
background-position: 0 5px;
background-image: url('fletcherallen/images/required.gif');
background-repeat: no-repeat;
padding-left: 10px;
}
.reqnote{
font-size: 13px;
font-style: italic;
float: right;
font-family: Trebuchet MS, Sans-Serif;
background-position: 0 10px;
padding-top: 10px;
}
.radiobutton,
.checkbox,
input[type="radio"],
input[type="checkbox"]
{margin-top: 3px;}
input[type="submit"].ui-state-default, input[type="button"].ui-state-default, .button.ui-state-default{
padding: 5px;
}
input.submit.ui-state-default{
padding: 5px;
}
input[type="radio"].disabled,
input[type="checkbox"].disabled,
input[type="radio"][disabled],
input[type="checkbox"][disabled]{
border: none 1px Silver;
cursor: default;
}
input[type="button"][disabled]
{
/*display: none;*/
}
input[type="button"]{
cursor: pointer;
}
.button
{
text-decoration: none;
padding: 5px 10px;
color: White;
background-color: #58A618;
Background: -moz-linear-gradient(center top , #58A618, #407811) repeat scroll 0 0 transparent;
cursor: pointer;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px;
}
.button:hover
{
color: #003366;
}
/*LABELS*************************************************************************************/
label, .label
{
position: relative;
display: block;
font-size: 11px;
text-transform: uppercase;
font-family: trebuchet MS, Arial, Helvetica, sans-serif;
padding: 5px 0 0;
margin: 10px 0;
clear: both;
}
input[type="radio"] label,
input[type="radio"] .label,
input[type="checkbox"] label,
input[type="checkbox"] label
{
display: inline;
margin-bottom: 0;
margin: 0 0 0 10px;
vertical-align: middle;
color: #003399;
font-size: 12px;
}
.label.error, label.error
{
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
margin-top: -7px;
padding-bottom: 15px;
}
.checkbox label,
.checkbox .label,
.radiobutton .label,
.radiobutton label
{
display: inline;
margin-bottom: 0;
margin: 0 0 0 10px;
vertical-align: middle;
color: #003399;
font-size: 12px;
}
label + .radiobutton,
label + .checkbox,
.label + .checkbox,
.label + .radiobutton,
label + input[type="radio"],
.label + input[type="radio"],
label + input[type="checkbox"],
.label + input[type="checkbox"]
{
margin-top: 5;
}
/*BUTTONS NOT FULLY BAKED**************************************************************hmmmmm
#content .fa_button, #content input[type="submit"]{
background-color: #58a618;
color: White;
font-weight: bold;
padding: 5px 10px 5px 0;
}
div.command-bar .fa_button,
div.command-bar input[type="submit"]{
background-color: ButtonFace;
color: ButtonText;
font-weight: normal;
padding: 0;
}
***********************************************************************/
.fa_button_hover
{
background-color: #70D11F;
color: #002f5f;
}
form{
height: 100%;
}
/*
.w-onethird{width: 300px;}
.w-twothirds{width: 600px;}
.w-allthirds{width: 900px;}
.w-onehalf{width: 450px;}
.w-onequarter{width: 225px;}
.w-threequarters{width: 675px;}
*/
.section, .w-allthirds, .w-full
{
display: block;
margin: 0 0 40px 0;
padding: 0 0 0 5px;
position: relative;
clear: both;
margin: 0 0 50px 0;
padding: 0 20px 0 5px;
overflow: hidden;
}
.w-onethird,
.w-twothirds,
.w-onehalf,
.w-threequarters,
.w-onequarter{
float: left;
overflow: auto;
position: relative;
padding: 0 25px 0 0;
clear: none;
overflow: hidden;
}
select.w-full,
select.w-onethird,
select.w-twothirds,
select.w-onehalf,
select.w-threequarters,
select.w-onequarter,
input.w-onethird,
input.w-twothirds,
input.w-onehalf,
input.w-threequarters,
input.w-onequarter{
float: none;
}
.w-10char{width: 75px;}
.w-20char{width: 125px;}
.w-30char{width: 200px;}
.w-40char{width: 275px;}
.w-50char{width: 325px;}
.w-60char{width: 400px;}
.w-onethird{width: 30%;}
.w-twothirds{width: 62%;}
.w-onehalf{width: 46.5%;}
.w-onequarter{width: 22%;}
.w-threequarters{width: 70%;}
.w-full{width: 97%;}
.w-onethird input,
.w-twothirds input,
.w-allthirds input,
.w-onehalf input,
.w-threequarters input,
.w-onequarter input,
.w-onethird select,
.w-twothirds select,
.w-allthirds select,
.w-onehalf select,
.w-threequarters select,
.w-onequarter select,
.w-onethird textarea,
.w-twothirds textarea,
.w-allthirds textarea,
.w-onehalf textarea,
.w-threequarters textarea,
.w-onequarter textarea
{
max-width: 80%;
margin: 6px 0;
position: relative;
display: block;
}
.h-50p{height: 50px;}
.h-100p{height: 100px;}
.h-150p{height: 150px;}
.h-200p{height: 200px;}
.h-250p{height: 250px;}
.h-300p{height: 300px;}
.h-400p{height: 400px;}
.h-500p{height: 500px;}
.h-600p{height: 600px;}
.h-700p{height: 700px;}
.h-800p{height: 800px;}
.h-900p{height: 900px;}
.h-1000p{height: 1000px;}
.h-onequarter{height: 22%;}
.h-onethird{height: 30%;}
.h-twothirds{height: 62%;}
.h-all{height: 98%;}
.example
{
margin: 10px;
position: relative;
background-color: #EBFFD7;
border: thin solid #CCFF99;
padding: 10px 20px;
}
.section h2
{
/*border-bottom: 2px solid #9BC66C;*/
margin-bottom: 10px;
}
/*
.section .section p, .section .section h2, .section .section h3
{
font-size: 80%;
}
.section .section p{
color: #003399;
}
*/
/**************************** jquery UI correction ***********************/
.ui-tabs .ui-tabs-panel{
width: Auto;
}
.ui-widget{
font-size: 0.75em;
}
/*strange disapearing select box content bug in ie6 if font is set smaller than 13px?????*/
.ui-widget select, .ui-widget option
{
font-size: 13px;
}
.ui-widget.ui-tabs, .ui-widget .ui-tabs, .ui-widget .ui-tabs-nav{
padding: 0;
}
.ui-widget ul{
padding: 0;
}
.ui-widget{
border: none;
background: none;
}
.ui-widget-header{
background: none;
border: none;
border-bottom: solid 1px #002f5f;
}
.ui-widget .ui-widget-header{
background: White none repeat scroll 0 0;
border: none;
border-bottom: solid 1px black;
}
.ui-widget .ui-tabs-selected{
background: none;
background-color: White;
}
.ui-tabs-panel{
border-left: solid 1px #002f5f !important;
border-right: solid 1px #002f5f !important;
border-bottom: solid 1px #002f5f !important;
}
.ui-accordion .ui-accordion-header{
display: block;
padding: 5px 5px 5px 20px;
}
.ui-accordion .ui-accordion-header.ui-state-active{
background: none;
background-color: White;
}
.ui-tabs .ui-tabs-nav, .ui-tabs{
border-right: none !important;
border-left: none !important;
}
#ui-datepicker-div{
background-color: White;
z-index: 2;
}
.ui-datepicker-header{
background: #002F5F url(fletcherallen/images/ui-bg_gloss-wave_75_002f5f_500x100.png) repeat-x scroll 50% 50% !important;
}
span .ui-timepickr{
font-size: 16px;
}
.ui-custom-icon-button{
cursor: pointer;
height: 16px;
width: 16px;
margin-left: 5px;
margin-top: 7px;
}
/************************* TABLES *************************************/
tr{
color: #666666
}
td{
line-height: 20px;
padding: 5px 2px;
}
th{
background-color: #002f5f !important;
color: White !important;
padding: 5px 2px;
}
th *{color: White !important;}
/*
td{
border: 1px solid Transparent;
padding: 5px 2px;
}
tr{
border: 2px solid #CCCCCC;
}
tr:nth-child(odd){background-color: #EAF4FF;}
tr:nth-child(even){background-color: White;}
table tr:last-child{background-color: #002f5f;}
table tr:last-child td:last-child{background-color: #002f5f;}
input.disabled, select.disabled, textarea.disabled
{
color: #808080;
background-color: #F0F0F0;
}
.disabled input, .disabled select, input[disabled], select[disabled], textarea[disabled], input[type="text"].disabled, select.disabled, textarea.disabled
{
border: solid 1px Silver !important;
color: #528F55;
background-color: #F0F0F0 !important;
}
.watermark
{
color: #777DBB;
}
div.button{
display: inline;
position: relative;
}
.group-hor{
position: relative;
display: block;
width: auto;
height: auto;
padding: 0;
margin: 0;
clear: both;
}
.group-hor input, .group-hor div, .group-hor label, .group-hor select, .group-hor textarea{
display: inline;
float: left;
}
div.error{
padding: 10px;
margin: 5px 0;
}
input.error, select.error, textarea.error{
border: 1px solid Red !important;
}