/* Base definitions */
body
{
    /*Zero out paddings and margins for the entire page. */
    margin: 0;
    padding: 0;
    font-size: small; /*Assigning a base font-size with keyword small */
    color: #1a3b69;
    font-family: Verdana, Sans-Serif, 'Trebuchet MS' , Arial; /*This is the basefont information */ /*font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; */
    background: #fff;
}



/* Main div - wrap */
#wrap
{
    /*min/max width is a fluid layout which prescribes the range       the image will expand and contract. Users of browsers other       than IE will expand from these. */
    min-width: 500px;
    max-width: 1400px; /* position wrap-bg.gif 70% from left, repeating it vertically from the top. By repeating the image vertically        from the top, the whole screen is filled with this background. */ /*background: url(arpcipsc/Images/LayoutImages/wrap-bg.gif) repeat-y  0;*/
    background: url(../../Images/LayoutImages/wrap-bg.gif) repeat-y 70% 0;
}


#header
{
    /*Add 3px solid border to the bottom of the entire row thus ensuring           that the border will always sit at the very bottom regardless of the           size or amount of text that's above it. */
    background: url(../../Images/layoutimages/mastheadback.gif	) #828377 repeat-x top left; /*background: url(../../Images/layoutimages/BannerTileBackground.gif) #828377  repeat-x top left;*/
    background-repeat: repeat-x;
    background-position: left top; /*background-color: #00659C;*/ /*background-color: #b4e637;*/
    border-bottom: 0px solid #87B825; /*We also added a solid background color and the horizontally tiled 		  image that will add the gradient fade to the row. */
}


#header h1
{
    /* For the h1 that sits inside <div id="header">, we've adjusted its       margins and padding, changed it's type face to Georgia, Serif and            increase it's font-size from the base (declared in "body") by a            percentage of 150%.             Giving a padding of 25px all the way around the heading will*/
    margin: 0;
    padding: 25px;
    font-family: Georgia, Serif;
    font-size: 150%;
    color: #FFFF80;
    background: url('../../Images/Pictures/Chris_shooting-nationals-Half.png');
    background-repeat: no-repeat;
    background-position: left top;
    margin-left: 40px;
}

#logininfo
{
    float: right;
    margin: 0;
    padding: 25px 25px;
    font-weight: bold;
    height: 18px;
}

/*******************************************************************/
/*                        	 The message row                        */
/*******************************************************************/

#message
{
    margin: 0;
    padding: 10px;
    font-size: 90%;
    color: #cc9;
    text-align: center; /*Tile/blend image on top of dark-green background color (#404530) and repeat it "flushed" to the     top of the row. This will ensure that  the design details will remain intact regardless of what is contained              inside the row. */
    background: #404530 url(../../images/LayoutImages/horizontalnav-bg2.jpg) repeat-x top;
}


/*Add an image to the left of the word "Special" enclosed in <strong> */
#message strong
{
    /*Add 28px padding to the left of the text "xxxx" just to enough to accomodate the xxxxx image. 					  0 0 0 28px means 0 top padding, 0 right padding, 0 bottom padding, 28px left padding */
    padding: 0 0 0 28px;
    color: #FFFF00; /*background: url(../../Images/LayoutImages/xxxxx.gif) no-repeat 0px 50%;*/
}

/*******************************************************************/
/*                        Horizontal navigation bar                */
/*******************************************************************/
#horizontalNav
{
    font-size: 95%;
    margin-top: 1px;
    padding-top: 5px;
    padding-left: 50px;
    height: 25px; /*background-image: url(../../images/layoutimages/horizontalnav-bg2.jpg);*/
    background: #404530 url(../../images/LayoutImages/horizontalnav-bg2.jpg) repeat-x top;
}


#horizontalNav a
{
    font-size: 85%;
    color: #FFFFFF;
    vertical-align: middle;
    font-weight: lighter;
}

#horizontalNav a:hover
{
    /*color:#A7CE51; 	color:#FFFF80; 	text-decoration:underline; 	*/ /*background-color:ButtonShadow;*/
    border-top: 1px solid #1a4c76;
    color: #FFFF80;
    text-decoration: underline;
    font-family: ": Lucida Grande" , Sans-Serif;
    font-size: 95%; /* This will increase/decrease the font when hovering*/
    font-weight: Normal;
}


#topNavItems
{
    padding-left: 20px;
    float: left; /*   font-family: ": Lucida Grande" , Sans-Serif;*/
    font-size: 120%;
}





/******************************************************************************************/
/*                                           Content                                      */
/******************************************************************************************/

/*Layout structure. Note: The content and sidebar are floated against
  each other.*/
#content
{
    /*Float the content column right giving it a width of 70% */
    float: left;
    width: 70%; /*Making the width of content column 70% and float it to the left */
    font-size: 95%; /*Making smaller the "font-size: small" declared in the body by 5% */
    line-height: 1.5em; /*Increasing space between lines. */
    color: #333; /*Forecolor - dark gray*/ /*The content column has a bottom margin of 10px to create a space       between the column and the footer. */
    margin-bottom: 10px;
}


/* Gutters  */
/* To give the content and sidebar columns different values in terms of padding,
           we've added two declarations. On the content column, we added 25px of padding
           all the way around, while in the sidebar we added 15px of padding all around.
           We also added in the content gutter a yellow gradient fade(image) that repeat horizontally (repeat-x)
           flushed accross the top row.*/
#content .gutter
{
    /*This will put a 25px padding around the content div */
    padding: 25px; /*Repeat-x means repeat horizontally and flush the image to the top row. Left ????*/
    background: url(../../images/LayoutImages/content-bg.gif) repeat-x top left;
}

/* Content */
#content h2
{
    /*These will only affect text enclosed in <h2> tag. */
    margin: 0 0 1em 0; /*Only the bottom will have a margin (1em). */
    padding: 0; /*Zero all the way around. */
    font-family: Verdana, Georgia, Serif;
    font-size: 110%; /*Increase the base font by 150% */
    font-weight: normal; /*Headings default to bold. We reversed that by specifying "normal". */
    color: #663; /*Assign an olive-green fore color. */
}

#content p
{
    text-indent: 15px;
}

/* dl - Description List. It is usually used to format Title-Description pair */
dl.feature
{
    margin: 15px 0; /* Put a margin in the dl 15px on top and bottom. Zero on right and let margins. */
    padding: 15px; /*pad the "dl" 15px all the way around */
    border-top: 3px dotted #ccc; /*This will put a dotted line on top of dl area */
    border-bottom: 3px dotted #ccc; /*This will put a dotted line at the bottom of dl area */
}
/*Provide a way to clear floated image. This technique involves the using
          the :after psuedo-class to insert (but also hide) a character
          after a container that clears any previous floats.*/
dl.feature:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Style the dt element. */
dl.feature dt
{
    margin: 0 0 .5em 0; /*font-family: Georgia, Serif;*/
    font-size: 125%; /*Increase the font-size (relative to the base) in percentage. */
    color: #693;
}


/* Now let's float the image to the left*/
dl.feature dt img
{
    float: left;
    margin: 0 25px 0 0; /*Put 25px margin on the right */
    padding: 0 0px 0px 0; /*Put 4px pad on right and bottom sides */ /*No repeat and flush the image to the bottom right corner of the image.               This is adding a box to achieve a shadow effect in the bottom-right               corner of the image. */ /*background: url('../../images/LayoutImages/photo-frame.gif') no repeat right bottom;*/
}
/* Let's style the dd element */
dl.feature dd
{
    margin-left: 169px;
    font-size: 95%;
    line-height: 1.5em;
    color: #666;
}


/************************************************************/
/*             Sidebar                                       */
/*************************************************************/
#sidebar
{
    /*Float the sidebar column right giving it a width of 30% */
    float: right;
    width: 30%; /*The sidebar column has a bottom margin of 10px to create a space between the column and the footer. */
    margin-top: 0px;
    margin-bottom: 10px;
    height: 1000px;
    margin-bottom: 10px; /* height: 516px;*/
}

/*For the class .gutter that resides inside sidebar, give it a 25px padding all around.*/
#sidebar .gutter
{
    padding: 18px; /*  height: 516px;*/
}

/*Let's define the properties of the "box" class. */
.box
{
    margin: 0 0 20px 0; /*Put 20px margin at the bottom. */
    padding: 0 0 12px 0; /*12px padding at the bottom*/
    font-size: 95%; /*Lets increase the font size relative to the base defined in body*/
    line-height: 1.5em; /*Let's increase the space between lines*/ /*color: #666;*/ /*This will add the right rounded corner of the box. */ /*background: #fff url(../../images/layoutimages/box-b.gif) no-repeat bottom right;*/
}



