body {
    /* To allow the div container swivelLeft be centered. Note that we then immediately overwrite this rule in swivelLeft so that the rest of the content is left centered */
    text-align: center;
    margin:0px 10px;
    padding:0px;
    background-color:#333333;
    background-image : url(../images/bg.gif);
    font-family: Verdana, Georgia, "Monotype Corsiva", "French Script MT", "Lucida Calligraphy", cursive, serif;
    font: normal 0.9em Verdana;    
    color:white;
    line-height : 1.7em;
    /* this is to have the curly image for a bullet point */
    list-style-image : url("../images/li.gif");
    list-style-position : outside;
}

div#centerContent {
    /* this makes the content be centered */
    margin:0px auto;
    text-align:left;
    width: 50em;
    height: auto;
    background-color:#333333;
    /* uncomment following lines for debugging */
    /*border:2px dashed #555;
    */
}

div#swivelLeft {   
    /* we specify "left" since the outer centerContent div has it center aligned
       while we want the rest of the content to be left aliged */   
    float:left;      

    background-image : url(../images/swivel_red_thin.gif);
    background-position : left;
    background-repeat : repeat-y;
    padding-left:40px;
     
  	background-color:#333333;
     
    /* uncomment following lines for debugging */
    /*border:2px dashed #333;
	background-color:green;*/
}

div#content {
    background-color: #333333;
    background-image : url(../images/top_bar01.gif);
    background-position : top;
    background-repeat : repeat-x;
    font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, serif, sans-serif;
    padding-right:10px;
        
    /* IE needs a 1px border to display correctly */
    border:1px solid #333333;
}

div#title {
    float:left; 
    border:0px red;
    width:800px;
}

.portal {
    float:left;
    padding : 14px 10px 10px 10px;
    width: 320px; 
    
    /* if you specify height, then text will overflow out of the box is it is too long. However, the size of the portal will be fixed and constant  */
    height: 240px;  
    background-color: #434343;
    background-image : url(../images/top_bar_thin.gif);
    background-position : top;
    background-repeat : repeat-x;
    color : White;
    margin-right : 10px;
    margin-top : 10px;
    margin-bottom : 5px;
    font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, serif, sans-serif;
    line-height : 1.2em;    
    
    cursor:pointer;
    border-style : solid;
    border-width : 1px;
    border-color : #333333;    
}

.portalWedding {
    background-color: white;
    color : #383838;
    border-color : white;    
}

.portalAutoHeight {
    height: auto;  
}

.portalDark {
    background-color: #383838;
}

.pSectionDark {
    background-color: #303030;
}

.pSectionLight {
    background-color: #C8C8C8;
}

.portalWide {
    width: 780px;
    height: auto;
    padding : 10px 25px 5px 25px; /* top right bottom left */
    cursor: auto;
    line-height : 1.2em;            
}

/* 
 * only has a thin horizontal red line as divider and
 * it is used inside of other portals
 */
.pSection {
    border-top-style : solid;
    border-top-width : 1px;
    border-top-color : #CC0000;
    margin-bottom : 0px;
    margin-top : 0px;
    padding: 5px;    
}


img#portal {
    border:0px;
    margin-top:10px; 
    margin-bottom:10px; 
    margin-right:10px; 
    float:left;
}

img#portalWideImage {
    border:0px;
    margin-top:10px; 
    margin-bottom:0px; 
    margin-right:10px; 
    margin-left:10px;         
}

a#portal {
    text-decoration: none;    
    border-bottom-width : 0px;
    color:white;
}

.portalTitle {
    color:white;
    font-size : larger;
/*    font-stretch : wider;*/
    letter-spacing : 0.3em;  
    line-height : 1.5em;        
}

.portalTitleWedding {
    color:#383838;       
}

.sectionTitle {
    color: #CC0000;  
}

.sectionDescription {
    font-style : italic;
    font-size : 80%;
}

.portalbody {
    float:left;
    padding : 18px 10px 10px 10px;
   /* width: 300px; */
    
    /* if you specify height, then text will overflow out of the box is it is too long. However, the size of the portal will be fixed and constant  */
/*    height: 300px;  */
    color : White;
    margin-right : 10px;
    margin-top : 10px;
    margin-bottom : 10px;
    font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, serif, sans-serif;
}

a { 
    /* instead of using the normal link properties for underlining text, we use border property
     in order to have the text white while the underline red  */
    border-bottom-style : solid;
    border-bottom-width : 1px;
    border-bottom-color : #CC0000;
     text-decoration: none;    
     color: white;    
 }

/* normal links */
a:active {
     color: #CC0000;  
}

a:link {
}

a:visited {    
} 
a:hover {
    color: #CC0000;
}

a:active {    
     color: #CC0000;  
}


.portalWeddingLink {
    color:#383838;
}

.textcenter {  text-align: center}

.textsmall {
    font-size:0.7em;
    color: #B3B3B3;
}

.textimportant {
    color:#CC0000;
    font-size:1em;
    font-weight : bold;    
}

.texttitle {
    font-weight : bold;    
}

p:first-letter {
    color:#CC0000;
    font-size:1.5em;
    font-weight : normal;
    font-family : Georgia, serif;
    letter-spacing : 0.1em;      
}   


.indent {
    padding-left : 30px;
}

.quote {
    font-size:2em;
    font-weight : normal;
    font-family : "Times New Roman", Georgia, serif, cursive, Times;
    font-style : italic;
    color : #CC0000;
} 
    
    
/* used to style the email and the phone number at the bottom of the pages */
.contactInfoFooter {
    border-bottom-style : solid;
    border-bottom-width : 1px;
    border-bottom-color : #CC0000;
    padding-bottom:5px;
}

.linebreak {
    height: 5px;
    border-bottom-style : solid;
    border-bottom-width : 1px;
    border-bottom-color : #CC0000;
    margin-bottom : 5px;
    margin-top : 5px;    
}

.imgr, .floatr {
    float:right;
    margin:5px;
    border-width:0px;
}

.imgl, .floatl {
    float:left;
    margin:5px;
    border-width:0px;
}