/* Highlight empty elements for debugging */
div:empty,
span:empty,
li:empty,
p:empty,
td:empty,
th:empty {
  padding: 0.5em;
  background: yellow;
  /* Highlight empty elements */
}

/* Outline elements with inline styles */
*[style] {
  outline: 5px solid red;
  /* Identify elements with inline styles */
}

/* Outline elements with empty class or ID attributes */
*[class=""],
*[id=""] {
  outline: 5px dotted white;
  /* Identify elements with empty class or ID */
}

/* Image accessibility checks */
img[alt=""] {
  border: 3px dotted red;
  /* Images with empty alt attributes */
}

img:not([alt]) {
  border: 5px solid red;
  /* Images without alt attributes */
}

img[title=""] {
  outline: 3px dotted fuchsia;
  /* Images with empty title attributes */
}

img:not([title]) {
  outline: 5px solid fuchsia;
  /* Images without title attributes */
}

/* Table accessibility checks */
table:not([summary]) {
  outline: 5px solid red;
  /* Tables without summary attributes */
}

table[summary=""] {
  outline: 3px dotted red;
  /* Tables with empty summary attributes */
}

/* Table header styles */
th {
  border: 2px solid red;
  /* Highlight table headers */
}

th[scope="col"],
th[scope="row"] {
  border: none;
  /* Remove border for scoped headers */
}

/* Link accessibility checks */
a[href]:not([title]) {
  /* border: 5px solid blue; */
  /* Links without title attributes */
}

a[title=""] {
  outline: 3px dotted green;
  /* Links with empty title attributes */
}

a[href="#"] {
  background: cyan;
  /* Links that point to the same page */
}

a[href=""] {
  background: fuchsia;
  /* Links with empty href attributes */
}
/*
  ========================================
  Cusom fonts
  ========================================
*/

@font-face {
  font-family: Vazir;
  src: url('../fonts/vazir/Vazir.eot');
  src: url('../fonts/vazir/Vazir.eot?#iefix') format('embedded-opentype'),
	   url('../fonts/vazir/Vazir.woff') format('woff'),
	   url('../fonts/vazir/Vazir.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: VazirBold;
  src: url('../fonts/vazir/Vazir-Bold.eot');
  src: url('../fonts/vazir/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
	   url('../fonts/vazir/Vazir-Bold.woff') format('woff'),
	   url('../fonts/vazir/Vazir-Bold.ttf') format('truetype');
  font-weight: bold;
}

/*
  ========================================
  Reset CSS
  ========================================
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
  ========================================
  Grid
  ========================================
*/

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
		  box-sizing: border-box;
}

/*
  ========================================
  Clearfix
  ========================================
*/
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  clear: both;
  zoom: 1;
}

/*
  ========================================
  body Custom style
  ========================================
*/
body {
  font-size: 1rem;
}

.padded-section {
  padding: 1rem 1rem 1rem 1rem;
}


/*
  ========================================
  Typography
  ========================================
*/

h1, h2, h3, h4, h5, p {
  margin-bottom: 0rem;
}


/*
  ========================================
  Attachable and detachable features
  ========================================
*/

.container {
  margin: 0 auto;
  padding-top: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  width: 100%;
}

.rtl-direction {
  direction: rtl;
}

.ltr-direction {
  direction: ltr;
}

.bg-color {
  background-color: #000;
}

.font-color-white {
  color: #FFF;
}

.font-color-0c0 {
  color: #00CC00;
}

.font-family-vazir {
  font-family: "Vazir", Mono;
}

.font-family-consolas {
  font-family: Consolas, monaco, monospace;
}

.none-text-decoration {
  color: #00CC00;
  text-decoration: none;
}

.title {
  display: block;
  color: #00CC00;
  text-decoration: none;
  font-size: 2rem;
}

.none-text-decoration-none-color{
  text-decoration: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.underline-border a:link, .underline-border a:visited, 
.underline-border a:hover, .underline-border a:active {
  text-decoration: none;
  border-bottom: 1px solid;
}

.underline-border-dotted a:link, .underline-border-dotted a:visited, 
.underline-border-dotted a:hover, .underline-border-dotted a:active {
  text-decoration: none;
  border-bottom: 1px dotted;
}

.underline-border a:visited {
  border-bottom: 1px solid white;
  color: #00CC00;
}

.underline-border-dotted a:visited {
  border-bottom: 1px dotted white;
  color: #00CC00;
}

.underline-border:link,
.underline-border:visited,
.underline-border:hover,
.underline-border:active {
  text-decoration: none;
  border-bottom: 1px solid;
}

.underline-border-dotted:link,
.underline-border-dotted:visited,
.underline-border-dotted:hover,
.underline-border-dotted:active {
  text-decoration: none;
  border-bottom: 1px dotted;
}

.underline-border:visited {
  border-bottom: 1px solid white;
  color: #00CC00;
}

.underline-border-dotted:visited {
  border-bottom: 1px dotted white;
  color: #00CC00;
}

.highlight-text {
  color: #CCCCCC;
  background-color: #008000;
  padding-top: 2px;
  padding-right: 8px;
  padding-bottom: 2px;
  padding-left: 8px;
  margin: 2px;
}

.highlight-text a:link, .highlight-text a:visited, 
.highlight-text a:hover, .highlight-text a:active {
  border-bottom: 1px dotted;
}

/*
  ========================================
  Navigation bar
  ========================================
*/

.navigation-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navigation-list-item {
  float: left;
}

.navigation-list-item a {
  display: block;
  color: #00CC00;
  text-align: left;
  padding: 0 0 .25rem 0;
  text-decoration: none;
  font-size: 1.5rem;
  margin-right: 1rem;
}

.navigation-list-item a:hover {
  border-bottom: 1px dotted white;
}

.navigation-link {
  border-bottom: 1px solid black;
}

.active-list-item {
  border-bottom: 1px solid #00CC00;
}