.box h3
{
    margin: 0;
    padding: 12px 12px, 12px 0px; /*12px padding all the way around*/
    font-family: Verdana;
    font-size: 85%; /*Lets increase the font size relative to the base defined in body*/
    font-weight: bold; /*color: #000040;*/
    color: #663; /*Assign an olive-green fore color. */
}
.box ul
{
    position: relative;
    -float: left;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    border-bottom: 1px solid #3373a9; /*--Bevel Effect--*/
    border-top: 1px solid #003867; /*--Bevel Effect--*/
    font-size: 85%;
    margin-bottom: 20px;
    border-top-color: #C0C0C0;
    border-bottom-color: #DBDBDB; /*border-top-color: #003867; 	border-bottom-color: #C0C0C0;*/
}

.box ul li a
{
    /*--Bevel Effect--*/ /*--Bevel Effect--*/ /*	float: left;*/
    background-position: 5px 10px; /*when not hovering make the top and bottom border #C0C0C0*/ /*border-top: 1px solid #C0C0C0;*/
    border-bottom: 1px solid #C0C0C0;
    padding: 8px 8px 8px 30px;
    display: block;
    color: #FFFFFF;
    text-decoration: underline;
    width: 90%;
    position: relative; /*--Add a relative positioning--*/
    z-index: 2; /*--z-index allows the popup to tuck underneath the nav--*/
    background: url(../../Images/layoutimages/menubar-bg.gif) #828377 repeat-x left top; /*border-top-color: #C0C0C0; 	border-bottom-color: #C0C0C0;*/
}

.box ul li a:hover
{
    background-color: #004c8d; /*background-color: #004c8d;*/
    background-position: 5px 10px; /*When hovering make the top border 1px solid gray #C0C0C0 blue*/
    border-top: 1px solid #C0C0C0;
    color: #FFFFFF;
    font-weight: normal; /*highlight with a shade of gray #858585 when hovering and show arrow.gif.*/
    background: #858585 url(../../images/LayoutImages/arrow.gif) no-repeat 5px 14px;
    border-top-color: #454545; /*border-top-color: #454545;*/
}
.box a:visited
{
    color: #FFFFFF;
}

.eventsbox
{
    height: 300px;
    margin: 0 0 20px 0; /*Put 20px margin at the bottom. */
    padding: 0 0 12px 0; /*12px padding at the bottom*/
    font-size: 95%; /*Lets increase the font size relative to the base defined in body*/
    line-height: 1.5em; /*Let's increase the space between lines*/
    width: 95%;
}



.eventsbox h3
{
    margin: 0;
    padding: 12px 12px, 12px 0px; /*12px padding all the way around*/
    font-family: Verdana;
    font-size: 95%; /*Lets increase the font size relative to the base defined in body*/
    font-weight: bold; /*color: #000040;*/
    color: #663;
    text-align: left;
}
.eventsbox p, .eventsbox ul
{
    margin: 0;
    padding: 0 12px;
    font-size: 95%;
}

.eventsbox ul li
{
    margin: 0 0 0 10px;
    padding: 0 0 0 5px;
    text-decoration: none;
    list-style: square;
    padding-top: 1em;  /*blank line in between <li> items*/
}



/*****************************************************************************/
/*                    News Div Boxes                                        /*
/*****************************************************************************/

#newsboxleft
{
    /*Float the newsbox column left giving it a width of 35% */
    clear: both;
    float: left;
    width: 47%; /*margin: 10px 10px 10px 0 ; Put 10px margin all around excep lleft margin */ /*border:1px solid #000; */
    padding: 5px; /*Put 5px padding all around */
    font-size: 95%;
}

#newsboxleft strong
{
    /* for the <strong> element that lives inside newsboxleft, add 28px padding to the left of the         0 0 0 28px means 0 top padding, 0 right padding, 0 bottom padding, 28px left padding and        make fore color red */
    padding: 0 0 0 0; /*These will only affect text enclosed in <h2> tag. */
    margin: 0 0 1em 0; /*Only the bottom will have a margin (1em). */
    padding: 0; /*Zero all the way around. */
    font-family: Verdana, Georgia, Serif;
    font-size: 110%; /*Increase the base font by 150% */
    font-weight: normal; /*Headings default to bold. We reversed that by specifying "normal". */
    color: #0000FF; /*Assign an olive-green fore color. */
}
#newsboxleft .margn
{
    margin: 10px;
}

#newsboxright
{
    clear: right; /*Float the sidebar column right giving it a width of 45% */
    float: right;
    width: 48%; /*margin: 10px 10px 10px 10px ; Put 10px margin all around excep right margin */ /*border:1px solid #000; */
    padding: 5px; /*Put 5px padding all around */
    font-size: 95%;
}

