/*.......................................Main Areas ............................................................................*/

body  { font:  0.9em Arial, Helvetica, sans-serif; background: #ffffff; margin: 0; padding: 0; text-align: center; color: #333333; }
/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults and text align center - centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

#container { width: 900px; background: #FFFFFF; margin: 0 auto; text-align: left; }
/* the auto margins (in conjunction with a width) center the page and the text align left overrides the text-align: center on the body element. */
 
h1 {color:#000066; font-size:1.4em; padding-top: 10px;  }
h2 {color:#333333; font-size:1em;}
a { color:#000066; text-decoration:none }
a:hover { color:#333333; text-decoration:underline }
.small {font-size:0.75em}
.smallitalic {font-size:0.75em; font-style:italic}
.italic {font-style:italic}


/*.......................................Header ............................................................................*/

#header { background:url(../images/RecomHeader.jpg) no-repeat; height: 150px; width: 900px; }

/*top links....................*/
#toplink {position: relative; width: 900px; height: 30px; padding:10px 0px 0px 0px; margin:0px; font-size:1em; }
.topmenu {display:block; float:right;  list-style:none;}
.topmenu li{display:block; float:right; padding-right:5px; padding-left:5px; }
.topmenu li a{text-decoration:none; color:#333333}
.topmenu li a:hover{text-decoration:underline;}
#toplink li.separator{ background:url(../images/separator.jpg) bottom right no-repeat;}
#toplink li.separator a{padding-right:5px}

/*contact link....................*/
#email { position: relative; width: 900px; padding:40px 0px 0px 0px; margin:0px; font-size:1.5em; }
.emailbox {display:block; float:right;  list-style:none; line-height:20px;  text-align:right; color:#262261; }
.emailbox a{padding-right:5px; padding-left:5px; color:#262261; }

/*.......................................Main Navigation ............................................................................*/

.navbar {padding:0 0 0 42px; margin:0; list-style:none; height:35px; background:url(../images/Navigation/nav.gif);}
.navbar li {float:left;}
.navbar li a {display:block; float:left; height:35px; line-height:33px; color:#ffffff; text-decoration:none; text-align:center; padding:0 0 0 14px; cursor:pointer; font-size:11px;}
.navbar li a b {float:left; display:block; padding:0 28px 0 14px;}
/*sets the top level navigation bar when the group is selected, set the property in the modify template command*/
#Home .navbar li.Home a, 
#OurWork .navbar li.OurWork a,
#MoreInformation .navbar li.MoreInformation a,
#Volunteering .navbar li.Volunteering a,
#ContactUs .navbar li.ContactUs a,
#DellWelcome .navbar li.DellWelcome a, 
#DellDonations .navbar li.DellDonations a, 
#DellInformation .navbar li.DellInformation a, 
#DellContactUs .navbar li.DellContactUs a {color:#fff; background:url(../images/Navigation/nav_select.gif);}

#Home .navbar li.Home a b, 
#OurWork .navbar li.OurWork a b,
#MoreInformation .navbar li.MoreInformation a b,
#Volunteering .navbar li.Volunteering a b,
#ContactUs .navbar li.ContactUs a b,
#DellWelcome .navbar li.DellWelcome a b, 
#DellDonations .navbar li.DellDonations a b, 
#DellInformation .navbar li.DellInformation a b, 
#DellContactUs .navbar li.DellContactUs a b{background:url(../images/Navigation/nav_select.gif) no-repeat right top;}

.navbar li a:hover {color:#fff; background: url(../images/Navigation/nav_hover.gif);}
.navbar li a:hover b {background:url(../images/Navigation/nav_hover.gif) no-repeat right top;}

#Home .navbar li.Home a:hover, 
#OurWork .navbar li.OurWork a:hover,
#MoreInformation .navbar li.MoreInformation a:hover,
#Volunteering .navbar li.Volunteering a:hover,
#ContactUs .navbar li.ContactUs a:hover,
#DellWelcome .navbar li.DellWelcome a:hover,
#DellDonations .navbar li.DellDonations a:hover,
#DellInformation .navbar li.DellInformation a:hover,
#DellContactUs .navbar li.DellContactUs a:hover{color:#fff; background: url(../images/Navigation/nav_hover.gif); cursor:default;}

#Home .navbar li.Home a:hover b, 
#OurWork .navbar li.OurWork a:hover b,
#MoreInformation .navbar li.MoreInformation a:hover b,
#Volunteering .navbar li.Volunteering a:hover b,
#ContactUs .navbar li.ContactUs a:hover b,
#DellWelcome .navbar li.DellWelcome a:hover b,
#DellDonations .navbar li.DellDonations a:hover b,
#DellInformation .navbar li.DellInformation a:hover b,
#DellContactUs .navbar li.DellContactUs a:hover b{background:url(../images/Navigation/nav_hover.gif) no-repeat right top;}

.navbar li.Right {float:right}
.navbar li.Right a {font-size:10px; font-style:italic; padding:0 0 0 7px; color:#CCCCCC; border-left:solid 5px #FFFFFF; }
.navbar li.Right b {padding: 0 14px 0 7px}
.navbar li.Right a:hover {color:#FFFFFF}

/*Sidebar Navigation ......................*/
#sidebar1 { float:left; width: 130px; font-family:arial, verdana, sans-serif; padding:20px 0px 75px 0px; background:url(../images/Navigation/sidebar1.jpg) bottom right; margin: 0px;  }
/* since this element is floated, a width must be given and this is the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width.  The background color will be displayed for the length of the content in the column, but no further */
#sidebar1 ul{ padding:0px; margin: 0px; }
#sidebar1 li{ font-size:11px; list-style:none; padding: 0px; text-align:right; }
#sidebar1 a{ display: block; text-decoration:none; color:#666666; padding: 2px 10px 2px 0px; margin: 4px; border: #CCCCCC solid 1px; }
#sidebar1 a:hover { background:#FFFFFF; border:#000033 solid 1px; color:#000000 }
#sidebar1 .submenu a{ padding-right:15px; font-style:italic ; font-size:10px; background:#ffffff; margin: 0px 4px; border-top:none; border-bottom:none; border-right:solid 1px #000033; border-left:solid 1px #000033 }
#sidebar1 .current a{ background:#ffffff; color:#000000; margin-bottom:0px; border:#000033 solid 1px; border-top:#000033 solid 1px; border-bottom:#000033 solid 1px; border-right:#000033 solid 5px;}
#sidebar1 a.bottom { border-bottom:solid 1px #000033}
#sidebar1 img {width:120px; padding:0px}


/*.......................................Main Content  ............................................................................*/

#mainContent {margin: 0px 0px 0px 160px; padding: 0px 0px 20px 0px ; position:relative;  }
/* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. Remember that padding is the space inside the div box and margin is the space outside the div box */

#singleColumn {margin: 0px ; padding: 0px 0px 20px 10px ; position:relative;  }
#leftColumn {margin: 0px; padding:0px 0px 20px 0px; width:450px; position:relative}

.block { padding: 0px 0px 0px 10px;  }
.block h1 {padding-left:0px}

.address p{padding:0px; margin:0px}

/*Tabs above the picture floating right....................*/
#toptabs {position:relative; font-size:12px; height:55px; width:318px;}
#toptabs ul {padding:0; margin:0; list-style:none; width:318px; height:35px; }
#toptabs li {float:right; height:35px; margin:0 0 0 3px}
#toptabs li a {float:left; display:block; padding:0 0 0 5px; height:35px; line-height:35px; background: url(../images/Navigation/toptabs.png) no-repeat left top; color:#666666 ;}
#toptabs li a b {float:left; height:35px; display:block; padding:0 9px 0 5px; background:url(../images/Navigation/toptabs.png) no-repeat right top; cursor:pointer; }
#toptabs li:hover a b {color:#000; }

/*Container for the picture and the top tabs....................*/
.floatright {float: right; width: 318px; /*background:url(../images/Navigation/sidebar1.jpg) bottom right*/; padding:50px 0 0 0; border-left:10px solid #FFFFFF}
/*wide white left border creates some space between the text and the picture*/

/*.newscrumbs a{ font-weight: normal; padding-right: 2px; }*/
.blockborder {border-top: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; border-right:1px solid #333333; border-bottom:1px solid #333333;padding: 0px 0px 0px 10px; }


/*.......................................Bottom Footer   ............................................................................*/


#bottomContent {padding: 0; margin:20px 0px;/*border-top:#ccc solid 2px; */}

/*..........Logos....................*/
#logos {width:450px;  float:right;   }
#logos img {float:left; margin-bottom:10px; margin-right:5px; border:0px}
#logos p{font-size:10px; font-style:italic; margin: 0; padding:0; }

/*..........Bottom Navigation Bar....................*/
#bottomnav {padding: 0px; margin: 0px 0px 0px 170px; width:720px; height:1.2em; text-align:center; }
.bottomnavbar {padding:0px; margin:0px; list-style:none; font-size:0.8em; }
.bottomnavbar li {padding: 0px; margin: 0px 9px; float:left; }


/*..........Footer  ...............................*/
#footer {padding: 0; margin:0; font-size:0.8em; color:#666666;  float:left; width:450px;   } 
#footer p {	margin: 0; text-align:left}



/*.......................................Picture and Video content.................................................................*/

#videoContent {float:right; margin: 10px 0px 10px 10px; padding:0px;}
#mainContent .floatright img {float:right; margin: 0px 0px 20px 0px; width:315px; border-right:#000000 solid 2px; border-bottom:#000000 solid 2px; border-top:#999999 solid 1px; border-left:#999999 solid 1px;}
#singleColumn .floatright img {float:right; margin: 0px 0px 20px 0px; width:315px; border-right:#000000 solid 2px; border-bottom:#000000 solid 2px; border-top:#999999 solid 1px; border-left:#999999 solid 1px;}
#mainContent .floatright img.natural, #singleColumn .floatright img.natural {width:auto; margin:auto; border:none; padding: 0px 50px 50px 50px}
#mainContent .floatright img.noborder {border: none}
/*.......................................Borders, lines and boxes.........................................................................*/
.noborder {border:none}
.borderbox { border: solid 1px #CCCCCC; margin: 10px 10px 10px 0px; padding:2px; text-align:center; position:relative}
.shade {background:#CCCCCC}
.box {width: 175px; border:solid 1px #CCCCCC; float:left; text-align:center; margin:5px; padding:5px; height:120px}


/*.......................................FAQs.........................................................................*/

#TJK_ToggleON,#TJK_ToggleOFF {display:none}
dt {font-style:italic; font-weight:bold; font-size:0.95em}
dd {font-style:italic; font-size:0.9em}



/* shows a visual seperation */
.line{ border-bottom: 2px solid #cccccc; margin-bottom: 10px; margin-top:4px; clear:right; padding: 0px;  }
.narrowline{ border-bottom: 1px solid #cccccc; margin-bottom: 5px; margin-top:4px; clear:right; padding: 0px }


/*.......................................Site Map.........................................................................*/

.toplevel li { font-weight:bold; font-size:1.1em; padding: 5px 0px; }
.secondlevel li { font-weight:normal; font-size:0.9em; padding:0px}
.thirdlevel li{font-size:0.9em; font-style:italic}
.fourthlevel li { list-style:none}
.fourthlevel a {font-size:1em; font-style:italic; color:#333333; }





/*.......................................Miscellaneous Text.........................................................................*/
.ital {font-style:italic; color:#000066}
.block li {margin-bottom:5px; }
.nounderline {border:none; text-decoration:none}

/*.......................................Buttons  ............................................................................*/
/* Command buttons on pages */
/*.actionbuttons{ text-align:right; position: relative; padding: 1px 1px 1px 1px; }
*/
.buttonsmall {height: 22px; padding-bottom: 6px; padding-left: 5px; padding-right: 5px; cursor: pointer; width: 100px; }
.buttonlarge {height: 50px; margin: 10px; cursor: pointer; width: 175px; }

/*Content Buttons*/
/*.contentButton { height:36px; background: url(../images/content_button.jpg) no-repeat; }
*//*.contentButton p { color:#FFFFFF; font-size:1.1em; line-height:28px; margin-left:10px}
*/
/*.contentButton a { color:#FFFFFF; font-size:1.1em; line-height:28px; margin-left:10px}
.contentButton a:hover { font-weight:bold; text-decoration:none; cursor:pointer }
*/
/* applies padding to buttons where necessary */
/*.wrapsmall {padding-bottom:18px}
.wrap {padding-bottom:24px}
*/
/*.......................................Forms  ............................................................................*/
/*#formwrap { padding: 0px; width:600px; }
fieldset { border:none; margin:1em 0em; padding:10px 0px 20px 0px }
#formwrap p { line-height:1; margin:1.4em 0em; position:relative }
*/
/*General input settings used on variety of buttons which use a form function*/
input {width: 100px; /*background:#DDDBF7*/ }
input:hover, .block input:hover {cursor:pointer}
.block input {position:relative; width: 175px; height: 30px; margin:0px; padding:0px }
textarea { width:500px; margin-top:0.5em; height:100px }
input:focus, textarea:focus {background: #DDDBF7; border:2px solid #000066}


/*buttons structures which use form function to provide 2 and 3 buttons side by side on the page*/
.twobutton {margin:auto; width:244px; }
.twobuttonlarge {margin:0px; width: 394px; height:35px;  }
.threebuttonlarge {margin:auto; width:591px; height:35px}
.borderbox form {width:122px; float:left;}
.block form {width:197px; float:left }


/*span.required { position:absolute; left:365px; top: 0px; font-size: 0.8em; color: #262261; font-style:italic }
*/

/*left margin on fieldset is set at -10px to reset the padding inserted at singleColumn*/
fieldset {display:block; width:100%; padding: 10px 0px 20px 15px; border: 1px solid #000000; background:#F8F2FF; margin: 20px 0px 10px -10px; display:block; }
legend {display:inline; background:#F8F2FF; border-top:1px solid #000000; border-right:1px solid #000000; border-left:1px solid #000000; padding:2px 5px; margin:-2px 0px 20px -18px; font-size:1.1em; font-weight:bold}
label {float:left; margin-right:1em; margin-left:1em; width: 200px; position:relative }
label.top {display:block; float:none}

/*sets specifc label and input settings*/
#DonationInformation label  {width:250px; font-size:0.9em; float:none }
.collection label {width:250px; font-size:0.9em; float:none; }
#DonationForm input {width:250px;}
#DonationForm input.radio, #DonationForm input.checkbox, #DonationForm input.submit {width:auto;}

/*this shifts the label of information required off to the left, while leaving it before the text input box so more logical for readers*/
/*label .required {position: absolute; margin-left:6em; left:400px; font-style:italic; font-size:0.8em; padding: 0 0 5px 20px; width:400px; float:none}
*/
/*This keeps the field required information for readers but doesn't show it on the screen*/
label .required {display:none}
#DonInfo {margin:20px 0px}
#DonInfo label {float:none; display:inline; padding-left:5px}

/*creates a column effect*/
div.group1, div.group2, div.group3 {float:left; width:20em; padding-left:5px}
.collection div.group1, .collection div.group2, .collection div.group3 {float:left; width:30em; padding-left:5px}

/*.......................................Tables  ............................................................................*/
table {border: 1px solid #000099; font-size:0.8em; padding:3px}
table th {background-color:#000066; color:#FFFFFF}
table td {padding-left:5px; border-bottom:1px solid #CCCCCC}



/*.......................................Miscellaneous  ............................................................................*/

/*Floats....................*/

.fltrt { float: right;}
/* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

.fltlft { float: left;}
/* this class can be used to float an element left in your page */

.clearfloat {clear:both; height:1px; font-size: 0px; float:none ; border:none ;}
/* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */