/* Custom styling for DonationsTracker site */

/* Custom colors matching original site theme */
:root {
  --dt-orange: #E7572A;
  --dt-blue: #0072E6;
  --dt-yellow: #C59E15;
  --dt-dark: #404040;
  
  /* Font family variables */
  --dt-heading-font: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --dt-body-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  
  /* Font weight variables */
  --dt-font-light: 300;
  --dt-font-regular: 400;
  --dt-font-medium: 500;
  --dt-font-semibold: 600;
  --dt-font-bold: 700;
}

/* Override Bootstrap primary colors with site colors */
.bg-primary {
  background-color: var(--dt-blue) !important;
}

.text-primary {
  color: var(--dt-orange) !important;
}

.btn-primary {
  background-color: var(--dt-blue);
  border-color: var(--dt-blue);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #005bb8;
  border-color: #005bb8;
}

.btn-warning {
  background-color: var(--dt-orange);
  border-color: var(--dt-orange);
  color: white;
}

.btn-warning:hover, .btn-warning:focus {
  background-color: #c94b23;
  border-color: #c94b23;
  color: white;
}

/* Typography */
body {
  font-family: var(--dt-body-font);
  color: var(--dt-dark);
  font-weight: var(--dt-font-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dt-heading-font);
  font-weight: var(--dt-font-semibold);
  line-height: 1.2;
}

/* Table styling */
.border {
  border: 1px solid #dee2e6;
}

/* Links */
a {
  color: var(--dt-blue);
  text-decoration: none;
}

a:hover {
  color: var(--dt-orange);
  text-decoration: underline;
}

a.nounderline:hover {
  text-decoration: none;
}

/* Navigation */
.navbar-brand {
  font-family: var(--dt-heading-font);
  font-weight: var(--dt-font-bold);
}

/* Utility classes */
.center {
  text-align: center;
  display: block;
}

/* Custom button styling */
.button--primary, .button--secondary {
  display: inline-block;
  padding: 8px 16px;
  font-family: var(--dt-body-font);
  font-weight: var(--dt-font-semibold);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.button--primary {
  background-color: var(--dt-blue);
  color: white;
  border: 1px solid var(--dt-blue);
}

.button--secondary {
  background-color: var(--dt-orange);
  color: white;
  border: 1px solid var(--dt-orange);
}

.button--primary:hover, .button--secondary:hover {
  opacity: 0.9;
  text-decoration: none;
  color: white;
}

/* Larger font for campaign metrics */
.campaign-metrics {
  font-family: var(--dt-body-font);
  font-size: 1.2rem;
  font-weight: var(--dt-font-semibold);
}

BODY { 	
  color: #330066;
  background: #FFFFFF;
  word-break: normal; 
  text-wrap: normal;
  font-size: 1em;
  font-family: var(--dt-body-font);
}

P.logo {
	font-weight: normal;
	font-size: 25px;
	}

span.logo {
	font-weight: bold;
	font-size: 15px;
	font-style: normal;
	}

span.small {
	font-weight: normal;
	font-size: 0.9em;
	font-style: normal;
	}

span.smallermenu {
	font-size: 14px;
	text-indent: 15;
	}

TD.content {
        padding: 15px;
        margin: 5px;
	}


HR  {	color: #E7572A;
	xwidth: 90%;
	background-color: #E7572A;
	border: 1px solid  #E7572A;
	}

HR.separator {
	height: 10px;
	border: 5px solid  #E7572A;
	}

IMG {	border: 0;
	}

H1, H2 { color: #330066;
}

H3, H4 { color: #330066; 

	}



P,P.red,P.bigger { 	
	text-indent: 0;
	color: #330066;
	font-size: 1em;
	}



P.red  { color: red;}
P.bigger  { font-size: 1.2em;}

P.result { color: red;
	text-indent: 100px;
	font-size: 1.5em;
	text-align: left;

	}

span.welcome {
	text-indent: 0;
	color: #000000;
	font-size: 1.2em;
	}
 
span.notname {
	text-indent: 0;
	color: #000000;
	font-size: 1em;
	}

LI { font-size: 80%;
        }



P.crumb {
	font-weight: bold;
	font-size: smaller;
	color: #C0C0C0;
	}
P.q	{
        font-weight: bold;
	font-style: italic;
	margin-bottom: 0px;
	padding-bottom: 0px;
	}

P.a	{
	text-indent: 20px;
        margin-top: 0px;
        padding-top: 0px;
        }


div.example { border-width: 1px;
	border-spacing: 0; 
	border-style: solid;
	border-color: #E7572A;
	background-color: #FFE0CC;
	padding: 5px 5px 5px 5px;
	margin: 5px;
	width: 95% }



div.alert {
	background-image: url('http://www.donationstracker.com/images/alert.gif');
	background-repeat: no-repeat;
	background-position: center left;
	border-width: 1px;
        border-spacing: 0;
        border-style: solid;
        border-color: #E7572A;
        background-color: #FFE0CC;
	padding: 5px 5px 5px 45px;
	margin: 5px;
	text-indent: 0px;
        width: 320px;
	#height: 40px;
	color: #330066;
	vertical-align: middle;
	font-size: 1em;
 }

div.samplew { border-width: 1px;
        border-spacing: 0;
        border-style: solid;
        border-color: #E7572A;
        background-color: #FFFFFF;
        padding: 5px 5px 5px 5px;
        margin: 5px;
        width: 95% }


div.sample { border-width: 1px;
        border-spacing: 0;
        border-style: solid;
        border-color: #E7572A;
        background-color: #FFE0CC;
	padding: 5px 5px 5px 5px;
	margin: 5px;
        width: 95% }

div.box { border-width: 1px;
        border-spacing: 0;
        border-style: solid;
        border-color: #E7572A;
        background-color: #FFE0CC;
	padding: 5px 5px 5px 5px;
	margin: 5px;
        width: 95% }

div.adbox { border-width: 1px;
        border-spacing: 0;
        border-style: solid;
        border-color: #E7572A;
        background-color: #FFFFFF;
        padding: 5px 5px 5px 5px;
        margin: 5px;
        width: 200px }

div.dtfacebook { 
        border-width: 1px;
        border-spacing: 0;
        border-style: solid;
        border-color: #000000;
        background-color: #FFFFFF;
        padding: 5px 5px 5px 5px;
        margin: 5px;
        width: 300px;
}

P.adbanner {
	font-size: 0.7em;
	text-align: center;
	margin: 0px;
	padding: 0px;
	}

P.adboxhead {
        font-size: 0.8em;
        text-align: left;
	font-weight: bold;
	text-decoration: underline;
        margin: 0px;
        padding: 0px;
        }

P.adboxtext {
        font-size: 0.7em;
        text-align: left;
        font-weight: normal;
        text-decoration: none;
        margin: 0px;
        padding: 0px;
        }



div.smaller {
	font-size: small;
}

div.adbanner {
	border-width: 1px;
        border-spacing: 0;
        border-style: solid;
        border-color: #E7572A;
        background-color: #FFE0CC;
        padding: 0px;
	margin: 0px;
        text-align: center;
	}


div.offline {visibility: hidden;
	display: none;
}

div.whiteboxlong { border-width: 1px;
        border-spacing: 0;
        border-style: solid;
        border-color: #E7572A;
        background-color: #FFFFFF;
        padding: 5px 5px 5px 5px;
	margin: 5px;
        width: 95%;
	 }

div.whitebox { border-width: 1px;
        border-spacing: 0;
        border-style: solid;
        border-color: #E7572A;
        background-color: #FFFFFF;
        padding: 5px 5px 5px 5px;
	margin: 5px;
        }


p.bottommenu {font-size: 0.8em; }

TD.currentmenu  {
	border-width: 0px 1px 0px 0px;
        border-spacing: 0px;
        border-style: solid;
        border-color: #E7572A;
	}

A.menu,A.menuselected,A.dt {
	font-weight: normal;
	font-size: 16px;
	vertical-align: middle;
	text-align: left;
	xxpadding: 5px 5px 5px 5px;
	margin-left: auto;
	margin-right: auto;
	text-indent: 0;
	color: #330066;
	text-decoration: none;
	}

.bold {
	font-weight: bold;
	}

A.blue {
	font-weight: normal;
	color: #330066;
	}



A.nounderline {
	text-decoration: none;
	color: #330066;
	}


A.menuselected {
	font-weight: bold;
	color: #E7572A;
	}

A.menu:link {
	}
A.menu:visited {
	}
A.menu:active {
	}
A.menu:hover {
	text-decoration: underline;
	color: #C59E15;
	}
A.menu img {
        vertical-align: middle;	
	}


TABLE.whatsnew {
        background-color: #FFFFFF;
        padding: 0px;
        border-spacing: 0px;
	border-collapse:collapse;
        }
TR.whatsnew,TR.whatsnewhead {
	border-spacing: 0;
	padding: 0px;
	border-collapse:collapse;
	}

TD.whatsnew {
	background-color: #FFFFFF;
        border-spacing: 0;
        border-style: solid;
        border-color: #E7572A;
	border-width: 0px 1px 1px 1px;
	padding: 5px 5px 5px 5px;
	border-collapse:collapse;
        vertical-align: middle;
        text-align: center;
	}
TD.whatsnewhead {
        background-color: #E7572A;
        border-spacing: 0;
        border-style: solid;
        border-color: #E7572A;
	font-weight: bold;
        border-width: 1px 1px 1px 1px;
	border-collapse:collapse;
        padding: 5px 5px 5px 5px;
        vertical-align: middle;
        text-align: center;
	}

TABLE.border,TABLE.normal {
        background-color: #FFFFFF;
        padding: 0px;
        border-spacing: 0px;
        border-collapse:collapse;
        }

TD.border,TH.border,TH.borderorange {
        border-spacing: 0;
        border-style: solid;
        border-color: #E7572A;
        border-width: 1px 1px 1px 1px;
        padding: 5px 5px 5px 5px;
        border-collapse:collapse;
        }

TD.normal,TH.normalhead{
        border-spacing: 0;
	font-size: 80%;
	text-align: center;
        border-style: solid;
        border-color: #E7572A;
        border-width: 1px 1px 1px 1px;
        border-collapse:collapse;
	}

TH.borderorange {
	background-color: #E7572A;
	}