#newsboxright strong
{
    /* for the <strong> element that lives inside newsboxleft, add 28px padding to the left of the         0 0 0 28px means 0 top padding, 0 right padding, 0 bottom padding, 28px left padding and        make fore color red */
    padding: 0 0 0 0; /*These will only affect text enclosed in <h2> tag. */
    margin: 0 0 1em 0; /*Only the bottom will have a margin (1em). */
    padding: 0; /*Zero all the way around. */
    font-family: Georgia, Serif;
    font-size: 125%; /*Increase the base font by 150% */
    font-weight: normal; /*Headings default to bold. We reversed that by specifying "normal". */
    color: #693; /*Assign an olive-green fore color. */
}

#newsboxright .margn
{
    padding: 10px;
}

.fullbox
{
    margin: 0px;
    color: #666;
    border: 1px solid #000;
    width: 95%;
    clear: both;
}


/*****************************************************************************/
/*                    Admin Div Boxes                                        /*
   /*****************************************************************************/

/*Let's define the properties of the "adminmenubox" class. */
.adminmenubox
{
    margin: 0 0 20px 0; /*Put 20px margin at the bottom. */ /*Assigns even padding on both sides of any paragraph or list items*/
    padding: 0 0 12px 0; /*12px padding at the bottom and 18px on left side*/
    font-size: 85%; /*Lets increase the font size relative to the base defined in body*/
    line-height: 1.5em; /*Let's increase the space between lines*/ /*color: #666;This will add the right rounded corner of the box. */ /*background: #00659C url(../../images/layoutimages/box-b.gif) no-repeat bottom right;*/ /* background: url(../../images/layoutimages/box-b.gif) #fff no-repeat right bottom;*/
}
.adminmenubox h3
{
    padding: 12px; /*12px padding all the way around*/
    font-family: Verdana, Serif;
    font-size: 95%; /*Lets increase the font size relative to the base defined in body*/
    font-weight: normal;
    text-decoration: underline;
    text-align: left; /*color: #693; This will add the left rounded corner of the box. */ /* background: url(../../images/layoutimages/box-t.gif) no-repeat top left;*/
}

/*Let's define the properties of the "contentbox" class. */
.contentbox
{
    margin: 0 0 20px 0; /*Put 20px margin at the bottom. */
    padding: 0 0 12px 0; /*12px padding at the bottom*/
    font-size: 85%; /*Lets increase the font size relative to the base defined in body*/
    line-height: 1.5em; /*Let's increase the space between lines*/
    color: #666; /*This will add the right rounded corner of the box. */
    background: #fff url(../../images/layoutimages/box-b.gif) no-repeat bottom right;
}




/************************************************************/
/*             Footer                                       */
/*************************************************************/
#footer
{
    height: 15px;
    clear: both;
    background: url(../../Images/layoutimages/footer-bg2.jpg) #828377 repeat-x left top;
}

#footer p
{
    margin: 0;
    padding: 10px;
    font-size: 95%;
    color: #FFFFFF;
    text-align: left;
}
.subheader
{
    margin: 0 0 .5em 0;
    font-size: 95%; /*Increase the font-size (relative to the base) in percentage. */
    color: #693;
}



/************************************************************/
/*          Hacks                                   */
/*************************************************************/

/* Hides from IE/Mac \*/
* html .feature
{
    height: 1%;
}

.feature
{
    display: block;
}
#footer
{
    height: 1%;
}

/* End hide from IE/Mac */

hr
{
    color: #b45d16;
    width: 100%;
    height: 1px;
}

/************************************************************/
/*           Other Stuff                                 */
/*************************************************************/
.loginStatus
{
    font-size: 100%;
    color: #800000;
}


.AdminErrorText
{
    font-weight: bold;
    font-size: 14px;
    color: red;
    font-family: Verdana, Helvetica, sans-serif;
}

.UserInfoText
{
    font-family: Verdana, Arial;
    font-size: 9pt;
    padding-left: 5px;
    text-decoration: none;
    color: Red;
}

.BulletedListText
{
    font-family: Verdana, Arial;
    font-size: 95%;
    margin-top: 10px;
    margin-left: 20px;
    padding-left: 0px;
    text-decoration: none;
    color: Red;
}
a.UserInfoLink
{
    font-family: Verdana, Arial;
    font-weight: bold;
    font-size: 95%;
    color: #ed486d;
    line-height: 15px;
    padding-left: 5px;
    text-decoration: none;
}
a.UserInfoLink:hover
{
    padding-left: 5px;
    color: #dc143c;
}