/* basic reset 

*, *:before, *:after
{
    margin: 0; padding: 0; border: 0; list-style-type: none;
    -webkit-box-sizing: border-box    
    -moz-box-sizing: border-box    
    -ms-box-sizing: border-box    
    -o-box-sizing: border-box    
    box-sizing: border-box    
} 

html {font-size: 100%}    for rem */

/* end reset */ 


body 
{  
    font-family: StRyde-Medium, Verdana, Arial, Helvetica, sans-serif;
  	font-weight: normal;
  	font-style: normal;
    background: url(../samiti/images/samiti_background1.jpg);
    background-attachment: fixed;
}

#container
{
  overflow: hidden;
  width: 100%;
  background-color: #ffeaba;
  border-radius: 25px;
}

/*  basic layout ia follows:

     home page (3 col)             all other pages (2 col)
  ------------------------        -------------------------
 |    |   header     |   |        |   |                   |
 |    |--------------|   |        |   |-------------------| 
 |    |              |   |        |   |                   |
 |    |              |   |        |   |                   |
 |    |              |   |        |   |                   |
 |nav |              |   |        |   |                   |
 |    |  article     |   |        |   |                   |
 |    |              |   |        |   |                   |
 |    |              |   |        |   |                   |
 |    |              |   |        |   |                   |
 |    |              |   |        |   |                   |
 |    |              |   |        |   |                   |
 |    |              |   |        |   |                   |
  ------------------------        ------------------------ 
 |       footer          |        |                       |
  ------------------------        ------------------------ 

    the row class followed by the margin/padding in the col- class makes 
    all the columns the same height as the tallest column     */
    
    
.row 
{
    overflow: hidden;     
    padding: 0.5rem;
}


[class*="col-"] {
  float: left;
    width: 100%;
}

/* for mobile phones: hide right nav and left columns */
#nav {display: none;}
.col-nav {display: none;}
.col-peacock {display: none;}

#mobilenav_box
{
    padding: 1.4rem;
    font-size: 1.4rem;
    text-align: center;
}                                       

#mnavigation img 
{    
    width: 50%;
    height: auto;    
}

/* =============== colors ==================================================

 #ffeaba;   tan                   #FCD491;    #f9a318;  #f9a318   #FFAD3B;
 #ffad3b;  #DEBDDE;   golden         #dea664; #99B0A7;  #ec8852;  #DEBDDE;
 #70002b; #75012a;  maroon         #70002b;     #7C1B20; #CEEFBD; #97afa7;

/* maroon */
 #mobilenav_box, footer, #nav, #nav ul 
{background-color: #ffad3b;}

h1, h2, h3, h4, h5, h6  
{color: #FF6600;}
 
/* coffee with cream         */
.col-nav, .col-peacock, .col-body 
{background-color: #ffeaba;}

/* golden  */
header, #golden_box
{background-color: #ffad3b;}

#mobilenav_box a, #copyright 
{color: blue;}

/* =============== elements ==================================================*/

article
{
    padding: 1rem;
}

h1, h2, h3 
{
    font-weight: bold; 
    margin: 1em 0em .5em 0em;
}

h1 {font-size: 2.4rem; line-height: 2.0rem;} 
h2 {font-size: 2.0rem; line-height: 2.0rem;}  
h3 {font-size: 1.4rem; line-height: 1.4rem;}
h4 {font-size: 1.1rem; line-height: 1.4rem;}
h5 {font-size: 1.0rem; line-height: 1.2rem;}
h6 {font-size: 1.0rem; line-height: 1.0rem;}

p, ol, ul
{
    font-size: .8rem;
    line-height: 1.4em;
    margin: 1em 0em;
}
  
img
{
    width: 100%;
    max-width: 100%;
    height: auto; 
}  

a {text-decoration:none; outline: none;}
a:link {color: blue;} 
a:visited {color: purple;}
a:hover {color: red; background: #ffeaba;}
a img  {border: none;}

#navigation a
{
    padding: 1rem 0rem 0rem 0rem;
}

article ul, article ol
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 1em 1em 1em 2em;
}
article li
{
    list-style-type: disc;
    line-height: 1.5rem;
    font-size: 0.8rem;
}

ol li
{
    list-style-type: decimal;
}

#navigation /* this is an ul so need to reset to o */
{
    margin: 0em; 
}

.phototeachers img 
{
    width: 30%; 
    float: right;
    margin: 2em;
}

.rowof4 img
{
    width: 23%; 
    float: left;
    margin: .2em;
}

#copyright 
{
    font-size: 0.6rem;
    text-align: center;
    padding: .8rem 0rem .5rem 0rem;
}

#golden_box
{
    height: 272px;
    width: 100%
}

#peacock
{
    margin: -250px auto 0px auto;
}

#credit
{
    padding: 1rem 1rem 0rem 7rem;
    text-align: center;
    font-size: 0.6rem;
}

.divider, .thin_divider
{
    height: 3rem;
    width: 90%;
    border-top: .1rem solid #70002b;;
    margin: 0em auto;
    clear: both;
}

.thin_divider
{
    height: .5rem;
}

#faq img
{
    width: 1rem;
    height: auto;
}

.color-red{color: red;}

.center {text-align: center;}

.clearboth {clear: both;}


/* =============== id ==================================================  */
 


#nav
{
  margin-top: -0.3rem;
  font:  0.8em Verdana, Arial, Helvetica, sans-serif;
  background-color: white;
	list-style:none;
	font-weight:bold;
	float:left;
	width:100%; 
}

#nav > li
{
	width: 13%;
}

#nav li
{
	float:left;
	margin: 0rem 0rem 0.1rem  0.3rem;
	position:relative;
} 

#nav > li > a
{
	height: 4rem;
}

#nav a
{
	display:block;
	padding:0.2rem;
	color: #FF9966;
	background: #FFEECC;
	text-decoration:none;
}  

#nav a:hover
{
	color: blue;
}
   
/*--- DROPDOWN ---*/ 

#nav ul
{
	background: #FFF;   /* don't show text in between menu choices */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed */
}


.sub
{
  margin-top: -.1rem;
}

#nav ul li
{
border-top: 2px solid white;
float:none;
}


#nav ul a
{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}

#nav li:hover ul
{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
    position: absolute;
    z-index: 100;  
}

#nav li:hover a
{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
}

#nav>li:hover>a
{    /* this is just for the top link */
	background: #AAAAFF;
	color: blue;
}

#nav li:hover ul a
{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}

#nav li:hover ul li a:hover
{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background: #AAAAFF;
}   

.img40pl
{
    width: 40%;
    float: left; 
    margin-right: 2rem; 
    margin-bottom: 3rem;
}

 
#gloss li:first-line 
{
margin-left: -10px;
color:#ff0000;
}


#gloss a {text-decoration:none;}

#paypal_button {width: 30%}

.author
{
    width: 5rem;
    float:right; 
    margin: 2rem;
    padding: 1rem;
    border: 1px solid black;
    font-size: small;
}

.aquote
{
    font: italic small 1em "Times New Roman", Times, Georgia serif;
    font-style:italic;
    margin: 10px 40px;
}

.right
{
    display: block;
    text-align: right;
} 

.left
{
    text-align: left;
} 

.title 
{
    color: black; 
    font: bold 1em Verdana, Arial, Helvetica, sans-serif;
    text-align: center
}

.mother_img
{
    width: 20%; 
    float: left;
    margin-right: 1rem;
}

.aquote
{
    display: block;
    font: italic small 1em "Times New Roman", Times, Georgia serif;
    font-style:italic;
    margin: 10px 40px;
}

.bullet li
{
    list-style-type: disc;

}

.event
{
    margin-top: 1rem;
}

.event_title
{
    float: left; 
    width: 30%; 
    margin: 0% 5% 3% 0%;
}

.event_description
{
}

footer p
{
   float: left; 
   margin-top: 10%; 
   margin-left: 10%; 
   border-top: 0.1rem solid black;"
}

footer img
{
    width: 20%; 
    float: left; 
    margin-left: 2rem; 
}

/* =============== responsive design ==========================================

/* 480px = 30rem, enlarge font, put in margins */
@media only screen and (min-width: 32rem) 
{ 
    #container
    {
      width: 85%;
      margin: 1em auto;
    }
    
    html {font-size: 110%}
    
    #mnavigation img 
    {    
        width: 40%;
        height: auto;    
    }
}

/* 640px = 40rem, tablets and larger: enlarge font, show nav column*/
@media only screen and (min-width: 40rem) 
{    
    .col-body {width: 80%;}
    .col-peacock {width: 20%; display: block;}
    
    #mobilenav_box, #mobilenav {display: none;}
     #nav {display: block;} 
   
    html {font-size: 120%;}
}

/* 880px = 55rem, enlarge font */
@media only screen and (min-width: 55rem) 
{ 
    html {font-size: 140%;}
    .row {padding: 0rem 2rem 1rem 2rem; }
    footer {padding: 0rem 2rem;}
}

/*  for desktops same as tablets except for the home page 
    which has a decorative third column added in header_sacyog and 
    finished in footer_sacyog 

    this inline style sheet is listed in header_sacyog.php
    
    remember inline styles take precedent over rules in this stylesheet
        
/*1024px = 64rem, make nav and body cols narrower*/  
@media only screen and (min-width: 66rem) 
{                    
    .col-nav {width: 20%; display: block;}
    .col-body {width: 65%;}
    .col-peacock {width: 15%; display: block;}
    #golden_box{visibility: hidden;}
    
    .row {padding: 0rem 5rem 1rem 4rem; }
}
                  
 /* 1200px = 75rem, make body narrower */
@media only screen and (min-width: 77rem) 
{   

    #nav > li > a {height: 2rem; }

     .row {padding: 0rem 7rem 1rem 5rem; }
         
    .col-nav {width: 15%;}
    .col-body {width: 70%;}
    .col-peacock {width: 15%;}
} 
                              
/* 1360px = 85rem,  1240px = 77.5rem  max-width doesn't work??
  fixing the width stops the container from growing  
  the contatiner width has to be in px and not rems
  or else the browser freaks */
@media only screen and (min-width: 86rem) 
{             
    #container {width: 1240px;}    
    #golden_box{visibility:visible;}
    
    .row {padding: 0rem 8rem 1rem 7rem; }

}                  
   




/* 
#content
{
    width:720px;
    background-color: #FFFFFF;
    padding: 20px 40px;
}
 
 =============== class ==================================================
.col1
{
    margin-top: 40px;
    width: 150px;
    float: left;
}

.col2
{
    width: 300px;
    float: left;
}

.col3
{
    margin-top: 40px;
    margin-left: 30px;
    width: 150px;
    float: left;
}

.center
{
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

.floatleft
{
    float: left;
}

.float_left > img
{
    float:left;
}

.float_right > img
{
    float: right;
}
 

.holymother
{
    position: absolute;
    padding: 5px;
    border: 1px dashed gray;
    top: 65;
    left: 260px; /*position where enlarged image should offset horizontally 
}

.picture_list_list img
{
    height: 160px;
    width: 120px; 
    float: left; 
    margin-right: 30px;
}


.picture_list_list ul li
{
    list-style-type: none; 
    font-weight: bold
}


.picture_list_list ul li ul li
{
    list-style-type: circle; 
    font-weight: normal;
    margin-left: 130px; 
}

/* =============== element ==================================================
body
{
    background-color: #FF9966;
}


h1, h2, h3 
{
    color: #FF6600; 
    font: bold 1em Verdana, Arial, Helvetica, sans-serif;
}
  
h2
{
    font-size: .8em;
}
  
h3
{
    font-size: .7em;
}

a {text-decoration:none;}
a:link {color: blue;} 
a:visited {color: purple;}
a:hover {color: red; background: silver;}

p
{
    font: .8em Verdana, Arial, Helvetica, sans-serif;
    line-height: 1.4em;
}


/*---------- bubble tooltip ----------
a.tt{
    position:relative;
    z-index:24;
	font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it
a.tt:hover{ z-index:25;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:10px; left: 20px;
	padding: 15px 0 0 0;
	width:200px;
	color: red;
    text-align: center;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
}
a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch 
	display: block;
	padding: 0 8px; 
	background: url(bubble_filler.gif) repeat bottom; 
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url(bubble.gif) no-repeat bottom;
}

                                                             */